Week 2: Reading Response Casey Reas’ Eyeo talk on chance operations

The juxtaposition of the artificial, conventionally associated with rigidity and logical order, and the organic, characterized by spontaneity and fluidity, has been historically observed, as Reas illustrates in his talk, since humans ventured into the arts and the sciences. I especially enjoyed Reas’ chronicling of the journey of digital creators and artists marrying these two by exploiting “parameterized change” to give dynamism to their work, starting with the courage of early artists like Jean Arp. I also appreciated his demonstration of how he systemized the process of introducing controlled randomness in his work by formulating algorithmic elements and processes, like element 5 and process 18 that he used to produce the artwork below. As someone who has an understanding of the mathematical quantification of randomness, as defined by measures of entropy, and has also been interested in studying the historical emergence of artistic abstract and surrealist works, I was delighted to see Reas illustrate how both can be integrated, via computational methods, to produce pleasing digital artworks.

It was thought-provoking and almost ironic to see an algorithmic process attempting to simulate constrained randomness. Randomness, by its very nature, assumes the lack of regularization or adherence to a set of well-defined instructions. However, it is indeed possible, as shown by Reas, that despite their antithetical nature, randomness and order can co-exist and synergize to produce beautiful pieces of art.

One thing that caught my attention is Reas’ emphasis on producing from chaos an emergent homeostasis that is balanced and patterned. In the above example, for instance, Reas notes that repeated iterations of his process produce similar-looking, almost “unified,” results. This is essentially a product of “parameterizing” randomness. As Gerhard Richtar also states: “above all, it’s never blind chance: it’s a chance that is always planned, but also always surprising.” In a sense, randomness, then, becomes this beast that needs to be tamed, through order, to produce art that is organic and new, but still has an emergent form to it to be meaningful. This could also be demonstrated by the incorporation of symmetry in the Fractal Invaders animation to produce forms that can be readily interpreted by the viewer but were not necessarily manufactured by the artist.

This got me thinking: why can we not embrace randomness in art in its own right, without the need to constrain it or tame it in any way? Can we re-wire our brains to enjoy the unexpected jitters of white noise? Or derive pleasure from looking at TV static the way we would Renaissance paintings in museums? Lastly, if truly random art were to exist, where would that place the artist?

Assignment #2 – Casey Reas Talk

When we hear the word “Chaos” our minds automatically think of destruction and overall something negative. Casey Reas explored the meaning of this word and it reshaped my mind in terms of its meaning. Reas included many applications of “chaos” in beautiful pieces of art and explored how chaotic nature could be.

One concept that really stuck with me was the concept of randomness. Casey Reas’s talk opened my eyes on the ways in which the idea of randomness is perceived in art. I genuinely believe that randomness is sometimes important and Reas highlights that at one point.

Another concept that stuck out for me was the part where he talked about combining art with biology. Being a Psychology major student, I am very interested in one’s mind and knowing that it is possible to merge both of my interests into one made my day. I am truly satisfied after watching this talk.

Assignment 2: Creative Reading (Casey Reas)

While watching this video, I was very intrigued by the algorithms that were implemented. Particularly, I loved the pieces where they use certain algorithms to create meaningful simulations. This shows us how ordered chaos is all around us. The artwork in which the geometry of the body and tissue images are used to make clothing was very cool.

The way that randomness is portrayed is very interesting, especially when he shows different patterns which are all produced by a single algorithm. This shows how so many different artworks can be produced with randomness, just by doing a small change such as the speed in which the artwork moves or even the characters that are used for the pattern.

Another concept I found fascinating was “Fractal Invaders” where a coin is flipped and outputs either a black or white square depending on heads or tails. When it was made symmetrical, we started to see actual shapes that made so much sense.

Assignment 2: Loops

