Week 3 – Ripple Matrix

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.

 

 

Leave a Reply