createCanvas(400, 400);

}

​

function draw() {

  background(220);

  let circleSize = 30; // Diameter of each circle

  // let spacing = 50;    // Distance between circles

​

  // Outer loop for rows (Y-axis)

  for (let y = 0; y < 10; y += 1) {

    // Inner loop for columns (X-axis)

    for (let x = 0; x < 10; x += 1) {

      let xPos = x*50

      let yPos = y*50

      // Map the mouseX and mouseY values to RGB color values

      let r = map(mouseX, 0, width, 0, 255);  // Red based on horizontal position

      let b = map(mouseY, 0, height, 0, 255); // Green based on vertical position

      fill(r, 0, b); // Set the fill color based on mouse position

      let d = dist(mouseX, mouseY, xPos, yPos); // Distance from mouse to circle center

      if (d < circleSize / 2) {

      ellipse(xPos, yPos, circleSize*2)

      } else {

      ellipse(xPos, yPos, circleSize); // Draw a circle at (x, y)

      }

    }

  }

}

​

// function mouseMoved() {

//   redraw(); // Redraw the circles when the mouse is moved

// }

​