For this assignment, we were asked to use Loops to create a simple work of art. A few years ago, I came across one video of Lex Fridman on my YouTube recommendation on “Donut-shaped C code that generates a 3D spinning donut” . It is a video featuring Andy Sloane’s work on the 3D Spinning donut. Since then, this video has been on my watch later playlist. The blog post from Andy Sloane himself on this work can be found here. I always wanted to recreate this. On my first reading of the blog post, I understood the math easily, but back then, I did not have the courage to take on the coding portion.

After going through the listed examples for this assignment, it was clear to me that Andy’s work is also a work of art. So, I quickly decided to recreate that work in p5.js. After looking into the source code, I quickly realized the fearsome code is nothing but a combination of lots of loops.

In this artwork, the 3D effects are created using the mathematical process called z-buffering. This involves creating a 2D array called a z-buffer, which stores the distance to the nearest object for each pixel on the screen. When the code renders an object, it calculates the distance to the object for each pixel and compares it to the value stored in the z-buffer for that pixel. If the object is closer than the object currently stored in the z-buffer, the code updates the z-buffer with the new distance and draws the object on the screen. This process is repeated for each object in the scene, and the result is a 2D image that appears to be 3D. The detailed mathematical explanation can be found on Sloane’s blog here.

I could not directly use the source code provided by Andy Sloane. His art work was based on C code, which did not have functions like draw() in p5.js. So, although I took the mathematical grounding from his shared source code, I had to rewrite the algorithm to make this work in p5.js.

// Function to draw the rotating donut
function canvasframe() {
  // Increment angles for rotation effect
  A += 0.07;
  B += 0.03;

  // Calculating the cosines and sines of A, B
  let cA = cos(A), sA = sin(A),
      cB = cos(B), sB = sin(B);
  
  // parameters to scale and move the donut
  let scale = 400; // variable to scale up or down the donut
  let xOffset = width / 2;
  let yOffset = height / 2;
  let K2 = 10; // perspective adjust
  
  // Draw the donut
  for (let j = 0; j < TWO_PI; j += 0.3) {
    let ct = cos(j), st = sin(j);
    for (let i = 0; i < TWO_PI; i += 0.1) {
      let sp = sin(i), cp = cos(i);
      let ox = 2 + 1 * ct, 
          oy = 1 * st;

      // transform the 3D points to 2D using rotation and perspective
      let x = ox * (cB * cp + sA * sB * sp) - oy * cA * sB;
      let y = ox * (sB * cp - sA * cB * sp) + oy * cA * cB;
      let ooz = 1 / (K2 + cA * ox * sp + sA * oy); // One over Z (Depth)
      let xp = xOffset + scale * ooz * x; // translate and scale to fit the canvas
      let yp = yOffset - scale * ooz * y; // translate and scale to fit the canvas
      let L = 0.7 * (cp * ct * sB - cA * ct * sp - sA * st + cB * (cA * st - ct * sA * sp)); // calculate brightness
      if (L > 0) {
        fill(255 * L); // Set the fill color based on the brightness
        rect(xp, yp, 2, 2); //draw the point with a slightly larger size for better visibility
      }
    }
  }
}

I successfully recreated the donut’s 3D effect. However, I could not finish up the ASCII donut. So, in future I would love to finish up the work and replicate the entire art work.

Reading Response- Casey Reas’s Talk/Presentation

Casey Reas’s talk opened my eyes on the ways in which the idea of randomness is perceived in art. Reas talks about randomness in nature and how it tends to be chaotic and not in the “order” us humans like to believe nature is. This idea of the importance of “order” dates back centuries as throughout history humans have been very concerned about the idea of maintaining order in art. So, in my eyes, this idea of randomness that Reas mentions throughout his talk attempts at fighting this supposed human urge for order and pushes us to embrace randomness and, in a sense, chaos, that randomness in digital art brings. 

 

