Category: S2025 – Mang

Concept

In this p5.js sketch, my main objective was to practice the use of classes and arrays. In my sketch, little objects called “walkers” wander randomly across the canvas, leaving behind the trail that slowly fades away. Each walker has its properties (see below in Code Highlight part), which are determined randomly at the moment of creation (user click).

Demo (Click on canvas)

Code Highlight:

The core of this sketch is the Walker class. It encapsulates everything each walker needs to function:

// Walker class definition
class Walker {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    // Give each Walker a random color
    this.col = color(random(255), random(255), random(255));
    // Control how quickly it moves around
    this.stepSize = random(1, 3);
  }

  update() {
    // Randomly move the walker in x & y directions
    this.x += random(-this.stepSize, this.stepSize);
    this.y += random(-this.stepSize, this.stepSize);

    // Keep the walker within the canvas boundaries
    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }

  show() {
    noStroke();
    fill(this.col);
    ellipse(this.x, this.y, 8, 8);
  }
}

Inside this class, the update() method adjusts the walker’s position in small random increments, while show() draws a small ellipse at its current location.

The background(0, 13) call in the draw() loop is also important because it uses transparency to slowly erase the walkers’ paths, creating the glowing trails of each walker (I think it looks kinda cool).

Reflection & Improvements for Future Work

First of all, it was really entertaining to watch each walker wander around, leaving a trail. By simply changing parameters like number of walkers, their step size, or fade value in the background, one could produce unique versions of this piece.

In the future, I would love to make sure that the walkers of the same color would interact with each other (mixing together and creating a bigger walker). Another interesting idea would be to incorporate music in this piece (maybe 90s like Jungle beat) -> this way each walker would change its size/movement speed/direction based on the song.

If one would think long enough, the possibilities for making this piece more immersive and dynamic are essentially limitless.

Maybe one could make a game out of this piece, who knows?

Chris Crawford’s idea of interactivity as a conversation between two participants came as a novelty to me. Before reading this, I assumed that any program that reacted to user input was interactive in its nature, but after reading this I was convinced that an interactive system must possess these three elements; listening, thinking and responding/speaking. 

I feel like Crawford’s example of the refrigerator light was brilliant, it made me rethink what it means for a system to be truly interactive. I began examining the apps and websites I use every day and noticed that many of them only react to user input without actually processing information in a meaningful way. They operate on predefined rules, responding to clicks and taps but not truly engaging with the user. This made me question whether these systems, despite their responsiveness, can really be considered interactive in the way Crawford describes. 

This reading also made me reflect on how I can make my own p5 sketches feel more interactive. Right now, they mostly respond to simple inputs like mouse clicks, but what if I could design interactions that feel more like a two-way conversation?

Instead of just reacting instantly, the system could analyze patterns in user input, adapt its responses based on context, or even introduce an element of unpredictability to keep the interaction dynamic. For example, it could recognize different drawing styles over time and subtly adjust its behavior to match the user’s preferences. Of course, achieving this level of interactivity would likely require more advanced tools than p5.js (Maybe use of LLMs/AI).

I would love to create something beyond basic cause-and-effect responses and explore ways to create a more engaging.

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

Randomness is usually seen as something chaotic, but Casey Reas makes a strong case for it as a necessary ingredient in structured systems. His work shows that when randomness is completely absent, everything eventually settles into sameness—it loses vitality. That idea made me reconsider my approach. I tend to design with a clear sense of control, ensuring everything is deliberate. But maybe randomness isn’t about losing control; maybe it’s about creating space for unpredictability to enhance structure. Instead of placing every element with precision, I want to introduce rules that allow randomness to shape certain aspects—maybe through variation in form, spacing, or subtle movement. This way, my work maintains a structured framework but never becomes rigid. I like the idea of randomness making a piece feel alive, as if it’s still evolving even after it’s complete.

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

There’s a sweet spot where randomness and control feed into each other, and that’s where the most compelling work happens. Reas talks about how systems that are too rigid become static, while those that are too chaotic lose coherence. That really resonated with me because I’ve felt the same frustration in my own work—when something is too ordered, it feels predictable; when it’s too random, it lacks intention. The best balance depends on what the work is trying to say. If I want a sense of structure, I can set constraints but allow randomness to influence the details—like adjusting spacing, shifting colors, or adding unpredictable textures. It’s not about choosing between order and chaos but about letting them interact, so the piece always has a bit of tension, a sense that it could shift or evolve. That, to me, makes the work more engaging, both visually and conceptually.

The discussion on randomness by Casey Reas was a lot more profound than I had expected. I’m used to talking about randomness from a purely mathematical perspective, such as the use of random/psuedorandom numbers in computer security, so hearing the more artistic interpretations was a large change of pace. One point that stood out to me was how you could interpret randomness as a deviation from order, creating a sort of chaotic rebellion against the system, and yet there are countless applications of randomness that converge towards their own sort of order. Similarly, there was also some debate mentioned about whether the use of computers was draining the human aspect from art or giving birth to a brand new medium, and how introducing randomness into a strictly rational machine could impact things.
Another aspect that underscored the entire talk was the careful balance of randomness and control. Going all-in on one side or the other will often lead to either meaningless or soulless results, but the real magic comes when order and chaos come together. I have already found the importance of placing bounds on random values from my own experimentation in p5.js, which imposes some degree of order. Another programmatic aspect that interested me came from a class I took previously, where we discussed noise functions. Specifically, we discussed how one noise function creates randomness, but a combination of noise functions can create a sort of ordered randomness that can be used for things like image textures.

