Meshing squares

The basic animation here is that of 3 squares taking turns to advance by one step. However, when you repeat the animation with ever smaller squares meshing in and out of each other, it becomes quite confusing.

Four towers of squares, that travel between adjacent towers. 

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let t = millis() / 1000
  t += sin(t * PI * 2) / 6 / 4
  let f = (n) => constrain(abs((t+n) % 12 - 6) * 2 - 6, -1, 1)
  rectMode(CENTER)
  stroke(0)
  randomSeed(new Date() / 10000)
  for (let i = 0; i < 17; i ++) {
    fill(random(255), random(255), random(255))
    for (let j = 0; j < 3; j ++) {
      rect(200 + 50 * f(4 * j + i), 200 + 50 * f(4 * j + 3 + i), 85 - i * 5)
    }
  }
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/TLwaxIJBN)

Experiments tagged p5 (82/85)

Experiments on this site (82/85)