Thus, this makes me think a lot about the nature of this urge for order that has ruled human civilization for centuries. Why is it that we desperately need order? Why do we need to translate our urgency for order into the art that we produce? These questions cannot be answered with a ‘yes’ or ‘no’ answer but I believe that there is something that Reas says that may help with answering these questions. “Make your reality, Make your own world,” this very sentence said by Reas suggests that the reason we so desperately need order is for comfort. When we do not know what to expect, whether that is in our routine lives or even in art, a sense of discomfort arises, and to a certain extent fear as well. This attachment to monotony and repetition of life is holding us back and therefore the only way to embrace chaos, randomness, and unpredictability, is to move away from comfort and actually build our own reality, not the one we are accustomed to. Thus, by becoming uncomfortable and embracing chaos, we are able to create art that embodies the concepts of randomness that Reas mentions throughout his talk. It is only when we do so that we will see randomness being embraced worldwide.

Assignment 2- Loops

 

For this assignment, I wanted to combine both loops and if/else statements to create a simple interactive and somewhat animated piece. The main concept of the sketch is to create a kind of geometric art piece that includes elements of interactivity and animation, while simultaneously being simple and minimalistic. This can be seen through the color and the simple grid choice that I decided to create. The concept of simplicity can be further seen through the intentional placement of the rectangles. I did not want the different rectangles to go over the main grid, which is why I made it so it only filled the gaps between the grid of rectangles.

 

The process of creating this sketch involved a lot of practicing outside of class, specifically with for and while loops. I will say that I did struggle to understand how each of the loops worked at first. However, as I started to practice and learn from my mistakes, I was able to understand how the grids worked and eventually got to create my desired visual outcome of a grid of rectangles, in which the rectangles are whole and take up all the space that they can on the canvas. With that being said, the code I am most proud of has to be the ‘animation’ element of my sketch due to the fact that I learned so much about the importance of defining each element carefully. I, initially, had trouble with having the rectangles move both vertically and horizontally but after discovering the root of my problem, which was not defining each properly and carefully, I was able to successfully create movement on my canvas. 

 

Here is the code that demonstrates this: 

//Rectangle 1
stroke(200);
strokeWeight(2);
noFill();
rect(x, 110, 380, 30); //Dimensions of first rectangle.

if (x > width || x < 0) {
  speedX = -speedX; //Reverse direction of first triangle to create a bounce effect when it hits the start or end of the canvas.
}

x = x + speedX; //Allows for first triangle to move. 

//Rectangle 2
stroke(200);
strokeWeight(2);
noFill();
rect(110, y, 30, 380); //Dimensions of second rectangle.

if ((y>height) || (y<0) ) {
speedY = -speedY; //Reverse direction of second triangle to create a bounce effect when it hits the start or end of the canvas.
}

y = y + speedY; //Allows for second triangle to move. 

//Rectangle 3
stroke(255);
strokeWeight(2);
rect(a, 260, 380, 30); //Dimensions of third rectangle.

if (a > width || a < 0) {
  speedA = -speedA; //Reverse direction of third triangle to create a bounce effect when it hits the start or end of the canvas.
}

a = a + speedA; //Allows for third triangle to move. 

//Rectangle 4
stroke(255);
strokeWeight(2);
rect(260, b, 30, 380); //Dimensions of fourth rectangle.

if ((b>height) || (b<0) ) {
speedB = -speedB; //Reverse direction of fourth triangle to create a bounce effect when it hits the start or end of the canvas.
}

b = b + speedB; //Allows for fourth triangle to move.

 

My final sketch: 

 

In terms of improvements, I think I want to work on playing around with different ‘animation’ styles or effects. I feel like if I had more time to sort of practice and play around with these functions, I would be able to add more effects to my sketch, potentially making it even more dynamic. Reflecting on my sketch and progress overall, this assignment has most definitely made me more comfortable with using different shapes and parameters, something I initially struggled with. I also was able to successfully add in effects and create User Interface Design as I added elements of interactivity to my sketch this time around. I really enjoyed experimenting with the skills I’ve learned thus far, and I am genuinely happy with the user interactivity and somewhat complex design I managed to create.

