Category: F2023 – Mang

As a Computer Science major, watching Casey Reas’s presentation on “Chance Operations” was truly enlightening. I had always perceived code as a rigid and entirely controllable entity, firmly rooted in rational decisions and binary logic. However, Reas’s perspective on blending randomness and algorithmic control to yield surprising results challenged this notion.

A particularly captivating idea he presented was “Fractal Invaders,” where artist intentionally incorporate controlled randomness into their work, much like the unpredictable outcomes of a coin toss or a roll of the dice. This controlled randomness made each version of the artwork unique and unpredictable.

Moreover, he emphasized upon the power of symmetry in his creative process. He highlighted that even in compositions that initially arose from randomness, the introduction of symmetry could instill a sense of order and familiarity. It struck me that as humans, we possess an inherent tendency to seek patterns and meaning within chaos. Our brains are wired to identify recognizable shapes and forms, and this inclination even extends to our perception of generative art.

All in all, the process of merging randomness with symmetry in generative art is fascinating because it explores how our minds work creatively. It shows that complexity can come from simplicity and that order and chaos can coexist. This artistic process invites us to contemplate the human mind’s innate desire to discover patterns and meaning in the world, ultimately pushing the boundaries of creative expression.

 

Concept:
For this assignment I looked for many works of computational repetitive art and found really interesting works. However, the one I liked the most is this one I saw in the art center (shown in the figure below). I don’t know why I liked this one so much but maybe because I saw it in real life. I decided to work on a similar idea but with introducing more colors and different pattern. While working some things didn’t go the way I wanted but it resulted in some really cool stuff.

Code Highlights:
The part of code I am proud of is drawing the spiral arm and especially figuring out how to utilize sin and cos functions for my work.
Sketch:

Reflection and ideas for future work or improvements:
I am proud of the final output of my sketch. However, I think of implementing different modes where every mode would have a bit similar color combinations to make it more visually coherent. For example, one mode can contain the shades of blue.

Being an avid lover for randomness, Casey Reas’s talk was very interesting for me. The way he presented how chaos can be applied to visual art to bring out masterpieces answered a question that I always ask myself whenever I face this kind of art, “how was the artist able to think of such art.” What makes the art really awesome is that there is no specific correct way to create it. So, what if a bit of chaos is added to this open-source artisitc world? Indeed, the idea of randomness in art is very interesting.

Although I enjoyed his beautiful art works, another thing really intrigued is the way he approaches his work. As Casey Reas demonstrated in his talk, he artfully describes the elements within his work through a series of simple commands (shown in the figure below), eloquently narrating the shapes and movements that give life to his compositions. This method of breaking down the artistic process into its fundamental building blocks not only demystifies the creation of complex artworks but also provides a unique insight into the mind of the artist. It’s a testament to the power of code as a medium for artistic expression, where algorithms become brushes, and pixels become paint on the digital canvas.

Concept:

I was introduced to the phenomenon of Perlin noise from one of the readings in class. I looked deeper into it, and I kind of fell into a rabbit-hole where I was googling the sort of things one could generate using this property. Always a fan of vaguely spherical shapes, I used the noise to make distorted spheres. While playing around, I noticed that from above it it almost looked like a flower. I decided to make multiple of them, and increase the density so that they look thicker. I randomized the locations, so that slowly the screen fills up and once it’s finished, it should somewhat resemble roses (as if you’re looking down at them). This is what it looked like initially:

But after messing around with some parameters and adding a seed the end product becomes something like this:

Code Highlights

Because most of this is randomized and is one shape over and over again, the code isn’t the most technically impressive. I do like the use of Perlin noise to make radial shapes, and the randomization of the locations.

