let rows = 5;

let r = 25;

let spacing;

let alphaValues = [99, 99, 99, 99]; // Alpha values for each color

let scaleFactors = [1, 0.9, 0.8, 0.7]; // Scale factors for each circle size

let isMouseOver = false; // To track if mouse is over the center circle

​

function setup() {

  createCanvas(400, 400);

  spacing = width / (cols + 1);

}

​

function drawCircle(size, color, alpha) {

  push();

  translate(width / 2, height / 2);

  scale(size);

  noStroke();

  fill(color[0], color[1], color[2], alpha); // Set color with alpha

  drawCircles(size);

  pop();

}

​

function drawCircles(size) {

  for (let i = 0; i < cols; i++) {

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

      let x = (i - cols / 2.5) * spacing;

      let y = (j - rows / 2.5) * spacing;

      circle(x, y, r * 2);

    }

  }

}

​

function draw() {

  background(255);

​

  // Check if the mouse is over the center circle

  isMouseOver = dist(mouseX, mouseY, width / 2, height / 2) < r;

​

  // Update alpha values based on mouse position

  if (isMouseOver) {

    // Pulse effect

    let pulse = map(sin(frameCount * 0.1), -1, 1, 100, 255);

    alphaValues = [pulse, pulse * 0.8, pulse * 0.6, pulse * 0.4]; // Gradual decrease in alpha

  } else {

    // Reset alpha values

    alphaValues = [99, 99, 99, 99];

  }

​

  // Define colors for each circle

  const colors = [

    [0, 0, 255],    // Blue

    [255, 0, 0],    // Red

    [255, 150, 0],  // Orange

    [200, 200, 0]   // Yellow

  ];

​

  // Draw circles with updated alpha values and distinct colors

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

    drawCircle(scaleFactors[i], colors[i], alphaValues[i]);

  }

​

  // Add the text instruction

  fill(0); 

  textSize(14); 

  textAlign(CENTER, CENTER);

  text("Move your mouse to the center circle", width / 2, height - 20); // 

}