Assignment 2 – Rainbow Ripples

For this assignment, I had wanted to create something colorful. I began with a gradient of “pixels” whose color was mapped to their x and y location. This was not enough, so I decided to add a ripple effect. The ripples are their own class and are displayed above the pixel background. I made it so the ripples would have their color be the inverse of the color of the background pixels. The ripples appear based on a random interval and at random locations.

I am particularly proud of my creation of a dedicated class for the ripples, as well as the calculation that takes place within them. I ran into some issues with performance as if too many ripples appeared at once, the program would slow down. I did my best to optimize the calculations and remove any redundant math.

display() {
    for (let i = 0; i < pixelGrid.length; i++) {
      let pixelColor = pixelGrid[i];
      let px = (i % gridSizeX) * pixelSize;
      let py = Math.floor(i / gridSizeX) * pixelSize;
      let distance = dist(px, py, this.x, this.y);
      
      if (distance < this.radius) {
        let inverseColor = color(
          255 - red(pixelColor),
          255 - green(pixelColor),
          255 - blue(pixelColor)
        );
        fill(
          inverseColor.levels[0],
          inverseColor.levels[1],
          inverseColor.levels[2],
          this.alpha
        );
        square(px, py, pixelSize);
      }
    }

More work can certainly be done to further optimize the code, as I understand that drawing pixels on top of already existing pixels is slower than simply modifying their color for the ripples.