for (let j = 0; j < 2; j++){
  stroke(roseColors[currentColor]);
  push();
  translate(startX, startY);
  beginShape();
  for (let i = 0; i < 130; i++) {
    let angle = map(i, 0, 130, 0, TWO_PI);
    let radius = 150 * noise(i * 0.5, d * 0.005);
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    curveVertex(x, y); 
  }
  endShape(CLOSE);

  
  beginShape();
  for (let k = 0; k < 70; k++) {
    stroke(color(142, 128, 106, 15))
    fill(color(142, 128, 106, 15))
    let seedAngle = map(k, 0, 70, 0, TWO_PI);
    let seedRadius = 15 * noise(k * 0.03, d * 0.005);
    let x = seedRadius * cos(seedAngle);
    let y = seedRadius * sin(seedAngle);
    curveVertex(x, y); 
  }
  endShape(CLOSE);
  pop();

  d += 0.5;
  
  
}

 

Here is the final product.
Improvements

I’m a very impatient person, so the amount of time it takes to fill up the screen frustrates me a little bit. In the future, I’d like to find a way to speed up the process a bit. In addition, I’d love to find the way to control the randomness a bit. Some spaces on the canvas get oversaturated with flowers too quickly while others remain blank for a long period of time. I’d love to add some control or measure that makes sure every space on the canvas is populated with one flower at least (as soon as possible).

Casey Reas’ presentation gave me several insights about the role of chaos in computing visual art. I never stopped to think about these concepts, but the more examples I saw, the more I understood their importance. As Reas was showing some of his work throughout the presentation, I quickly realized how superior the works he was not in “control” were in comparison to his highly fixed ones, which were just simple shapes as opposed to aesthetically pleasing and complex pieces generated by chaotic code. This dynamic interaction between human intent and machine generated randomness not only can produce captivating art but it can also deepen our understanding of mathematics. The generated outputs were so interesting that Reas even ended up using them in clothing, showing the power of computing when it comes to art. The examples from other authors also gave me inspiration for the loops assignment.

Additionally, something that caught my attention was the process behind coming up with these codes. Reas mentioned that one of his projects took a year of planning before he actually started to code, he also mentioned at some point how he went through hundreds of different generated outputs for the same project, which makes me wonder how long on average it takes to come up with these designs, and how much of it is simple trial and error or hours and hours of analyzing and writing algorithms to come up with something idealized. Perhaps it is a mix of both, as mentioned in the quote: “It’s never a blind chance, it’s a chance that is always planned, but also always surprising”

In short, although I am more interested in the presented visual aspects as opposed to mathematical ones, these are still beautiful concepts to take a look at and appreciate the hard work and complexity that goes behind the scenes.

For this assignment, I drew inspiration from Casey Reas, who delved into the realm of randomness in his artistic endeavors. What has always fascinated me about art is that there’s no single “correct” way to perceive it. So, I set out to create something that generates different results based on user interaction. I designed squares with circles inside them, and these circles change in size as the user hovers their mouse over the squares. This introduces an element of unpredictability and variability into the creative process, echoing Casey Reas’s exploration of randomness.

The part of code that I like is this:

In this section, when the mouse hovers over a square, it dynamically adjusts the size of the associated circle according to specific conditions. This results in a captivating pulsating effect for the circles when users interact with the squares. What makes this fascinating is that each person’s experience will yield a different pattern based on where and how long they hover their mouse.

I found this assignment to be a delightful exploration. It prompted me to view art and generative art from a fresh perspective, highlighting that even within randomness, there exists an underlying sense of pattern. It’s as if the elements of chance and algorithms are working together to create a structured yet ever-evolving composition.

 

For this assignment of making an art piece using  Conditionals & Loops, I tried to combine the meditative aspects of Zen art with the precision of code, resulting in a unique and soothing digital art piece.

Concept

The concept of creating Zentangles is to relax, do art, appreciate the simplicity and be grateful for the opportunity and time to do the art! A Zentangle is usually drawing repetitive basic shapes & curves on a tile of paper or cardboard. For me, this tile was the p5.js canvas, the repetitive shapes – for loops I used and my code – the pencil!

The sketch(es)!

