The talk by Casey was truly enlightening. His opening remarks about artists and designers being the key players in maintaining order in today’s society—after the chaos (the Big Bang) that led to our creation—really struck me. The rendered animations had an element of randomness to them, but unlike the art where pieces of paper were dropped onto the floor, or the machine that caught fire (intended to destroy itself), these were post-World War demonstrations by the artist. However, hidden within that seemingly destructive surface was an element of randomness, which is what made it so interesting. Once computing became feasible, algorithmic works like those of Keith Tyson could be visualized and fabricated. Whether it’s the ‘role the dice’ algorithm or something of that sort, I believe art cannot truly exist without interpretive bias, complemented by mistakes and uncertainties. This also reminded me of how some painters splash buckets of paint onto the canvas to sometimes set the foundation for their work.

How are you planning to incorporate random elements into your work?

I’m passionate about creating practical solutions—solutions that not only integrate into existing fields but also introduce entirely new possibilities. The word ‘random’ itself is open to interpretation, but in my view, it’s a mix of an artist’s little inattentiveness and human uncertainties. Like I did in this week’s assignment, where I used random color selection, I plan to incorporate different mapping functions that produce unexpected results. It’s true that the internal ‘random’ function built into most programming languages isn’t entirely random, but the influence of the programmer’s choices still adds a layer of uncertainty. Much like Casey, I want the numerical models that form the foundation of my program and its elements to remain random and stay that way. In life, randomness doesn’t equate to mess—it’s simply how things work. The animation Game of Life also visualizes this phenomenon. So, my plan is to innovate artistically while still maintaining a degree of control, such as setting certain parameters.

Where do you feel is the optimum balance between total randomness and complete control?

I believe the balance is subjective and depends on the context. For works that involve transformation and less precision, it’s often better to let things spin out of control. The variation not only eliminates some of the artist’s personal bias, but it also allows for new ideas and inspirations to emerge when the art ‘flows.’ That said, there are also scenarios where the information being used is constrained to specific parameters, and in these cases, the balance depends on the context and how much ‘variance’ is considered acceptable.

Concept

This sketch explores the interaction between two screen squares, incorporating movement and “emotional” behavior. The squares are initially placed randomly on the canvas, and they shrink and change color when they overlap, representing a form of “embarrassment.” The goal is to create a simple yet dynamic visual experience where the squares react to user interaction (mouse clicks) and their proximity. When clicked, the squares move toward the mouse position, and if they get too close, they start shrinking and changing color. This sketch is an experiment with combining basic geometric shapes and dynamic behavior in p5.js.

Code Highlight

One section of code I’m particularly proud of is the implementation of the shrink-and-color-change behavior. Here’s the part where the squares react when they “feel embarrassed”:

// Check for "embarrassment" (if squares overlap)
let distance = dist(square1.x, square1.y, square2.x, square2.y);
if (distance < (square1.size / 2 + square2.size / 2)) {
  square1.shrink = true;
  square2.shrink = true;
}

// If embarrassed, shrink and change color
if (square1.shrink) {
  square1.size -= 0.5;
  square1.color = color(random(255), random(255), random(255)); // Random color
  if (square1.size < 10) {
    square1.shrink = false; // Start over
    square1.size = 50; // Reset size
  }
}

if (square2.shrink) {
  square2.size -= 0.5;
  square2.color = color(random(255), random(255), random(255)); // Random color
  if (square2.size < 10) {
    square2.shrink = false; // Start over
    square2.size = 50; // Reset size
  }
}

Reflection and Future Work

This project started with a simple concept of square interaction, but it quickly became more dynamic by adding emotional “reactions” like shrinking and changing color. The interaction of movement toward the mouse creates an element of control, while the “embarrassment” response adds unpredictability.

For future improvements, I’d consider the following:

1. Adding sound effects to accompany the “embarrassment” reaction, like a shriek or a sound that corresponds with the color change. This would enhance the multisensory aspect of the experience.
2. More complex behaviors: Perhaps, when the squares get too small, they could “reproduce” into smaller squares, creating a chain reaction, or they could break apart into multiple pieces.
3. Interactivity: Instead of just reacting to the mouse, I could add additional interaction methods, such as keyboard inputs or random events that change the behavior of the squares.
4. Visual effects: Adding gradient colors or animations when the squares change could make the transition smoother and more visually engaging.

