Month: February 2024

At the start of the video, when Casey Reas said that chaos was thought to exist before creation and order was thought to be brought by god or gods, I found his statement very interesting. I was thinking of the fact that artworks focused on the beauty of structured, rational, and ordered things for centuries before randomness, chaos, and unplanned things started to be the themes of the artworks. Then, I realized that randomness, chaos, and unplanned things started to be the themes of artworks after the age of the god-centered community slowly lost its focus on ‘god’ and ‘gods,’ while the focus on ‘science’ increased. This fact made me think that perhaps the reason for the focus on structured and ordered things might be related to the god-centered focus of that time. Here, I felt like the reason why unstructured things were not the theme of artworks was that they were not considered worth drawing, as ordered things – thought to be of god – were considered beautiful. And this made me think that, in a sense, the artwork reflects society’s beliefs.

The video made me realize that chance operation essentially involves adding a touch of randomness to the set of rules governing the generation of colors, shapes, or patterns. When I think of programming, I always associate it with a rational process of structured and ordered code, as it requires precise and logical input of rules to be executed. Using programming—which is typically associated with structured and ordered things—as a medium for creating seemingly unstructured artwork was particularly fascinating. I think the beauty of chance operation lies in creating something seemingly unstructured and irrational through a structured and ordered medium. Moreover, I think the best term to describe chance operation is ‘planned randomness.’ While watching the video, I understood that this process of making artwork is not based on blind randomness, where everything is unknown and based purely on luck. Instead, it is a type of planned randomness, carefully calculated and determined, offering several choices, yet the output remains unpredictable.

After learning about the chance operation through the video, I perceived it as a method of creating artwork in collaboration with the computer. Adding a touch of ‘randomness’ to ordered codes felt like giving the computer free will to choose what to draw independently. By incorporating randomness into the process, the artist and the computer engage in a unique collaboration. I found this aspect very intriguing, as the computer, typically seen as a tool for precise and predictable outcomes, becomes an active participant in the creative process. It was like giving the machine a degree of ‘creative freedom’ within the boundaries set by the artist.

Concept

In this assignment, I used for loops, if-statements, and some basic functions to depict the busy and vibrant nightlife of a city and starry night. I wanted to express something that cannot coexist yet imaginable. Then I thought of a starry night in the city, Sometimes, even a single star is hard to find in the city, because of the brightness of a vibrant city.

First of all, for the starry night background, I was inspired by the photo attached below which was taken by Ryan Hutton. When I first saw this image I was amazed at the tons of stars in different sizes that were twinking in the sky. So, in my artwork, which is also attached below, I decided to depict tons of twinkling stars in different sizes too.

The Photo Taken by Ryan Hutton that I Was Inspired by

The Output

For the depiction of a city in the foreground, I do not have a specific image that I was inspired by. I just wanted to express the “busy city” by changing the light color of the windows continually. I have let the color of the windows change randomly between 4 neon colors. The reason why I chose to let the window change by 4 neon colors was that I wanted to express vibrance through the neon colors.

Highlight of Code

I am particularly proud of the code attached below. This section of the code is responsible for the generation of the stars. As shown in the snippet of the code, I have utilized for loops to create the stars. The for loop iterates 50 times to create 50 stars at random positions on the canvas with random sizes. I am particularly proud of this code because of the way I have coded it to give the “twinkling effect”. I was contemplating of a way to give a twinkling effect to the stars by giving the fade-out effect. Then, I realized that I could perhaps adjust the transparency of the background to give that twinkling effect. By letting the stars drawn previously fade out progressively as the backgrounds with adjusted transparency overlap, I have achieved the twinkling effect that I wanted. I was just so proud of myself for coming up with this idea of adjusting the transparency of the background to make the stars twinkle.

