let maxSize = 150; // Maximum size for ripples

let growthRate = 2; // Rate at which the ripples grow

let colors; // Array to store the color choices

​

function setup() {

  createCanvas(400, 400);

  noFill();

​

  // Define the set of colors in an array

  colors = [

    [255, 0, 0],    // Red

    [0, 255, 0],    // Green

    [0, 0, 255],    // Blue

    [255, 255, 0],  // Yellow

    [0, 255, 255],  // Cyan

    [255, 0, 255]   // Magenta

  ];

}

​

function draw() {

  background(255); // Clear the background each frame

​

  // Use a while loop to manage the ripple list

  let i = ripples.length - 1;

  while (i >= 0) {

    let ripple = ripples[i];

​

    // Use a for loop to control the growth of the ripple

    for (let j = 0; j < growthRate; j++) {

      if (ripple.size < maxSize) {

        ripple.size += 1; // Increment size only if it is less than maxSize

      }

    }

​

    // Draw the ripple with its assigned color

    stroke(ripple.color); // Directly use the RGB array for the color

    ellipse(ripple.x, ripple.y, ripple.size * 2, ripple.size * 2);

​

    i--; // Decrement the index for the while loop

  }

}

​

// Trigger new ripple when mouse is pressed

function mousePressed() {

  let randomColor = random(colors); // Select a random color from the array

  let newRipple = {

    x: mouseX,          // Store mouse X position

    y: mouseY,          // Store mouse Y position

    size: 1,            // Start with a small size

    color: randomColor  // Directly assign the random color array

  };

​

  ripples.push(newRipple); // Add new ripple to the array

}

​