let sizeDifference;

let numCols = 8;

let numRows = 12;

let offsetX, offsetY;

let startX, startY;

​

function setup() {

  createCanvas(1080, 1080); // Square canvas

  background(255);

  rectMode(CENTER);

  strokeWeight(2);

  stroke(130, 90, 250);

  fill(210, 250, 90);

​

  // Fit the grid inside the square canvas

  sqSize = width / numCols; // Scale based on columns to fit

​

  sizeDifference = sqSize / 20;

​

  // Center the grid within the square canvas

  startX = sqSize / 2;

  startY = (height - (numRows * sqSize)) / 2 + sqSize / 2;

​

  offsetX = 5;

  offsetY = 7;

}

​

function draw() {

  background(130, 90, 250);

​

  // Draw the grid within the square

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

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

      let x = startX + c * sqSize;

      let y = startY + r * sqSize;

      square(x, y, sqSize);

​

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

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

​

      for (let i = 1; i < 8; 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);

}

​