GridEasingShadows.pde

float framesToRecord = 120;

void setup() {
  size(600, 600);
  smooth(4);
}

void draw() {
  background(16);
  noStroke();
  translate(width/2, height/2);
  rotate(-QUARTER_PI);
  drawGrid(25, 25, 80, 30);
  if (frameCount <= framesToRecord) {
    // save("/out/" + frameCount + ".jpg");
  }
}

void drawGrid(int cols, int rows, float rectSize, float padding) {
  float cellSize = rectSize + padding;
  float gridWidth = cellSize * cols;
  float gridHeight = cellSize * rows;
  float time = norm(frameCount%framesToRecord, 0, framesToRecord);
  float timeA = easeInOutQuad(animate(time, 0, 0.5));
  float timeB = easeInOutQuad(animate(time, 0.5, 1));
  for (int col = 0; col < cols; col++) {
    for (int row = 0; row < rows; row++) {
      boolean isOddCol = (row+col) % 2 == 0;
      boolean isOddRow = row % 2 == 0;
      float x = map(col+(isOddRow?0:timeA), 0, cols-1, -gridWidth / 2, gridWidth / 2);
      float y = map(row+(isOddCol?0:timeB), 0, rows-1, -gridHeight / 2, gridHeight / 2);
      float frontFill = 200;
      if (isOddCol && isOddRow) {
        frontFill = 120;
      }
      float shadowFill = frontFill * 0.35;
      fill(shadowFill);
      rect(x+4, y+6, rectSize, rectSize);
      fill(frontFill);
      rect(x, y, rectSize, rectSize);
    }
  }
}

float animate(float x, float start, float end) {
  return constrain(norm(x, start, end), 0, 1);
}

float easeInOutQuad(float x) {
  return x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2;
}

https://i.imgur.com/VCWoI4K.mp4

https://i.imgur.com/7HhUs0a.mp4