let clickRegistered = false;

let expansionSpeed = 3;  // Increase this value to make the ripples expand faster

​

function setup() 

{

  createCanvas(400, 400);

  noFill();  // No fill for circles

}

​

function draw() 

{

  background(0);  // Black background

​

  // Creates ripples when the mouse is pressed

  if (mouseIsPressed && !clickRegistered) 

  {

    clickRegistered = true;  // To prevent multiple clicks being registered in one press

    // Add 5 new ripples at the mouse position

    for (let i = 0; i < 5; i++) 

    {

      // Assign a random color (red, green, or blue)

      let randColor = random([color(255, 0, 0), color(0, 255, 0), color(0, 0, 255)]);

      ripples.push({

        x: mouseX,

        y: mouseY,

        radius: 1,

        col: randColor  // Store the random color

      });

    }

  } else if (!mouseIsPressed) 

  {

    clickRegistered = false;  // Reset the click state when mouse is released

  }

​

  // Loop through each ripple

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

  {

    let ripple = ripples[i];

    stroke(ripple.col);  // Set stroke color to ripple's assigned color

    // Draw a circle for each ripple

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

    // Increase the radius to create the growing effect, adjusting the speed

    ripple.radius += expansionSpeed;  // Increase radius faster

  }

}