Category: Spring 2024 – Aya (Section 003)

I find the work that he did the Process 18 project to be very interesting. It’s about the nature of noise or jitters. I think that whether in a controlled or uncontrolled environment, noise particles seem to group together, or in other words, homogenize, and create odd/unique patterns. Reas proves in this project that his noise system gradually became homogenous and over time, the system still kept its homogenous characteristic but added more resolution in time and space. What I wish Reas could do is maybe to add some sort of catalyst to the noise experiment, to see how such a catalyst could impact the way the particles behave over time, mimicking the real environment.

I also find his commission work in creating composited photos for the Frank Gary in Miami Beach as a miniature version of the Disney Concert Hall Los Angeles to be intriguing. Reas and his colleague Rosner used randomness as a jumping off point in tailoring the printed compositions. A lot of decision making was also taken into account to determine how they want the compositions to feel like. One of the details Reas shared behind the process is that the team rolled the dice in putting the images of the neighborhood together wherever they want it to be with a condition that they had to be at 90° angles to trigger the final composition. We talked about how randomness can prove to be a useful tool in coding in class. In Reas’ example, it not only helps him and his colleague come up with exciting artworks but also acquire a firmer grasp of the process while observing the pattern to arrive at the outcome. His work support the fac that randomness and decision making, although seeming to contrast one another, can be a helpful combination for observation in interactive media coding.

Concept:
During last week, I got to listen back to one of my favorite song, “Sativa” by Jhené Aiko from her album “Trip.” I have been obsessed with this song since high school. What really interests me is the cover for the album:

It has graphically designed rings that circularly loop around the square cover. So, I thought I’d apply the concept learned in class to recreate my interpreted version of this album cover.

A highlight of some code I’m particularly proud of:
I’m particularly proud of creating the circular loops of the rings. I learned how to do the circular loop from Daniel Shiffman’s The Coding Train YouTube video here (https://www.youtube.com/watch?v=rO6M5hj0V-o), at around 6:27 where he teaches using the sin and cos in the for loop.

drawingContext.shadowBlur=10;
drawingContext.shadowColor=color('rgb(250,84,0)');

// first loop of rings
for (let m = 0; m < 1440; m += 30) {
noFill()
let x = 50 * sin(m) + 200;
let y = 50 * cos(m) + 200;
stroke('rgb(250,84,0)')
circle(x,y,50)

Embedded sketch:

Reflection:

Creating a loop in a circular motion is rather fascinating to me. I was trying on my own to create the effect, but to no avail. Coincidentally, I was experimenting with creating custom shapes different from the primitive shapes we’ve learned in class while learning p5js on my own. And my research online into how to do so led me to come across Daniel Shiffman’s video that taught me how to create custom shape and create a circular loop.

I had fun creating all the loops and the circles. I played around with the input for the function within the loop to create the effect. Since I have multiple loops of rings for the assignment, I have to use multiple loops.

To emulate the colors from the album cover, I also looked up how to add the glow effect to an object in p5js and came across a video by Kazuki Umeda at https://www.youtube.com/watch?v=iIWH3IUYHzM. I added two functions for the effect, namely “drawingContext.shadowBlur” and “drawingContext.shadowColor=color”.

And for the girl in the center, it’s just an uploaded transparent png file. But in order to know how to insert an image, I also look up a p5js reference created by claesjohnson https://editor.p5js.org/claesjohnson/sketches/f0huO1Y4h.

Ideas for future work or improvements:

• The codes for the loops right now are rather repetitive, so I’m trying to figure out how to clean them up, maybe into another “while” or “for” loop.
• I wanted to add a radial gradient background and use the white color for the looped rings instead but I didn’t know how to do so, so this is another idea for improvement.
• I also wanted to experiment with a shape that looks like a parabol instead of the primitive circle.

You might wonder why the title of this art piece is “Samsung.” Yes, it is the name of the popular electronics company in South Korea. Actually, “Samsung” in Korean translates to “three stars.” Just a fun fact: I am a huge fan of Samsung Electronics. All of the electronics, including smartphones, tablets, smartwatches, earphones, and laptops that I use, are from Samsung 🙂

I really like the shape of the star, so my initial goal was to use the star shape in some way to create art. Initially, I used lines with a ‘for’ loop to create the star shape. However, I later changed my mind to use lines in the background and triangles instead for the star. Afterwards, I wanted to add animation to my art piece. I wanted my background to change somehow. My initial idea was to create a gradation of lines in the background moving from top to bottom, but I could not figure out how to do that, so I changed my plan to make the background color change to white.

To make that idea come true, I made an animation using two white lines moving toward the center. Then, I moved the background color to the setup so that the background color would not change to black again while the white lines were moving towards the center. Using the ‘if’ function, I coded the background color to change to black again if the lines reached the center, so that all of the setups could be reset. This part of my code became the proudest work for this assignment.

//background animation
stroke('white')
x1 = x1 + 1
line(x1, y1, x1-400, height)
if (x1 > width) {
x1 = 0
background('black')
}

stroke('white')
x2 = x2 - 1
line(x2, y2, x2+400, 0)
if (x2 < 0) {
x2 = 400
background('black')
}

stroke('white')
//white lines in the background
for(let x = centerX - 200; x < centerX + 200; x += 5) {
line(centerX, centerY-200, x, height)
}
for(let x = centerX - 200; x < centerX + 200; x += 5) {
line(centerX, centerY+200, x, 0)
}

While I liked the outcome, when I saw the empty space on both the left and right sides of the star, I came up with an idea of creating two more little stars which would have black colors, so that they would appear while the background color changes to white. While the background is black, they are not seen.

I really like the work I have done, but for further improvements, I would like to try to achieve my initial goal of making the background using line gradation.

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.

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.

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.

 

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.

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.

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.

My inspiration came from ProgrammInformation21_PI21 particularly pages 14 and 15. I was impressed by the work of art that was created from lines and hence in my art, I tried to use lines. Along with lines, the concept of my work is black and white. When the user is not clicking on the mouse, the background remains black and the lines white which makes the black bouncing balls visible around the area where lines are drawn. When the mouse is clicked, the background turns white, the lines black, and the bouncing balls white which makes the bouncing balls visible around the area where lines are drawn. However, due to the transparency of the background, the paths of the ball remain visible throughout the interaction. By using black and white, I wanted to hide and show the bouncing balls.

The section of code below shows the ‘if/else’ and ‘for’ code that I used to create the work. I used ‘if/else’ command to change the color of the elements during the interaction and ‘for’ command to draw the repeated lines. I incorporated the ‘mouseIsPressed’ code to make the art interactive and more entertaining for the users.

For improvement, I would like to try using different colors other than black and white. Furthermore, I would like to make the balls change to different colors whenever they bounce off a wall. I tried to do this by using ‘random’ but wasn’t able to do it successfully. Also, adding more shapes is another way I could improve this work. By doing so, the users may see more various shapes under the areas of lines.

//change color of background 
if (mouseIsPressed){
  background(255,5);
}
else{
  background(0,5);
}


//change color of bouncing balls
if(mouseIsPressed){
  fill(255);
}
else{
fill(0);
}

//bouncing ball 1
noStroke();
ellipse(a, b, 20, 20);
a = a + speedA;
b = b + speedB;

if((a<0) || (a>width)) {
  speedA *=-1;
}

if((b<0) || (b>height)) {
  speedB *=-1;
}

//change color of lines
if (mouseIsPressed){
  stroke('black');
}
else{
  stroke("white");
    }

//lines on the right
for (let x=0; x<=500; x += 9){
 line(x, 0, 400, 500);
}