Casey Reas’ talk on order and chaos in generative art really made me think about the balance between structure and unpredictability in creative expression. I found it fascinating how simple shapes, when repeated using logical rules or algorithms, can give rise to patterns and symmetry. However, while order is important, embracing chaos can lead to more creative freedom. This idea stood out to me because I often feel that art involves a degree of control, where every detail is carefully placed. But Reas’ perspective made me consider the value of letting go—allowing things to take their own course rather than trying to dictate every aspect of an artwork.

Another point that resonated with me was his discussion on randomized numbers and their role in generative art. Randomness, when introduced carefully, can maintain an underlying order while also adding variation that makes the artwork more dynamic. I also found it interesting how a computer, a machine built for logic and precision, can be used to generate such diverse and expressive visuals. This is where I think human input remains invaluable—deciding what should be controlled and what should be left to randomness. While working on my own assignment, I kept Reas’ ideas in mind, thinking carefully about which elements to keep structured and where to introduce randomness to add some chaos and balance out the order and symmetry.

For this weeks production assignment of creating an artwork using animation, conditionals, loops, I wanted to create a gamified artwork based on  a slice of life of my cat Piku.

This is Piku! A cat that loves showers more than anything(strangely)!

So I quickly sketched up my plan for today’s artwork which roughly looked like this-

I wanted to implement animation, conditionals, and loops to bring everything to life. I imagined:

-Window blinds that could open and close smoothly, setting the scene.

-A background with clouds and a sun, all randomly generated to make things feel dynamic. Also, day to night transition.

-Foam filling up the bathtub, to give it some depth.

-Dirt appearing on the cat, to make it interactive

-A sponge that could move around as a cursor and detect collision when it touched the dirt, making it disappear.

-Bubbles floating around animation to show that the dirt splashes are being cleaned

At first, it all sounded doable in my head. But once I started coding, I quickly realized just how many moving parts there were. Making sure the sponge actually removed the dirt was tricky. Getting the animations to feel smooth took a lot of tweaking. And sometimes, the whole thing would just break for no reason, forcing me to backtrack and figure out what went wrong.

The Part that took the longest: Collision detection!

The dirt and sponge interaction was by far the toughest challenge. At first, I thought it’d be simple—just check if the sponge touches the dirt and remove it. Spoilers- it wasnt. What Went Wrong?

-Frames: The dirt sometimes disappeared too fast or not at all because collisions were checked every frame, making it inconsistent.

-Layering: Dirt kept reappearing because new frames kept redrawing it, even after “removal.”

-Messed-up logic: I tried so many broken approaches—checking collisions wrong, deleting dirt before drawing it, and even accidentally scrubbing the whole screen at once.

The Fix

I stored dirt in an array and only removed pieces when they were properly scrubbed:

let dirtParticles = Array.from({ length: 20 }, () => ({
  x: random(width), y: random(height), scrubbed: false
}));

function draw() {
  background(220);
  let sponge = { x: mouseX, y: mouseY };

  fill(255, 204, 0);
  ellipse(sponge.x, sponge.y, 50, 30); 

  dirtParticles = dirtParticles.filter(dirt => {
    let scrubbing = dist(sponge.x, sponge.y, dirt.x, dirt.y) < 30;
    if (!scrubbing) {
      fill(139, 69, 19);
      ellipse(dirt.x, dirt.y, 15, 15);
    }
    return !scrubbing;
  });
}

And after hours and hours of googling every function ever, here’s the final result:

What I’d Do Differently

This project was a huge learning experience. If I had to do it again, I’d plan my code structure better from the start. I ran into so many issues with layers, frame updates, and collision logic, which could have been avoided if I had mapped out how each element would interact beforehand.Also, I’d put more focus on the aesthetic aspects of the project. This project forced me to dive deep into some tricky p5.js functions and concepts, including:

• filter()
• push() / pop()
• frameRate() and frame-based logic
• Arrays and Objects
• Background Gradient
• Animation Timing

This project had its frustrating moments, especially when things wouldn’t behave the way I expected. But in the end, seeing everything finally come together was incredibly rewarding.

Casey Reas’ talk on randomness in generative artworks provided an intriguing insight into the concept of randomness not as a frightful enemy but rather as a tool to employ and utilize. As humans, we instrinsically cower away from randomness. It disrupts routines and takes away from order. It is chaotic. However, Reas advocated for randomness as an array of endless possibilities in his talk. In his eyes, it should be seen as a foundation to build upon, rather than an afterthought. He gives examples of his earlier works, where he strayed away from the chaotic nature of randomness, sticking to defined shapes and positions. However, his philosophy shifted overtime to incorporate it, albeit with rules and restrictions to give it direction. This thought process piqued my curiousity, as at what point do those constraints simply become too much, and prevent random chance from truly acting?

