Week 2 – Shahram – The Interruption

One part of the video that really caught my attention was the phrase “natural unreasonable order.” It made me think that the more humans chase perfection and efficiency, the more our way of living starts becoming unsustainable. We often wonder how people managed without all the technology and advancements we have today, but the truth is life on earth has always sustained itself regardless of technology.

In my piece, I wanted to capture the balance by mixing randomness and structure. The randomness in how the grid gets colored helps keep the viewer’s attention, while my choice of squares over circles represents order versus chaos. Squares feel more rigid and structured, while circles feel looser and more chaotic. It takes a few seconds for the grid to gradually fill with color, almost like watching the slow formation of nature itself.

But here’s the twist: as long as you let the process run undisturbed, the artwork stays vibrant. The moment you interfere by clicking, the cells start turning white. If you keep interfering, the whole grid could eventually end up blank – an analogy to what happens when humanity disrupts nature’s delicate, chaotic order: color fades, and life disappears. I was debating whether or not to have a reset option, but ended up not having it, because life never gives us the chance to go back and fix our mistakes anyways. 

There’s also another layer to this idea. We usually celebrate curiosity, but there’s a point where too much curiosity can lead to destruction. Curiosity kills the cat, right?

Here’s the Interruption:

 

I like this code because it’s kind of the main part but it uses nested for loops to create a grid, where each cell has a random chance of being filled with a random color, unless it has been disabled by a click :

function draw() {
  for (let c = 0; c < cols; c++) {
    for (let r = 0; r < rows; r++) {
      if (!disabled[c][r] && random() > p) {
        fill(random(palette));
        rect(c * cell, r * cell, cell, cell);
      }
    }
  }
}

For improvements and future work, I would like to add a slow fade effect so that when a cell is clicked, instead of instantly going white, it gradually fades away, almost like nature decaying over time. It might also be interesting to add sound to the clicks, so that human interference is not only seen visually (through the white cells) but also felt in other ways.



Week 1 – Self Portrait

As someone who grew up watching suspense, mystery, and thrillers, I have always had a love for the unknown . It is practically part of my personality at this point. So for my self-portrait, I wanted to bring in that sense of intrigue.

When the sketch first loads, you see an anonymous figure – a faceless, question-marked silhouette. But if you click anywhere on the canvas, the figure is replaced by a self-portrait. Click again, and it disappears back into anonymity.

On the surface, it is a fun interactive switch. But on a deeper level, I think it reflects something more personal: the idea that people can choose to know you  or not. Maybe someone clicks, sees the portrait (a glimpse of who I am), and then clicks again to hide it. Maybe they don’t want to see me. Or maybe, like in real life, they’re unsure if they’re ready to know the full picture.

I guess that is the suspense in being known . Once someone sees you, they can never unsee you. But they can still choose to look away.

Here is my sketch.

The part of my code I am most proud of is the use of a boolean and if…else logic to toggle between the anonymous and self-portrait modes when the user clicks on the canvas.

function draw() {
textAlign(CENTER, TOP);
textSize(12);
noStroke();

if (showPortrait) {
background(255);
fill(0);
text('click to hide', 200, 50);
drawPortrait();

} else {
background(0);
fill(255);
text('click to reveal', 200, 50);
drawAnonymous();
}
}

function mousePressed() {
showPortrait = !showPortrait;
}

I am also quite proud that I managed to create a relatively expressive smile using just one line of code. It is simple, but adds a lot of personality in I think.

arc(200, 330, 30, 10, 0, PI, CHORD);

For future improvements, I would love to build on the toggle idea by introducing multiple personalities or moods instead of just a binary switch between anonymous and self-portrait. I believe everyone reveals different layers of themselves depending on the environment or the people around them. It would be really cool if the portrait could reflect that. For example, changing facial expressions, clothing, or color schemes to represent different sides of my personality: serious, playful, thoughtful etc. This would add both depth and relatability to the sketch.