Month: September 2025

In his talk, Casey Reas explores how generative art uses code, rules, and chance operations to create dynamic and unpredictable visuals, showing that creativity comes from both structure and chance. I found it particularly interesting when Reas explained that generative art is a space where structured rules interact with randomness, because when people generally think of coding, they assume there’s always a “right” way to do it, but I don’t necessarily think that’s true. I agree with Reas on this point about how chaos and order thrive together in generative art. But at first, I was one of the people who thought coding was strict and bound by certain rules to follow,  now I see that it can be more playful and freeing.

When I was coding my artwork assignment, I decided to add randomized colors to my code to make it more exciting every time I run the code. The outcome always comes out as different and unique from the one before it, and I enjoyed the unpredictability of it. At the same time, I wonder if too much randomness could take away from the artist’s control. Reas seems to always see randomness in a positive way, but I’m not sure I fully agree with that. Personally, I think it works best when theres a balance, where the structure I write in the code guides the randomness so that the results are still under my control to some extent.

prompt: How are you planning to incorporate random elements into your work? Where do you feel is the optimum balance between total randomness and complete control?

I watched the video after I completed the coding assignment. Surprisingly, some of the idea from the presenter coincide with thoughts that crossed my mind during creation.

First, the presenter argued that the emergence of randomness in computers renders new life to creation of art. I agreed strongly as computers are already good at repeating simple patterns and this usually leads to stunning effect as it appeared in the presenters’ examples, however, to create certain chaotic element in the art piece, using randomness that is achieved through built-in functions in computers shred new light on adding vividness into the artwork. For example, patterns could appear in different directions, different styles, and for each time the key is pressed, something new appears.

Second, I also agree with the presenter’s idea of having something simple to govern the art piece is essential and I believe this is the best balance between total randomness and complete control. In particular, computers need certain elements, as simple as a line, to work with and then randomness should be added to on top of this repeated patterns. If we let randomness totally governs the art piece, it would lead to a complete chaotic situation in which no aesthetics could be observed.

When given the chance to create geometric art, my mind immediately went back to a tradition from my childhood. Since I was ten years old, every Diwali, my family and I would gather outside our home to make rangoli: a colorful pattern made on the floor with powders, flowers, or rice. Diwali, the festival of lights, is celebrated in India with lamps, sweets, and vibrant designs meant to welcome prosperity and joy into the home. For me, rangoli has always been a way to blend creativity with culture. Alongside this, I also grew up enjoying drawing mandalas, which share the same symmetrical and intricate qualities. Together, these influences shaped my concept.  A digital reinterpretation of rangoli through geometric art.

For the scope of this assignment, I decided to use two shapes: circles and triangles. The circles form the core of the design, anchoring the artwork, while the triangles create a layered geometric background effect. This simple structure captures both the symmetry of mandalas and the festive layering of rangoli.

Rangoli:

Mandala:

One section of my code that I am particularly proud of is the logic behind alternating triangle shapes. I wanted two different kinds of triangles to appear in an alternating pattern. While drawing a single triangle was straightforward, alternating between two variations required more thought. After experimenting, I realized I could use an ‘if’ condition based on coordinate positions. The logic I arrived at was:

let step = 50;
  for (let x = 0; x < width; x += step) {
    for (let y = 0; y < height; y += step) {
      // pattern A
      if ((x / step + y / step) % 2 == 0) {
        fill("#800000");
        triangle(x, y, x + step, y, x, y + step);
        fill("#000080");
        triangle(x + step, y + step, x + step, y, x, y + step);
      }
      // pattern B
      else {
        fill("#000080");
        triangle(x, y, x + step, y + step, x, y + step);
        fill("#800000");
        triangle(x, y, x + step, y, x + step, y + step);
      }
    }
  }

This simple equation gave me an alternating algorithm, ensuring the triangles switched consistently across the canvas along with their colours.

In the future, I would like the artwork to become more dynamic and closer to an actual rangoli design. I imagine the outer circles slowly rotating, smaller circles filled with different colors, and more intricate shapes combining into floral or star-like motifs. Expanding beyond just circles and triangles would also bring the piece closer to the vibrancy of traditional rangoli while preserving its digital, algorithmic foundation.