This sketch could evolve into a larger concept where geometric shapes and their “emotions” become central to the user interaction, possibly forming the foundation of a game or interactive artwork.

One thing that stood out to me from the video was how randomness can be used to generate complexity. Casey talked about how simple rules together with random elements, can give results that feel natural and unexpected. I personally like using randomness in my work because it makes things feel more natural, rather than too structured or predictable. I also found it  interesting how randomness isn’t just about making things look chaotic—it actually reflects real-life patterns from the biological to the mathematical world. Just like in nature, nothing is perfectly placed, and randomness can help simulate that. However, I believe it is best to allow randomness to do its thing in artwork but while still maintaining some control over the whole structure to some extent. Having control or knowledge over art makes me feel more connected to the final structure.  If everything is completely random, it can feel messy, but if there’s no randomness at all, it feels artificial. I choose to settle for balance between the two . A great example Casey mentioned was a piece that incorporated randomness but became more structured when symmetry was introduced. This showed how even a small amount of control can bring order to something that initially seems chaotic. 

Another point that resonated with me was on the use of random numbers in art. He mentioned how random numbers can serve as a tool to introduce variation, but they also rely on a system of rules to guide the outcome. Without some guiding principles, the randomness would lose its purpose. I think this aligns with my approach to using randomness in my work—it’s not just about throwing chaos into the mix, but about using it in a controlled way to show creativity while still achieving a somewhat desired result. In my week two project, I was able to maintain order for the most part of the artwork, while also adding randomness in aspects like the color choices.

How are you planning to incorporate random elements into your work?

I really like how I incorporated randomness into my own work. I feel like making my art project have random color and shapes makes it more visually appealing and it makes it look more vibrant. In my lighthouse project, I integrated random stroke weights and colors in the background to represent how light dynamically illuminates the beach. This randomness supports the theme, but too much in my opinion could make the artwork unclear. While randomness adds energy, some structure is needed to keep the message strong or else it becomes too overwhelming.  

Where do you feel is the optimum balance between total randomness and complete control?

The best balance between randomness and control depends on how much structure is needed to keep the artwork clear while still feeling dynamic. In my lighthouse piece, I use random stroke weights and colors to show how light spreads, but I keep the lighthouse itself structured to maintain focus. Too much randomness would make the image chaotic, while too much control would make it feel lifeless. Casey Reas’ Eyeo talk supports this idea, explaining that rigid systems become static, while too much chaos loses meaning. For me, the key is using randomness in a way that adds energy without taking away from the main idea.

Introduction:

I grew up in this small city that was known for two things: first, the streets that crossed in a way you could see an 8-pointed star, kinda like the British flag, if you looked from above. And second, the whole textile vibe—it was everywhere. Factories on top of factories, markets packed with all kinds of clothes. Most of it got shipped off to Europe and other places. The city itself had some pretty wild sights, but honestly, what always caught my attention were the machines in the factories. The speed and precision with which they wove and embroidered stuff was mind-blowing—a real testament to what humans can do. I was reading the August 1977 issue of Computer Graphics and Art, and on page 27, it talks about using computer graphics in textiles, which totally reminded me of my hometown.

I figured, why look elsewhere when I could dive into something that’s always been close to my heart and totally fascinates me: weaving. Since I was already familiar with coding, I just jumped right into it! At first, I thought I’d weave in a simple horizontal pattern, but then I realized that’s pretty common in real life. So, I switched it up and went for a diagonal pattern instead. To make it more fun, I decided to mimic how the machines move, like the back-and-forth zig-zag motion, and coded that in.

example of weaving done.

Concept:

At first, I thought about using loops like while loops and counter-controlled loops to get started. But then I realized just printing the stitches or weaves straight into the animation wouldn’t really show the ‘time’ and ‘effort’ that goes into the manufacturing process. So, I decided to go with the zig-zag diagonal pattern instead.

Implementation Stage:

While implementing the code, straight away from the thought process didn’t go as planned.

