createCanvas(400, 400);

}

​

function draw() {

  background("black");

  noStroke();

  // This is a different use of a for loop than most of my exemplars.

  // Instead of count from 0 up by ones and then manipulating those

  // numbers later, I'm counting by the actual x and y positions I want.

  for (let x = 20; x < 400; x += 40) {

    for (let y = 20; y < 400; y += 40) {

      // Get the distance from the circle to the mouse;

      let distance = dist(mouseX, mouseY, x, y);

      // Map the distance to a range that looks better;

      let diameter = map(distance, 0, 400, 10, 50);

      // Map the x and y to color ranges

      let r = map(x, 0, 400, 0, 255);

      let g = map(y, 0, 400, 0, 255);

      fill(r, g, 255);

      circle(x, y, diameter);

    }

  }

}