let size = 2; // Size of the grid squares

​

// Class representing a ripple effect

class Rippler {

  constructor(x, y) {

    this.x = x; // X-coordinate of the ripple's origin

    this.y = y; // Y-coordinate of the ripple's origin

    this.d = 0; // Initial diameter of the ripple (starts from 0)

  }

​

  // Function to draw and increase the size of the ripple

  draw() {

    this.d += 5; // Increase the diameter of the ripple by 5 and controls ripple speed

    circle(this.x, this.y, this.d); // Draw a circle representing the ripple

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight); 

  frameRate(3); // Set frame rate to 3 frames per second 

}

​

function draw() {

  background(220); 

​

  drawGridColors();

​

  // Draw all the ripplers on the canvas

  stroke('white'); // Set the stroke color to white for the ripples

  strokeWeight(5); // Set the stroke weight to 5 pixels for the ripples

  for (let i = 0; i < ripplers.length; i++) {

    ripplers[i].draw(); // Call the draw method for each ripple object

  }

}

​

// Function that triggers when the mouse is pressed

function mousePressed() {

  // Add a new ripple object at the mouse click location

  ripplers.push(new Rippler(mouseX, mouseY));

}

​

// Function to draw the grid with random colors

function drawGridColors() {

  let possibleColors = ['black', 'grey', 'rgb(73,73,73)', 'white']; // Array of possible colors for the grid

​

  // Loop through the grid and assign a random color to each cell

  for (let i = 0; i < height / size; i++) {

    for (let j = 0; j < width / size; j++) {

      let colorIndex = int(random(possibleColors.length)); // Randomly choose a color index

      let thisColor = possibleColors[colorIndex]; // Get the color from the array

      fill(thisColor); // Set the fill color

      noStroke(); // Disable stroke for the grid cells

      rect(i * size, j * size, size, size); // Draw the grid cell as a rectangle

    }

  }

}

​