I began with a lot of thoughts and abstract ideas on how to go about doing this and made a countless number of edits, bigger or smaller shapes, darker or lighter mode,  time-based creation or mouse-interactive creation, corner positioned or center positioned, and I just couldn’t pick so I decided to give all of them to this blog post!

This one is the mouse-interactive one where, hovering over different positions on the Canvas enables different colors and shapes. To temporarily pause we can mouse click, keypress ‘s’ to stop or release mouse click to resume.

This one is time-based where it changes the color, radius and spacing based on a set time and frameRate. Mouse click pauses the loop by doing noLoop(), and releasing resumes the loop using loop().

.

A part of the code that I’m happy about is the math and the logic that went into making the circles and squares rotate and move in a specific way. I used the map() function to re-map the range of values that the radius of the circle can take, translate() to modify the center, followed by creating a function to check the position of the cursor to adjust color and spacing. For the time based one, I just used the frameCount.

function makeArt(maxRadius,spacing,numCircles,minRadius)
  {
    translate(width / 2, height / 2);

  for (let i = 0; i < numCircles; i++) {
    let x = cos(angle) * spacing * i;
    let y = sin(angle) * spacing * i;
    let radius = map(i, 0, numCircles, minRadius, maxRadius);
    let outerRadius = maxRadius*1.25;
    rectMode(CENTER);
    rotate(angle);
    rect(0, 0, outerRadius * 1.5, outerRadius * 1.5);
    rect(outerRadius*1.5, outerRadius*1.5, 17, 17 );
    push();
    translate(x, y);
    rotate(-rectAngle);
    ellipse(0, 0, radius);
    pop();
  }

  angle += 0.01;
  rectAngle += 0.31;

Reflections 

I’m enjoying the assignments for this class and feel like I’m challenging myself to think more out of the box. This felt like the perfect first step towards balancing the ‘Order & Chaos’ like from the Casey Reas read! For improvements, I think I could add more shapes or curves and not just stick to the ones I did and maybe try to create a more complex mandala/zentangle!

Casey Reas opens his speech illustrating how it’s been largely the role of artists to maintain order in the face of nature. However, as he continues further showcasing his own and other artists’ works, I started to doubt this idea of his.

The work that captured my attention the most was “Signals”, created in collaboration with American designer Ben Fry in 2011. This artwork showcases protein communication within a cancer cell, where each graphical cluster represents signals between networked proteins in a cancer cell as they change over time. Individual arcs represent signals from one protein to another; arc size corresponds to signal magnitude. Professor Michael Yaffe’s laboratory provided the data. Here is the artwork in question:

Reas’ approach to data visualization as a creative expression presents important questions regarding how data representation through art affects different viewpoints. “Signals” may convey a feeling of the complicated conflicts taking place within cancer patients’ bodies, perhaps demystifying a difficult biological process and establishing a connection to their own health journey. This type of visualization can also be a significant tool for scientists and researchers in acquiring insights and developing ideas on cellular behavior.

However, when ordinary people without a scientific background are considered, the possibility for bias and misinterpretation emerges. Such simulations’ aesthetic appeal may unintentionally romanticize or oversimplify the complicated realities of diseases like cancer. It is critical to recognize that, while art can improve our understanding, it can also distort it.

To conclude, it is critical to investigate the various perspectives on this junction of art and science. How do patients, scientists, and members of the general public react to data-driven art? What are the ethical and educational consequences of visually representing complicated scientific concepts? These issues emphasize the diversity of data visualization in art, as well as the importance of taking a balanced approach when understanding and appreciating these creative interpretations of knowledge.

Randomness, Random numbers, Coin flipping – math class? The only time I’d hear this combination of words was in a math class. Now, adding Art to it, I’ve always heard that you should let your art flow instead of binding it until it ends up creating something satisfying and my perspective broadened significantly after watching Casey Reas’s talk on Chance operations.

However, What intrigues me more than the thought that goes into making random generative art or the experimentation involved in it, is the viewer’s experience and its subjective nature.Art, by its very essence, is subjective, and everyone brings their unique perspective to the act of viewing it. When randomness is introduced into the equation, this subjectivity intensifies. During the talk, I found myself having different interpretations for each demo piece he presented.

Taking, for example, the ‘Fractal Invader.’ While the idea of creating art based on a coin flip is amusing in itself, what truly fascinated me was how my mind suddenly began to perceive people, faces, and complete figures within the artwork. Like this one that looks like a man represented by these black and white squares.

It made me wonder why our minds often deceive us into thinking something is incomplete, and yet, duplication somehow makes it appear whole. Why do we read into it when it’s duplicated? I like that recurring appearances of elements & patterns can create a sense of rhythm and harmony within a particular piece of art.

Introspecting on Reas’s discussion of randomness in isolation, particularly his mention of “the space between order and chaos,” I realized that even this concept is subjective. It left me curious on a slightly different front. How can we determine, to what extent randomness conveys which specific emotion? because just one visual is enough for our minds to start an endless stream of thoughts related to it. I’m interested in exploring further on two aspects: understanding the balance between order and chaos and finding effective ways to express emotions through randomness in the viewer’s experience of generative art.

For this week’s assignment, I wanted to experiment with two-dimensional arrays. Here is the outcome of my experiment:

I achieved the two-dimensional array structure by using nested loops (a loop within a loop) to arrange the ellipses in an organized manner. The outer loop, controlled by the variable ‘x’, is responsible for iterating through the columns of the grid. It starts with an initial value ‘spacing/2’ and increments by the value of ‘spacing’ in each iteration. This ensures that each column is spaced evenly from the previous one. Inside the outer loop, there’s an inner loop controlled by the variable ‘y’. This inner loop iterates through the rows of the grid, just like the outer loop does for columns. It also starts with an initial value ‘spacing/2’ and increments by ‘spacing’ in each iteration, ensuring that each row is spaced evenly from the previous one.

// creating a 2D array to achieve a board like structure
  // iterating through columns. setting the initial x position from spacing/2 and y position from spcing/2 to make all the ellipses on the board appear full.
  for (let x = spacing/2; x < width; x += spacing) {
    // iterating through rows. 
    for (let y = spacing/2; y < height; y += spacing) {
      // generating a noise value n that depends on the position of the ellipse and changes over time due to t
      let n = noise(x,y,t);
      // mapping the noise value from the range [0,1] to the radius value in the range [0, 25]
      let radius = map(n, 0, 1, 0, 25)
      noFill()
      // adding additional animation that makes the ellipses with radius <10 to fill
      if (radius < 10){
        fill(255)
        ellipse(x, y, radius)
      }
      else{
        stroke(255)
        ellipse(x, y, radius)}
    }
  }
}

Besides the 2D array, another key element of my sketch was the Perlin noise. Perlin noise, named after its creator Ken Perlin, utilizes an algorithm that generates a sequence of pseudo-random numbers in a way that maintains a natural sense of order. In this sequence, each successive number is closely related in value to the one preceding it. This approach results in a “smooth” transition between these numbers, giving rise to a more organic and less chaotic visual effect compared to pure randomness. In my case, Perlin noise generates variations in the ellipse sizes, making the transitions between the different sizes appear smooth and organic. The Perlin noise value is calculated based on the position of each ellipse on a 2D grid (x and y coordinates) and changes over time due to the ‘t’ parameter.

// generating a noise value n that depends on the position of the ellipse and changes over time due to t
      let n = noise(x,y,t);

After looking at the sketch for a while, I realized that it reminded me of microalgae. The visual output of the sketch sort of resembles the view of microalgae under a microscope. It also captures the organic growth pattern due to the Perlin noise, mimicking the natural variation seen in these microorganisms. While my sketch is rather abstract, I believe it conveys the idea of a living system evolving and changing over time, which happened to be a nice accident.

By CSIRO, CC BY 3.0, Link