function draw() {
  background(0, 25); //transparency for the "twinkling" effect

  for (let i = 0;
    i < 50;
    i++ //50 == number of stars to be generated
  ) {
    let starX = random(0, width); // randomizing x position of the generated star
    let starY = random(0, height); // randomizing y position of the generated star
    let star_size = random(1, 3); //randomizing size of the generated star
    stroke(255);
    strokeWeight(star_size);
    point(starX, starY);
  }

Reflection and Ideas for Future Work

Overall I am very satisfied with the output of my codes. I honestly found my artwork visually pleasing. While some parts of the codes, such as the creation of the windows, were challenging. I genuinely enjoyed doing this assignment. I think I could further improve my artwork in several ways. For example, I could add some animation of buildings moving up and down to further express the “busy and vibrant city”. Also, I could add more complex shapes of buildings. Next time, I think I would also add some interactions, such as buildings changing when the mouse is pressed, to make my artwork more interesting.

The concept for this piece was inspired by the kids toy, “Sensory Liquid Floor” which creates a nice colorful aesthetic. The same concept was applied on the canvas making the mouse be the “kid” and when moving, the mouse acts as if there is movement on the floor, changing the color of the screen to the background color. Another function a “mouse pressed” function that changes the color of the screen to the background color when the mouse is pressed.

Figure 1 – Liquid Floor Toy: 

Move the mouse around! Mouse click!

The first notable layer was a grid made of squares just as figure 2 shows. Then, a colorful gradient background with rainbow highlights that was painstakingly created using color interpolation to guarantee a fluid, flawless movement across the spectrum. Then, each square was programmed to react to the mouse cursor’s proximity, giving the piece its interactive quality. The vibrant colors beneath the squares were gradually revealed as the cursor traveled over them; the color blending and visibility were expertly calibrated to produce a fluid, organic interaction. The hard edges of the grid were softened, which improved the harmony of the squares against the background. The strokes of the squares were matched with the rainbow background to give it a smooth look and also hide the grid that was created using the loops. By doing this, the piece looked more interactive as the user is now able to move the mouse around and see colors appear without seeing the color of the whole background or the grid itself.

Figure 2:

I am proud of two parts of my code. The first part being:

// Calculate grid cell of current mouse position
    let hoverX = Math.floor(mouseX / spacing) * spacing;
    let hoverY = Math.floor(mouseY / spacing) * spacing;

    // Loop through grid of squares
    for (let x = 0; x <= width; x += spacing) {
      for (let y = 0; y <= height; y += spacing) {
        // Calculate distance from current square to mouse square
        let distance = max(abs(hoverX - x), abs(hoverY - y)) / spacing;

        // Decide transparency based on distance from mouse
        if (distance === 0) {
          // Directly under mouse
          noFill();
        } else if (distance === 1) {
          // Immediately adjacent to the selected square
          fill(255, 128);
        } else if (distance === 2) {
          // Set of squares after adjacent ones
          fill(255, 192);
        } else {
          // Squares further away are completely white.
          fill(255);
        }

This part of the code is responsible for creating an interactive grid where the color and transparency of each square dynamically respond to the position of the mouse cursor. The purpose is to provide a visual representation of proximity, with the nearest square to the cursor revealing the background color and the surrounding squares fading out based on their distance from the cursor. First, hoverX and hoverY variables are calculated by dividing the mouse’s x and y coordinates (mouseX and mouseY) by the spacing between the squares, using Math.floor to round down to the nearest whole number, then multiplying by spacing again. This snaps the mouse position to the nearest top-left corner of the grid squares, effectively determining which square the mouse is hovering over. Two nested loops run through each square in the grid. The outer loop (x) runs across the width of the canvas, and the inner loop (y) runs down the height of the canvas. The loops use spacing to step from one square to the next. For each square, the code calculates its distance from the square the mouse is over (hoverX, hoverY). This is done by finding the maximum of the absolute differences in x and y coordinates (max(abs(hoverX – x), abs(hoverY – y)) and dividing by spacing to get the distance in terms of squares, not pixels.

The second part was the function that created the rainbow background:

// Function to draw rainbow background
function drawRainbowBackground() {
  noFill(); 
  // Loop through the width of canvas to create gradient effect
  for (let i = 0; i < width; i++) {
    // Map position to range between 0 and 1 for color interpolation
    let inter = map(i, 0, width, 0, 1);
    // Interpolate between two colors based on current position
    let c = lerpColor(color(255, 0, 0), color(0, 0, 255), inter);
    // Set stroke color for line
    stroke(c);
    // Draw vertical line at position 'i' spanning height of canvas
    line(i, 0, i, height);
  }
}

This part of the code is responsible for creating a visually appealing rainbow gradient background across the canvas. The gradient smoothly transitions between two colors horizontally, providing a vibrant backdrop for the interactive squares. First, ‘for (let i = 0; i <width; i++)’ is a loop that runs once for every pixel along the canvas’s width. ‘i’ represents the current x-coordinate. It starts at 0 and increases by 1 until it reaches the canvas’s width, ensuring that the gradient effect spans the entire horizontal width of the canvas. Then, ‘let inter = map(i, 0, width, 0, 1)’ re-maps the x-coordinate (i) from the range of 0 to width (the canvas’s width) to a new range of 0 to 1. Finally, let c = lerpColor(color(255, 0, 0), color(0, 0, 255), inter) blends two colors together. Here, it’s used to create a transition between red and blue.

When we talk about chaos, we often mention computers, wars, or art. We see a lot of chaos in our lives happening but we never notice it. Chaos usually should be random, unexpected, and sometimes even destructive. Some of the art seen in the video show complete chaos and random movements that would lead the public to say: “I can do that”. They theoretically can recreate this simple random piece, but in reality, chaos cannot be re-experienced or regenerated. No matter the tries we won’t get the same art piece; there will be always details that only chaos created.

What we forget when talking about chaos and randomness is that they both are actually not random. Chaos and randomness are both very structured and calculated. For example, when playing the game Minecraft, the game creates a “random” map for each player, while still looking as if everything is connected and makes sense. And it is actually both, it’s pure randomness that was structured in a way to be random using particular math equations to randomize everything in an interconnected way. And we saw that also in some of the artwork generated that looked like pure random shapes, but it was just a class of lines that moved in a specific way away from each other, using math, that after a certain time, they generated that “random” pattern. Chaos was never random, and random was never random, but we always have control over how much chaos we want, in what direction, and how much.

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);
}

My concept

The concept for my artwork came from an experiment in which I created different shapes by generating random codes. The primary goal of this technique was to discover the possible outputs of coding without having a predetermined goal, therefore it was informal and exploratory. The speech by Casey Reas “Eyeo2012” talked about the need to discover novel ideas without overanalyzing, this served as my motivation.

The series’ first drawing is intended to represent a maze. It is a metaphor for the hardships that come with life, suggesting that despite obstacles and complex paths, perseverance will ultimately lead to the finding of the right route. The journey through life’s complexity and the eventual triumph in finding direction is intended to be represented by this sketch.

The second sketch, however, shows a substantial change. It shows the maze’s walls falling down to reveal an open, direct, and clear path. This exemplifies overcoming the difficulties and barriers encountered earlier. This drawing is meant to evoke feelings of freedom and clarity, representing those times in life when challenges are overcome and the path ahead becomes easy and uncomplicated.

Embedded sketch

Code that you’re particularly proud of

strokeWeight(1); // Sets the thickness of the lines
  frameRate(3); // 
}

function draw() {
  background("lightblue"); // background color for each frame

  // Nested loops to iterate over each cell in the grid
  for (let x = 0; x < width; x += size) {
    for (let y = 0; y < height; y += size) {
      let E = random(9); // Generates a random number between 0 and 9

      if (E < 1) {
        // Draws a line from top left to bottom right of the cell
        // line(x, y, E + size, y + size);
      } else {
        // Draws a line from top right to bottom left of the cell
        line(x, y + E, x + size, x);
      }
    }
  }
}

Ideas for future work or improvements

Ideas for the future that I would want to implement are some kind of visual effect. Effects that make you dizzy and hypnotize you. I think that would be very cool.

My eyes were awakened to the ways in which art and technology collide when I watched Casey Reas’s presentation at Eyeo2012. The way that Reas discusses randomness in digital art is very innovative and fascinating.

It occurred to me that, because humans are accustomed to following rules and procedures, computers are able to produce patterns and randomness in ways that humans simply cannot. This entire concept gets me thinking about how our society is set up; everything is really rigid and organized.

Reas’s words, “Make your own reality, your own world,” truly resonated with me. We all need to hear that, in my opinion, especially in this day and age. Reas suggests that in order to break up the monotony and repetition of life, we need unpredictability.

I consider myself a very rigid person and in recent years I’ve found out that some randomness and flow in life is necessary and it makes you live happier and less worried.

Moreover, this reading made me reflect on this question: do gods create order out of chaos? It is, after all, a large topic that connects to the idea of having a balance between order and randomness in all that we do, not just in art.