Personally, I found this talk thoughtprovoking, and it encouraged me to also incorporate randomness within my assignment. Reas emphasizes that randomness simulates the unpredictable nature of real life, rather than everything being carefully placed and artificial. As such, seeing as my inspiration was natural beauty, I decided to incorporate random positions within my project, as an ode to what Reas described. I did end up setting boundaries for the randomness to stray within my project, as I felt some control was necessary for aesthetic purposes, though I am interested as to what it may have looked like had I not set these restrictions.

What I found interesting about the talk is that it shows a compelling exploration of the intersection between order and chaos in art. The idea that the role of an artist is to maintain order in the face of nature’s chaos resonates with my own experiences in creative work. I have often found that the introduction of random elements can lead to unexpected and exciting results, as in the example of Reas’ tissue work, inspired by Valentino Braitenberg’s hypothetical vehicles. This approach of using biological references and physical properties as a basis for artistic exploration challenges me to reconsider my creative process. How could I incorporate more natural and chaotic elements into my work without losing a sense of artistic control?

Moreover, the concept of using randomness as a starting point, for example in John Cage’s chance-based compositions, raises questions about the nature of creativity itself. I wonder about the ethical implications of using AI-generated randomness in art: does this introduce a new form of bias or remove human intuition from the equation? Also, the observation that patterns trigger the imagination makes me reflect on how we perceive and interpret randomness. Perhaps what we see as random is simply a pattern we have not yet recognized. This talk made me want to experiment with new approaches that balance control and unpredictability in my work.

In this project, I created a flower using functions, loops, and trigonometry to achieve a visually appealing result. I researched how to use trigonometric functions (cos and sin) using Perplexity to calculate the positions of the petals, ensuring they were evenly spaced around the center. The drawFlower function generates a layered petal effect with a color gradient,  and drawGrass adds randomness for a more natural look.

The most challenging part of the code was implementing the gradient petal effect.

// Draw the petals with a gradient effect
for (let i = 0; i < 3; i++) { // Three layers for depth
fill(255 - i * 40, 0, 0); // Darker red inner petals
stroke(0);
for (let angle = 0; angle < TWO_PI; angle += PI / 4) { // 8 petals
let petalX = x + cos(angle) * (size - i * 8);
let petalY = y + sin(angle) * (size - i * 8);
ellipse(petalX, petalY, size, size * 1.2);
}
}


This loop places 8 petals in a circular pattern around the flower’s center.

• TWO_PI represents a full circle (360 degrees), and PI / 4 (45 degrees) is the step between each petal, so 8 petals are drawn (because TWO_PI / PI/4 = 8).

I had to carefully adjust the loop logic to reduce petal size in each layer while darkening the color for a realistic depth effect. Additionally, balancing the size, spacing, and positioning of the petals required multiple adjustments to avoid overlapping or misalignment. Another challenge was creating a natural-looking stem and leaves, ensuring they were well-proportioned with the flower.

Concept:
I initially created the grid while experimenting with using for-loops in p5.js, and added in a single rect that could be controlled via the arrow keys. The whole thing was vaguely inspired by the genre of snake games, but I later came to think of it more as a canvas that the user would draw on at runtime once I reminded myself that the assignment was meant to be an art piece. I also wanted to see how the random() function could be applied to art, and ended up using it in a few places.

Highlight:

// // Traversed cells
for (let c = 0; c < filled.length; c++) {
  fill(filled[c].colour);
  rect(filled[c].x, filled[c].y, gridSize, gridSize);
}

// // Class for retaining pos/colour info of traversed cells
class filledCell {
  constructor(x, y, colour) {
    this.x = x;
    this.y = y;
    this.colour = colour;
  }
}
// // Add a new cell instance to the relevant array
function addCell(oldX, oldY) {
  let newC = new filledCell(oldX, oldY, mainColour);
  filled.push(newC);
}

Embed:

• Arrow keys = move
• Spacebar = move to random cell
• Click = change colour
• r = clear canvas
• R = randomize canvas

Reflection:
Overall, I’m a lot more satisfied with this piece than the self-portrait. I made sure to approach things more systematically, and achieved my goals of using variables more effectively and leaving comments in my code. One thing I would still like to improve on is ordering and grouping things together, since even though I had distinct sections (e.g. Globals, Interaction, Helpers) my code still ended up being rather messy. The section for helper functions was particularly bad, since I just threw things in there as I came up with them.

Another thing I both struggled and succeeded in was creating functions. There were a number of points where I saw an opportunity to move code from the main body into distinct functions, which was an improvement from last week, but I also had to stop myself from going overboard and creating more functions when I could just leave a few lines in the body to do the same thing. Lastly, while my work was more structured this time around, I still did not plan things out as thoroughly as I would like to. Most of what I wrote was done spontaneously, which resulted in plenty of backtracking to properly implement the new functionality in my existing code.