This project allowed me to merge childhood memories, cultural traditions, and coding in a way that felt both nostalgic and innovative. Just as rangoli brings people together during Diwali, I hope this digital version shows how art and technology can come together to celebrate tradition in new ways.

At first I thought randomness only mattered in games, from simulating rolling a dice to how Minecraft generates new worlds with caves, mountains, and villages that always look different. I assumed randomness was just for variety in play and had little place in art or design. Watching Casey Reas’ talk completely changed that assumption. I was amazed by the art you can generate using randomness. What struck me most was how a set of simple rules, combined with small unpredictable changes, could create results that felt alive and unique. His examples showed me that randomness is not just a tool for unpredictability but also for discovery, allowing new patterns and visuals to emerge that no one could have planned in advance.

 

Before, I believed coding should always be exact, like solving a math problem where the answer must be correct. Reas showed me that art can be structured yet open-ended, where randomness works as a collaborator rather than an obstacle. Seeing grids of dots or lines shift in slightly unexpected ways made me realize that unpredictability is what gives the piece depth and character. I now think the best balance is to set clear boundaries for the work, such as the palette, the number of elements, or the layout, but then leave space for randomness to control movement, position, or interaction. That way the work keeps its structure but also grows in ways no one could have fully imagined. For me, the optimum balance is when structure provides a stable foundation for the art to not look completely random like scribbles, while randomness adds the spark that makes each result surprising and engaging.

Sketch

My Concept

This week, I wanted to make a simple work of art using for() loops. The piece I made explores how repetition and rhythm can form mesmerizing visual patterns. I started with a simple grid of circles, using nested loops to control the rows and columns as we learned in class. I wanted to make a field of circles that felt alive, so I thought about how I was going to vary their sizes and colors. The sin() function in mathematics is frequently used to model oscillations and waves in nature, so I figured why not map the circles’ diameters to it in some way to shift their sizes in a wavy pattern as they moved across the canvas. As for varying the colors, I made two of the fill() function’s arguments dependent on the coordinates of the circle with each iteration of the loop, while keeping the other arguments constant so the colors don’t contrast too much.

Code Highlight

It was a bit tricky to figure out how exactly I was going to map the sin values to the size of each circle. I ended up defining the variable d as the distance of each circle from the center, and using it as input for sin. Since the range of sin, which is [-1,1], is too small to use as a radius, I used the map() function to to increase its range to [5,15]. Finally, I stored whatever was calculated in the size variable and used that in drawing each ellipse.

let d = dist(x, y, width / 2, height / 2); // distance from center
let size = map(sin(d * 0.05), -1, 1, 5, 15); // wavy circle sizes
ellipse(x, y, size); // draw the circle

This small section controls the shifting “wave” effect, transforming what would otherwise be a flat grid of circles into a dynamic field with depth and rhythm.

Reflection

I was amazed by how powerful loops can be in creating a piece that looks intricate but only requires a few lines of code. My entire draw function fit in 7 lines of code! At first glance, the result seems like something that would take countless steps to draw manually, but by letting the computer repeat instructions, complexity emerges naturally. It taught me to see code not only as instructions for individual shapes but as a way to design systems that generate patterns on their own. Another thing I that was cool is how small changes to the rules, like adjusting the sine function, completely transform the mood of the work.

Using 10 as the coefficient of d

 

Using 0.03 as the coefficient of d

Here’s the final output.
Inspiration:

How “for” and “while” work are often related to the term repetition: by applying these two statements simplify programmers job to program for repetitive scenarios. While at the same time, another keyword in the reading for this week is “random”, so I decided to create a piece that combines the two.

