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.

Assignment #2 – Soulless trails surrounded by optimism

For this assignment, I wanted to make something not so elaborate, but with a bit of randomness. After watching Casey Reas’ Eyeo talk, I find the concept of creating art with random elements interesting. One of the first ideas I had was to create a ball that multiplied each time it hit the wall. Despite wanting to do this, I realize that it would not have been possible due to the fact that I wanted to keep myself limited by the current knowledge taught in class. Yes, as students, we should find more information on how to do things, but in the same philosophy of designing video games, often creativity is found under restrictions.

Therefore, I decided to make something continuous, something that would fill the entire canvas with elements. For this, I particularly added the background code outside the draw() function and put it in the setup(), as I would create the illusion that many figures are being drawn at the same time. After I decided this, I wanted to create a simple algorithm that would dictate what type of ellipse, where, what color, shape and X and Y coordinates it would be. There are many variations to allow for a colorful variety of ellipses to be drawn rapidly on the canvas. Although, despite having most of the homework “finished,” I knew that it would not have been enough.

So, after a bit of thought on how to do it, I decided to add a circle that would bounce after detecting a collision with the canvas boundaries. It is similar to a practice we did in class, but that I could not finish on time due to working a bit slower than the rest of the class. The bouncing circle (or ball) was the trickiest part because I did not want to make something static, but rather entirely random to allow for different generative art.

I only used for() loops for this code as I did not find any use for while(), at least, in what I wanted to do. Also, if you click on the canvas, it will clean and reset everything. Likewise, the ball will always start on random positions, axis and at random speeds.

Particularly, I feel happy because I could figure out how to make the ball bounce every time in hits the walls. Here is the code behind it:

//Bouncing ball.
 fill(0) //The ball in black color, in this canvas, looks the best (at least in my opinion).
 
 //Check if the ball is passing the boundaries. If yes, determine the wall and assign a random X velocity and Y velocity value that keeps the ball inside the canvas.
 if(cx+vx+cw>=0 && cx+vx+cw<=width && cy+vy+cw>=0 && cy+vy+cw<=height){
   print("It works.");
 } else if (cx+vx+cw>=width){
   randomdecision = int(random(0,2))
   if (randomdecision==0){
     boundaryc = 2;
   } else {
     boundaryc = 3;
   }
 } else if (cx+vx+cw<=0){
   randomdecision = int(random(0,2))
   if (randomdecision==0){
     boundaryc = 1;
   } else {
     boundaryc = 4;
   }
 } else if (cy+vy+cw<=0){
   randomdecision = int(random(0,2))
   if (randomdecision==0){
     boundaryc = 1;
   } else {
     boundaryc = 3;
   }
 } else if (cy+vy+cw>=height){
   randomdecision = int(random(0,2))
   if (randomdecision==0){
     boundaryc = 2;
   } else {
     boundaryc = 4;
   }
 }
 
 //Once the wall is detected, and a decision is made as to which direction it should go, the ball will bounce according to the side, and will be randomly assigned an X and Y velocity.
 if (boundaryc == 1){
   vx+=random(1,5);
   vy+=random(1,5);
   
 } else if (boundaryc == 2){
   vx-=random(1,10);
   vy-=random(1,10);
   
 } else if (boundaryc == 3){
   vx-=random(1,10);
   vy+=random(1,10);
   
 } else if (boundaryc == 4){
   vx+=random(1,10);
   vy-=random(1,10);
 }
   
 circle(cx+vx,cy+vy,cw) //Once all the randomness is applied, the circle is drawn following the established rules.

This task, at least personally, was not that challenging, although I felt I could do more. For future projects, I would like for my art to have a system that allows creating certain patterns randomly.

Reading Reflection: Week 2

The video made me realize how nature and code (or technology in a broader sense) can go together to create a work of art. Casey Reas gave several examples of using nature in technology to produce something that is unexpected or unusual.

The example of using sound to create an interactive art was eye opening. Depending on the sound or noise, the elements of the artwork moved in response. The artwork itself was, to my surprise, aesthetically pleasing and entertaining to look at.

Another example that caught my attention was the artwork that illustrated tissue cells. This artwork made me rethink about ways technology and coding can work with nature to produce art. I’ve always thought of coding as irrelevant to nature. However, with the examples and explanations Casey Reas gave, I was able to learn that the two concepts are not necessarily separate. When technology and nature work together, a great product of art can be obtained. Nature can be expressed and illustrated through media and it was interesting to look at works of creators that creatively incorporated nature into their works.

To move on, a concept that was mentioned various times during the video is randomness. While there are order and structure in coding, randomness adds a different taste and texture to the work.  However, I was brought up to the question “is randomness always good?” as I finished watching the video. The unexpectedness that comes from randomness may be delightful, but I sometimes feel like it’s better to have structure and order to enhance the users’ understanding and experience.

Assignment 2: Reading Response to Casey Reas’ Eyeo Talk on Chance Operations

Looking through the catalogs of the works, it seems that the depicted motion seems to become more randomized as it progresses, illustrating more chaos in these works. Specifically the description of element 5 piqued my interest. The way in which it starts in ordered fashion but from step B7 it starts deviate from original path, therefore initiating disorder. This made me think about the ultimate process of chaos to order and vice versa. The way in which chaos changes to order is based on the degree of randomness within the set behavior. From a programming perspective, I believe this reemphasizes the importance of non-deterministic attribute of functions. In a usual sense, one would desire controlled environment, but non-deterministic functions, for instance in sql server returns necessary outputs although having a certain degree of randomness.

There have been many works demonstrated in the video that seemed to show patterns and sequences, previously hidden for individual randomized elements, when in a large interconnected body. In a sense, it can be inferred that order cannot come from individuality but from groups. The intricate interplay between chaos and order in these artistic representations prompts reflection on the broader dynamics of systems, emphasizing the emergent properties that materialize when diverse elements interact within a unified framework.

Assignment – 2: Optical illusion

For this assignment, I have decided to use for loops to make a type of black and white optical illusion. I used one global variable to animate both the lines and the circles. Calculating the rotations using the angles were bit difficult at first. Furthermore, used map method for each lines and circles to change the position of the points and the color hues respectively. Particular section that I am proud of is computing the x and y positions of the line using cos and sin to move the lines.

For further improvement, adding user interaction based on mouse clicking or mouse position could be a viable direction. Moreover, randomizing the user interaction to a certain extent is an area that I am trying to improve.

let angle = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);

  let circles = 10;
  let diameter = width / 2 + cos(angle) * 50; 

  for (let i = 0; i < circles; i++) {
    let gray = map(i, 0, circles - 1, 0, 255);
    fill(gray);

    ellipse(width / 2, height / 2, diameter, diameter);
    diameter -= 20;
  }

  drawLines();

  angle += 0.04;
}

function drawLines() {
  let numLines = 12;
  let lineLength = 200;

  for (let i = 0; i < numLines; i++) {
    let rotatingAngle = map(i, 0, numLines, 0, TWO_PI);
    let x1 = width / 2 + cos(rotatingAngle + angle) * (width /6 );
    let y1 = height / 2 + sin(rotatingAngle + angle) * (width /6);
    let x2 = x1 + cos(rotatingAngle) * lineLength;
    let y2 = y1 + sin(rotatingAngle) * lineLength;

    stroke(255);
    strokeWeight(2);
    line(x1, y1, x2, y2);
  }
}