createCanvas(400, 400);

  rectMode(CENTER); // Rectangle positions point to the center, not top corner.

  noFill(); // Don't fill shapes.

}

​

function draw() {

  background(255); // Clear the screen with white.

  translate(width / 2, height / 2); // Translate to center of sketch.

  // Calculate scale and rotation.

  let scaleFactor = map(constrain(mouseX, 0, width), 0, width, 1.1, 1.5);

  let rotation = map(constrain(mouseY, 0, height), 0, height, 0, PI / 8);

​

  // Draw 60 circles of increasing size and rotation.

  let maxSquares = 60;

  for (let i = 1; i < maxSquares; ++i) {

    rotate(rotation); // The x position of the mouse mapped 0 to PI/8 sets the rotation.

    scale(scaleFactor); // The y position of the mouse mapped 1.1 to 1.5 sets the scale.

    strokeWeight(1 / (scaleFactor * i)); // Stroke weight shouldn't increase with scale.

    // Color transitions from pink to blue as squares grow in size.

    stroke(lerpColor(color('DeepPink'), color('DeepSkyBlue'), i / maxSquares));

    rect(0, 0, 4, 4); // Draw the rotated and scaled square.

  }

}