let numSquares = 6; // Total number of larger squares

let nestedSquares = 4; // Number of nested squares within each larger square

let squareSize;

let maxSize, minSize;

let spacing; // Spacing between larger squares

​

function setup() {

  createCanvas(560, 372);

  squareSize = width / (numSquares / 2); // Assuming 3 squares in a row

  maxSize = squareSize;

  minSize = squareSize / 10;

  spacing = squareSize / 50;

​

  // Initialize properties for each large square

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

    let x = (i % 3) * squareSize + squareSize / 2;

    let y = floor(i / 3) * squareSize + squareSize / 2;

    squares.push({ x, y, size: maxSize, hovered: false });

  }

}

​

function draw() {

  background(255);

​

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

    let sq = squares[i];

​

    // Determine if the mouse is over the square

    sq.hovered = (mouseX > sq.x - sq.size / 2 && mouseX < sq.x + sq.size / 2 &&

                  mouseY > sq.y - sq.size / 2 && mouseY < sq.y + sq.size / 2);

​

    // Draw the nested squares

    for (let n = 0; n < nestedSquares; n++) {

      let nestedSize = sq.size - n * (sq.size - minSize) / nestedSquares;

​

      // Color change based on mouse position

      let colorValue = sq.hovered ? map(mouseY, 0, height, 255, 0) : 255 - (n * (255 / nestedSquares));

​

      fill(

        colorValue,

        255 - colorValue,

        map(mouseX, 0, width, 0, 255)

      );

​

      // Draw each nested square

      rectMode(CENTER);

      rect(sq.x, sq.y, nestedSize - n * spacing, nestedSize - n * spacing);

    }

  }

}

​