Author: Maryam Emaan Fiyaz

Overall Concept

The goal of my artwork was to create a trippy, mesmerizing experience by combining a grid background with a ripple effect triggered by mouse clicks. The ripples grow from the point of the click, creating an expanding circle that contrasts with the static electricity-like grid in the background. The artwork plays with randomness in both the grid’s colors and the ripple’s growth, making each frame visually unique. By using Object-Oriented Programming (OOP), I was able to structure the code cleanly and efficiently manage multiple ripple effects simultaneously.

Code Breakdown

1. Object-Oriented Programming with the Rippler Class
   The ripple effect is generated using a class called Rippler. Each time the user clicks on the canvas, a new ripple is instantiated at the mouse position. The class allows each ripple to grow over time, giving the illusion of waves expanding across the grid.
2. Arrays for Storing Objects
   I used an array to store all the Rippler objects so that multiple ripples can be drawn and expanded at once. This approach also allows for scalable complexity, as the number of ripple effects grows depending on user interaction.
3. Grid Background Functionality
   I created a function, drawgridColors(), to generate a background grid. Each square in the grid is assigned a random color from a predefined set. The randomness, combined with the small size of each square, gives the grid a look similar to static electricity.

Favorite Part of the Project

My favorite part of this project was building the background and giving it a static electricity kind of look. Although it wasn’t too difficult, the way the grid feels alive with random colors constantly changing adds a nice touch. The following snippet was key to achieving this effect:

for (let i = 0; i < height / size; i++) {
  for (let j = 0; j < width / size; j++) {
    let colorIndex = int(random(possibleColors.length)); 
    let thisColor = possibleColors[colorIndex]; 
    fill(thisColor); 
    noStroke(); 
    rect(i * size, j * size, size, size); 
  }
}

I enjoyed how simple it was to achieve this effect by filling the grid squares with random colors, yet it visually complements the dynamic ripples on top.

Inspiration and Future Improvements

My inspiration for this artwork came from the desire to create something that would be visually captivating and somewhat hypnotic, giving a trippy experience for viewers. I wanted the ripples to feel as though they were interacting with the chaotic, staticky grid background.

For future improvements, I’d love to make the project more interactive. For instance, I could implement different types of ripple effects or allow the user to control the grid colors or the ripple speed through keyboard input. This would enhance the trippiness and interactivity of the piece.

Challenges and Problem-Solving

One challenge I ran into was ensuring the grid and the ripples didn’t conflict visually, especially since both involve overlapping elements. Adjusting the grid size and ripple speed helped balance the visuals.

Another issue was managing the frame rate. I needed the grid to update slowly while allowing the ripples to grow at a faster pace. By setting a lower FrameRate  and controlling the ripple speed manually in the Rippler class, I was able to solve this.

 

 

Based on Chris Crawford’s “The Art of Interactive Design,” a strongly interactive system should be responsive, intuitive, engaging, personalized, and provide meaningful feedback. It should react promptly to user input, be easy to understand and use, encourage active participation, adapt to individual preferences, and offer informative feedback.

To improve user interaction in my p5 sketches, I will incorporate dynamic elements, provide interactive controls, personalise experiences, provide meaningful feedback, and tell a story. By introducing elements that respond to user input, offering intuitive controls, allowing users to customize their experience, giving clear and informative feedback, and creating a narrative to guide the user’s experience, I can create more engaging and interactive p5 sketches.

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.