Through first impression, my art work is a rough imitation of the art pieces created by Piet Mondrian(https://artsandculture.google.com/entity/m0crnb5?hl=en). When I first saw them in museums, I was shocked by their simplicity. However, a question rises in my head, if we draw lines and place colors in those grids randomly will they achieve the same visual effect?

Through this interactive creation, in my opinion, it is very hard to achieve same visual effect by just randomly drawing lines on canvases. Only certain ratio of arrangements of lines and certain arrangements of colors create artistic effects.

Highlight of Code:

The complete code could be found on (https://github.com/dr04002/Intro_IM/blob/main/Assignment2/sketch.js). GPT5 is employed in assisting the completion. However, there are few interesting codes.

function makeRandomLines(count, span, margin, minGap) {
  const picks = [];
  let tries = 0, triesLimit = 5000;
  while (picks.length < count && tries < triesLimit) {
    tries++;
    const x = random(margin + LINE_W, span - margin - LINE_W);
    if (picks.every(p => Math.abs(p - x) >= minGap)) picks.push(x);
  }
  picks.sort((a,b)=>a-b);
  return picks;
}

To generate random lines, there are several difficulties:

1. the lines must have the same numbers of the original piece so that it is easier for the transition effect
2. the lines have to stay inbound of the canvas
3. a minimum distance is imposed to ensure lines are not too close to each other

These difficulties are solved through:

1. using parameter count to ensure the same number of lines
2. using random(margin + LINE_W, span – margin – LINE_W) to control the lines’ positions within boundaries
3. picks.every(p => Math.abs(p – x) >= minGap controls the lines distances.

Future improvements:

1. the randomized art piece could have more or less lines than the original piece, but this would make the transition effect way harder
2. the stroke weight could also be randomized to see how different compositions of stroke weights affect the audience

 

Fullscreen sketch

My main concept:

My concept originally came from the Japanese horror anime called “渦巻き（うずまき）”, which literally means a spiral in English. I watched this anime during the last summer vacation back in Japan. At first, I was surprised by how it was even possible for humans to be able to create such peculiar and disturbing animations using only black and white colors and spirals. The animations were too powerful and creative to the point where I almost threw up. However, I really liked how the author incorporated his originality and personality into this anime. I was especially intrigued by the scene where the main character’s girlfriend was infected by a contagious disease where if you get infected, you become obsessed with spirals. One of her eyes started to fall out and twist inward into a spiral.

It was very gross at first when I looked at it, but I really liked the animation there, so I decided to draw it as a simple artwork this time. If you hover over the drawing, you can change the color of spirals into either green, red, or blue. Also, if you click the eye going around, its color changes into red, implying inflamed eyes. Try it out!

Part of code that I particularly like:

The part of my code that I particularly like is this block of code dedicated to producing continuous spiral movement. At first, I had no idea how to make a moving spiral other than using a for loop, sin(), and cos(). Thus, I explored some tutorials on YouTube about how to make spirals. These videos (https://www.youtube.com/watch?v=Z3PvLZYLW0U  and  https://www.youtube.com/watch?v=U_2WwjKEasc) really helped me understand that incrementing angle each time moves x and y coordinates and eventually helps create a static spiral and by adding a change (being incremented each time) to angle each time, you can make it move continuously. I also realized that it was important to distinguish between polar and cartesian coordinates, since cos() and sin() are based upon a unit circle. Furthermore, I learned some new functions called beginShape() and endShape(), both of which are responsible for drawing a line between points. Overall, I struggled a lot to create a moving spiral, but these tutorials really helped me understand new concepts I needed to learn. 

//spiral 
  beginShape(); 
  for (let angle = 0; angle <= TWO_PI * n; angle += angleInc){
    let radius = scaler * angle; //radius
    let x_position = radius * cos(angle + change); //x coordinate
    let y_position = radius * sin(angle + change); //y coordinate 
    change += changeInc; //increment change by changeInc
    vertex(x_position, y_position);
  }
  endShape();

Reflections & Future Improvements:

In terms of reflection, it took me a lot of time to figure out how to make a spiral using for loops and other functions we haven’t yet learned in class. Thus, I had to watch tutorials to learn these new functions and how to apply them. But this assignment helped me learn various concepts and how to integrate them with the concepts that we already learned in class. For future improvements, I would like to make the animation more interactive so that people can actually engage with it. Right now, it only changes the color of the spiral and eyes using your mouse, but I want to add interactive elements, where someone’s face gradually appears inside the spiral to make it creepier. I remember I got shocked when the main character’s father’s face appeared from the middle of the spiral in the anime. I think adding these kinds of elements can engage users by scaring them. Furthermore, I need to improve how I name my variables, because  many of my variables have lengthy names, which makes the code a bit messy.