Author: Maryam Emaan Fiyaz

Concept

For this piece, I was inspired by Casey Reas’ Eyeo talk on chance operations. I wanted to explore randomness by creating a dynamic, ever-evolving spiral pattern of shapes, where both the number of sides and the colors are randomized. The randomness adds an element of surprise, making the artwork feel more organic and unpredictable. I also referenced this guide for parts of the code, particularly for drawing the shapes using vertex points.

Code Highlight

One part of my code that I’m particularly proud of is how I used the random() function to generate shapes with random sides and colors. This randomness brings variety and excitement to the piece:

// Randomize the number of sides for the shape (between 3 and 7)
let numsides = floor(random(3, 8));

// Randomize the color of the shape 
let shapeColor = color(random(255), random(255), random(255));
fill(shapeColor);  

This part ensures that each shape in the spiral is unique, giving the piece a playful and dynamic feel.

Embedded Sketch

 

Reflection and Future Improvements

While I’m happy with how the randomization and spiral pattern turned out, there are several ways I could improve this piece. For example, I could make the sketch more interactive by allowing users to control certain parameters, such as the speed of the spiral or the size of the shapes. Another potential improvement would be to add sound elements that react to the shapes or colors, making the piece more immersive.

Concept
My concept centres around the idea that a cat represents an important aspect of my identity, being my favourite animal and symbolising certain personal traits like independence, curiosity, and playfulness. In this project, I wanted to create an interactive experience where a simple click could reveal the transition between a cat and my self-portrait. The idea was to make this transformation not just about visuals but also about the connection between the two images—how the cat symbolises me in a more abstract way and how that symbolism morphs into a more literal self-portrait. The goal was to capture a sense of play and surprise, inviting the viewer to engage with the piece and reflect on how we often associate certain animals with our personalities or characteristics.

function draw() {
  if (showCat) {
    drawCat();
  } else {
    drawPerson();
  }
}

 

This function is simple yet crucial for the interactive element of my project. It efficiently toggles between two distinct visual representations based on user interaction. The conditional logic is straightforward but powerful, allowing for a seamless transition between the cat and the self-portrait. What I find particularly satisfying about this piece of code is how it encapsulates the entire concept in just a few lines. It’s a perfect example of how simplicity in code can lead to a more engaging and fluid user experience. This function effectively bridges the gap between concept and execution, making the interaction feel natural and intuitive.

Reflection and Future Improvements
Reflecting on the project, I’m pleased with how the interactive element turned out, but I see a lot of potential for further refinement. One area I would like to focus on in the future is adding more realism to the visuals, particularly through the use of shadows and shading techniques. Currently, the transition between the cat and the self-portrait is clean and simple, but adding shadows could give the images more depth and make the transformation feel more lifelike. I also want to explore more advanced rendering techniques to enhance the texture and detail of both the cat and the self-portrait. Additionally, experimenting with subtle animations during the transition could add another layer of sophistication, making the experience even more engaging. This project has been a great learning experience, and I’m excited to see how I can push it further to create a more polished and immersive piece.