At first, I wanted to keep things simple and sketch smaller stitches, but every time the nested loop ran, the program would crash. So, I switched things up and used the ‘draw()’ function. Since the if and while loops are pretty similar (both have a pre-condition check), I used an if loop like a while loop, and that did the trick! I really wanted to use loops, but considering the limits of Chrome’s rendering power and the design needs, I had to either abandon the idea or find a way to make it work. So, I went for the second option. Then came the fun part—making the flow of the ellipses move up and down. For the diagonal effect, I used the linear equation y = mx + c to create a gradient that would rise and fall with each increase or decrease in the x-axis. To get the right gradient of 3 (+ and -), I adjusted the y_pos by 6 (+ and -), and for every change on the y-axis, I grouped it with a horizontal shift of 2. So, 6/2 or -6/2 would give me -3 or +3.

Code I am proud of:

The coding in general wasn’t difficult, but something that makes me proud is the ‘on’ and ‘off’ stage the ‘weave_direction’ variable had which worked like a switch.

// starting coordinates of ellipse/printhead;

let weave_direction=0; // direction switch
// 0 -> machine weaves downwards
// 1 -> machine weaves upwards

function setup(){
 
}

function draw(){
 
      
      if (weave_direction === 0){
        fill (r,g,b);
        ellipse (x_pos, y_pos, 5, 5);
        x_pos +=2; // line gradient of -3
        y_pos +=6;
        if ((y_pos >= height) || (x_pos >= width)){
          weave_direction =1;
          x_pos = x_pos + 10; // horizontal gap between the streaks.
        } 
      } else if (weave_direction === 1){
        fill (r,g,b);
        ellipse (x_pos, y_pos, 5, 5);
        x_pos -=2; // line gradient of +3
        y_pos -=6;
        if ((x_pos <= 0) || (y_pos <= 0)){
          weave_direction =0;
          x_pos = x_pos + 10; // horizontal gap between the streaks.
        }
      } // for weaving downwards or else upwards diagonally.
        
      
    

How to use the Program:

Click once to start the ‘stitching machine’, keep pressing to change the color to your liking.This Program in its in spirit is designed towards actual realization of effort that goes into the process.

Embedded Sketch:

Reflections and ideas for Future Improvements:

I’m planning to let users click on the screen to mark points that can be ‘mapped’ and used later to fill in color (the same as the background), which will create the effect of the user drawing onto the stitches. I also tried to keep the code as short as possible while still keeping the logic intact, but down the line, I want to use OOP to make it more dynamic. That way, users will be able to change colors and coordinates after the initial creation.

Sample Art Made:

Concept:

For my art project, I wanted to try and incorporate some of the material we learnt from the previous assignment. So I tried to make an art project where a part of it is moving randomly and has random color, while the rest of it is still. I implemented this using for and while loops for the most of it.

When I started looking for inspirations, I tried to think of something that I like. So in the end I decided on doing a simple lighthouse because i like the beach:

Although I had a picture for inspiration I tried to make my drawing more vibrant and colorful to represent how the lighthouse lights up the whole beach:

Code highlight:

I used for loops to create the outlines for the red and white stripes in the lighthouse, where the arc decreases per a specific distance. And when it came to the lines in the background, i made the code so that it chooses a random color and strokeWeight from a specific range. I tried to make that using a while loop so that the background does not become overwhelming and continue forever, so i set it to run till a maximum frame.

if (currentFrames < maxFrames) {
    // draws lines while under maxFrames
    let i = 0;
    while (i < 5) {
      // random color with transparency
      stroke(random(150, 255), random(150, 255), random(150, 255), 150);
      strokeWeight(random(1, 3));

      let x1 = random(width);
      let y1 = random(height);
      let x2 = random(width);
      let y2 = random(height);

      line(x1, y1, x2, y2); // draw a random line

      i++; // increment loop counter
    }
    currentFrames++;
  } else {
    background(180, 220, 255); // reset the canvas
    currentFrames = 0; // restart the frame counter
  }

Reflection and future improvement:

At first I tried to make the waves move but I couldn’t figure out how to make it have that illusion of it going back and forth so instead I decided to keep it and make the whole painting more vibrant by making the outlines of all the shapes have random colors as well.