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. 

Reflection

Throughout my artistic journey, I have learned about the many rules of composition and other elements when it comes to creating an artwork, especially in certain genres. However, more and more artists continue to break these rules, leading to the creation of new genres and pieces of profound meaning and reflection. For this reason, what stood out the most to me was the introduction of  “randomness” to the coding used for the works displayed, such as in the example of the cells where the use of randomness determined what the position and scale of the clusters would be, breaking the order and rules, but at the same time complimenting said order. 

Nonetheless, in my eyes this randomness is a more subtle way of describing chaos. Chaos, the opposite of order, has always been a fascinating concept to me. How it disrupts what brings comfort and despite its unpredictability, its beauty emerges from what encourages artists to twist the horizon of expectations for viewers, offering new perspectives to “cliche” subject matter.   Although I wasn’t foreign to any of these concepts, it was surprising to see them being introduced to systems and codes to produce the works shown. Before this video I always thought that coding relied mostly on the order, the simplicity, the structure, and precision of all the elements presented. This makes me want to explore more of this “randomness” in hope of applying the unpredictable on my codes as I do with my traditional artworks.

Inspiration: Sound Waves and Chaos

When I first heard the word loops, the first thing that came to mind was sound waves. I imagined smooth, rhythmic waves moving across the canvas, like music frozen in space. I even found a little example of what I hoped to create, but my coding skills weren’t quite ready to match the vision.

 Scrolling through Instagram one day, I stumbled on an image that sparked a new idea. I thought: what if I could combine sound waves with the chaotic little voice in your head when you overthink?  

Concept Development: From Chaos to Calm

The top right of my canvas is extremely chaotic; dense, loud, overwhelming, but as the lines move toward the bottom left, they thin out and eventually fade into empty space. This represents the calm that comes when that inner chatter finally quiets.

This idea lets me visualize the process of overthinking, moving from noise to quiet, using loops and arcs to represent both emotion and structure. 

Coding Process: Adding Randomness

Here’s a snippet I’m proud of:

//arc

for (let x = 250; x <= width; x += 40) {
  stroke(255, random(150, 255), random(100, 255)); // random color
  noFill();
  let randY = 80 + random(-20, 20); // random vertical position
  let randW = 300 + random(-50, 50); // random width
  let randH = 400 + random(-50, 50); // random height
  arc(x, randY, randW, randH, 250, 450);
}

//line

for (let x = 1; x <= width; x += 20) {
  stroke(255, random(150, 255), random(100, 255)); // random green/pink/blue tint
  let endX = width + random(-50, 50);
  let endY = height + random(-50, 50);
  line(x, 1, endX, endY);
}

After watching Casey Reas’ video on randomness, I was inspired to incorporate a bit of chaos into my work. I added randomness to the color and the shape of the arcs, so every frame looks slightly different. This gives the piece a sense of movement and chaos, like thoughts bouncing around in your head—but still following a hidden structure underneath.

Reflection: What I Learned

This project helped me realize that coding can be just as expressive as traditional art—it’s just another medium to visualize thoughts and emotions. I also learned the value of adding randomness, it brought the project to life in ways my original plan didn’t anticipate. I also noticed that art doesn’t always have to be ‘pretty’ it can also be beautifully chaotic. 

Future Improvements

For the future, I’d love to make the sketch more dynamic and interactive, so the patterns could respond to the user’s input or feel more like actual sound waves. I also want to experiment with layering animations to capture the feeling of overthinking versus quiet peace more vividly. I wish one day I could make something as cool as my original inspiration.

I had to reconsider my approach to structure after watching Casey Reas’ presentation on chance operations and randomness. I have a background in business, so I’ve always thought that control and planning are crucial for projects, schedules, and data analysis. I assumed the same would apply to coding: clearly define the rules and follow them. The 11×11 grid of dots, one of Reas’ examples, showed how controlled randomness functions: each dot moves according to precise rules, but minor variations or “random” steps result in patterns that change from orderly to chaotic. The thought of chaotic work always scared me. He demonstrated how a system can be both rule-based and unpredictable at the same time by describing instructions like moving in a straight line, bouncing off edges, or slightly deviating from a path. It helped me understand that randomness need not imply a lack of control but can be incorporated into a well-organized framework to produce entertaining and captivating results.

I want everything to be flawlessly structured, so as a beginner coder, I frequently question my work. I enjoy doing things the “right” way and abiding by the rules. Reas’s ability to strike a balance between chance and rules has piqued my interest in trying new things. While allowing randomness to dictate specifics like placement, size, or interactions, I hope to establish boundaries in my own projects, such as establishing a color scheme, the quantity of elements, or grid positions. This method seems applicable not only to coding or art but also to business: stability is provided by a clear structure, but creativity and innovation can be stimulated by flexibility and unpredictability.  Reas’ talk taught me that embracing chance within rules doesn’t undermine order; it makes it more interesting, alive, and full of potential surprises.

For me art and its beauty has always been defined in terms of structure, order ,and algorithmic precision. Coming from a computer science background, I recognized beauty in the patterns that nature presents, like the spirals of sunflowers reflect the Fibonacci sequence. Yet, watching Casey Reas’ Eyeo talk has broadened my perspective.

