let sizeDifference;

let numCols = 10; // 8 columns

let numRows = 10; // 12 rows

let offsetX, offsetY;

​

function setup() {

  createCanvas(1080, 1080);

  background(255);

  rectMode(CORNER);

  strokeWeight(3);

  stroke(0); // Stroke color

  fill(250);   // Fill color

​

  // Exact square size for perfect fit

  sqSize = width / numCols;  

​

  sizeDifference = sqSize / 20;

​

  // Initialize offsets

  offsetX = 7;

  offsetY = 7;

}

​

function draw() {

  background(0); // Background reset for animation

​

  // Loop through the grid to draw squares

  for (let r = 0; r < numRows; r++) {

    for (let c = 0; c < numCols; c++) {

      let x = c * sqSize;

      let y = r * sqSize;

      square(x, y, sqSize); // Draw main square

​

      // Animated offsets based on frameCount

      let animatedOffsetX = offsetX * sin(frameCount * 0.02 + r * 0.5);

      let animatedOffsetY = offsetY * cos(frameCount * 0.02 + c * 0.5);

​

      // Draw additional animated squares

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

        let newX = x + i * animatedOffsetX;

        let newY = y + i * animatedOffsetY;

        let newSize = sqSize - i * sizeDifference + sin(frameCount * 0.05 + i) * sizeDifference;

        rect(newX, newY, newSize, newSize);

      }

    }

  }

}

​

function keyPressed() {

  if (key ==='q') saveGif('animfinal.gif', 5);

}

​