Reading Reflection – Week #2 Stefania Petre

Digital art has always been criticized because of its algorithm, as it challenges the old-fashioned traditions of painting, making music, videos et cetera. I believe that Casey Reas’ Eyeo talk on chance operations is a good argument on why modern artists still remain artists.

The way he is trying to explain the whole documentation process that has to happen in order for digital art to be created is very valuable. We do not only hear about the steps, but also we have the chance to see everything that goes behind digital art.

My favorite part of the talk was when he quoted the fact that ‘ a chance is always planned’, meaning that without the person, everything would just be a random code that has no beginning and no end. The human is what makes it have value.

In the end, I have to admit that after having watched this video I can certainly say that I have gained more respect towards digital creators.

Assignment 2: Loops

This piece was inspired by the constant traffic in Dubai. While sitting and watching the road in the car, I had noticed a few patterns that are repeated, such as the circles in a traffic light and the dashed road markings that separates the lanes.

The idea for this interactive piece is for the user to control the traffic by hovering over the traffic light and choosing whenever it turns red, yellow, or green.

I used for loops to portray the road markings and the circles in the traffic light. Something that I spent some time to figure out is how I can make the road continuously animate without it stopping. For that, I used frameCount and the Modulus sign to control it.

//green
  else if (mouseX > 340 && mouseX < 370 && mouseY > 95 && mouseY < 125) {
    for (X = -40; X <= width; X += 160 ) {
      for (Y = frameCount % 80; Y <= height; Y += 80) {
        fill('white');
        rect (X, Y, 15, 30); 
        frameRate(60);
        fill('green');
        circle(355, 110, 30);
      }
  }
  }

For improvements, I would add an instructions page before so that the user would know what to do. I would also add more cars that move in different lanes.

Reading Reflection – Week #2

I found the assigned video Casey Reas’ Eyeo talk on chance operations very interesting, as I could observe how, from the simplest of algorithms, we can create and simulate something that we can see in real life. For example, if a designer wants to create a maze without crafting everything at hand, the designer could, in theory, just make an algorithm to create a series of maze-like patterns and just translate them into real life.

Not only that, but I did not realize that real life is composed of multiple algorithms, thus changing my belief that algorithms are not exclusive to only computers. We can translate real-life algorithms into computer code to simulate them, and it is even possible to create art by combining multiple real-life systems into code. So if I want to create a piece of art that combines trees and vegetables, I find it possible to create an algorithm to create trees with vegetables on them.

Assignment 2 – Rainbow Ripples

For this assignment, I had wanted to create something colorful. I began with a gradient of “pixels” whose color was mapped to their x and y location. This was not enough, so I decided to add a ripple effect. The ripples are their own class and are displayed above the pixel background. I made it so the ripples would have their color be the inverse of the color of the background pixels. The ripples appear based on a random interval and at random locations.

I am particularly proud of my creation of a dedicated class for the ripples, as well as the calculation that takes place within them. I ran into some issues with performance as if too many ripples appeared at once, the program would slow down. I did my best to optimize the calculations and remove any redundant math.

display() {
    for (let i = 0; i < pixelGrid.length; i++) {
      let pixelColor = pixelGrid[i];
      let px = (i % gridSizeX) * pixelSize;
      let py = Math.floor(i / gridSizeX) * pixelSize;
      let distance = dist(px, py, this.x, this.y);
      
      if (distance < this.radius) {
        let inverseColor = color(
          255 - red(pixelColor),
          255 - green(pixelColor),
          255 - blue(pixelColor)
        );
        fill(
          inverseColor.levels[0],
          inverseColor.levels[1],
          inverseColor.levels[2],
          this.alpha
        );
        square(px, py, pixelSize);
      }
    }

More work can certainly be done to further optimize the code, as I understand that drawing pixels on top of already existing pixels is slower than simply modifying their color for the ripples.