Reas’ idea of introducing chaos into order struck me as both unsettling and exciting. It reminded me of the games I have created so far, taking me back to the simple bouncing ball game. What if the ball bounces in the exact same way every time? After a few rounds, the game would become predictable and monotonous. What keeps me engaged, in games or in art, is that element of surprise, the small but meaningful ways randomness shifts the experience. Reas framed this randomness not as the enemy of structure, but as its partner, an insight that felt both intuitive and profound once I heard it. Maybe the most memorable experiences emerge when we loosen the grip of order. In fact, Reas’ examples like turning cancer cell reproduction data into patterns made me realize how randomness can still carry intent, even narrative. The rules guide the outcome, but the unpredictability breathes life into it.

In my future work, I aim to set clear rules or structural boundaries for my projects, but within those bounds, I’ll allow random processes to shape outcomes. For example, in an artwork, I might define the color palette and number of shapes, but let their positions, sizes, or interactions emerge randomly every time the code runs. 

Reflecting on Reas’s talk, I believe the optimal balance lies at 60-40: about 60% structure and 40% randomness. The structured part grounds the work, maintaining coherence and intent. The random component injects surprise, transforming an algorithmic process into something truly engaging. This approach enriches both my understanding of art and my development process. By integrating defined rules with elements of unpredictability, I hope to create work that is structured yet lively.

Content:

In this assignment, I wanted to create a close digital representation of my favorite childhood cartoon character, SpongeBob SquarePants, using p5.js. I broke down the somewhat complex inspiration image into a sketch of simple shapes and elements such as lines, arcs, circles, squares, and rectangles. I also utilised colors and visual proportions to increase the accuracy of my representation.

Here is my inspiration image for reference:

Code Highlight:

One part of my code I am proud of is how I created the eyes. It wasn’t too complex, but I like how it challenged me to think carefully about visual placements and proportions. I had to make sure that the radii of the inner and outer eyeballs were different and balanced, which helped me practice precision in design and calculation.

//-- Eyes --
fill('white');
noStroke()
ellipse(160, 210, 70, 70);
ellipse(230, 210, 70, 70);

fill('blue');
noStroke();
ellipse(167, 213, 30, 30);
ellipse(224, 213, 30, 30);

fill(0);
ellipse(169, 213, 15, 15);
ellipse(224, 213, 15, 15);

stroke(0)
line(136, 168, 143, 179);
line(153, 163, 153, 175);
line(169, 163, 164, 175);
line(210, 165, 218, 176);
line(228, 162, 228, 174);
line(243, 162, 238, 174);

Embedded Sketch:

Reflections & Future improvements:

This was my first time using p5.js, and since I joined the class late, I initially struggled to write clean code. However, after learning and experimenting with the different functions, I found it rather interesting how basic code could be used to create visually appealing designs. I love how the assignment encouraged me to think ahead about what my portrait should look like and make precise calculations to get the perfect body parts.

If I had more time and experience with p5.js, I would:

• • Create fingers using custom or complex shapes instead of using only a filled circle.
  • Use shadow effects to create a hollow-looking mouth and a custom shape to represent the tongue (I improvised to create a different representation of the mouth from the reference image)
  • Add sponge-like ridges along the body as seen in the reference image.
  • Incorporate animation, such as making the portrait smile and wave when the mouse hovers over the canvas, by using loops and/or conditionals.
  • Reduce repetition in my code by using conditionals and loops.

 

 

Assignment 1: Self-Portrait with p5.js

For this first assignment, I wanted to keep things fun. Instead of trying to make a realistic self-portrait, I went for a cartoon version of myself using only simple shapes in p5.js. I spend a lot of my free time messing around with cartoon animation, so it felt right to make something that leans more toward humor and character design than strict accuracy. To be honest, you can think about it as less “this is exactly me” and more “this could be a funny character version of me.”

While I was building it, I played around with how the shapes stacked and layered, almost like sketching with blocks of color. Gradually, the face started to take shape, and I found myself enjoying the process of tweaking small details until it felt right. One of my favorite parts is the hat and how the patterned brim adds a bit of texture and keeps it from looking too flat. Even though it’s all made from basic geometry, I’ve tried to make the final portrait have a personality that feels a little quirky, and I hope I’ve succeeded in doing so.

Highlight of Code

As I mentioned above, one part I’m particularly proud of is the hat pattern (I have this hat in real life). For it, I used a simple pair of for loops with line() to create a crosshatch effect. It gave the hat texture and visual interest without being too complicated:

// Hat pattern 
stroke(100);
for (let i = 130; i < 270; i += 20) {
  line(i, 120, i, 155);
}
for (let j = 120; j < 155; j += 15) {
  line(120, j, 280, j);
}
noStroke();

It is not 100% likeness, but just enough to provoke the character and the sense of personality I want.

Embedded Sketch

Here’s the live sketch (embedded from p5.js):

Reflection

This assignment was a lot of fun, but also more challenging than I expected. The hardest part for me was getting the proportions and placement to look right. At first the eyes looked uneven, or the body would run off the canvas, and fixing that was mostly trial and error. I spent a lot of time just adjusting numbers a little bit at a time until things felt balanced.

What I liked about this process is that it felt a bit like debugging, but in a more visual way. Instead of checking for errors in the console, I was checking with my own eyes to see if something looked off. That back and forth between logic and aesthetics was interesting and kept me engaged. In the end, I am very happy with how my self-portrait turned out. It is simple and kind of silly (one that I might use in my future animations), but that is what I wanted. More than anything, I enjoyed treating code like a sketching tool instead of just a way to solve technical problems. It was refreshing and utterly intersting.