Skip to content

Checkerboard animation 1

A simple checkerboard animation.

A checkerboard with rows/columns sliding against each other

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

function draw() {
  background(220);
  let t = millis() / 3000 % 1
  t = (1 - cos((t % 0.5 * 2) * PI)) / 2 / 2 + floor(t * 2) / 2
  let s = 40
  noStroke()
  for (let i = -1; i < width / s + 1; i ++) {
    for (let j = -1; j < height / s + 1; j ++) {
      fill((i + j) % 2 ? 0 : 255)
      if (t < 0.5) {
        rect((i - t * 2 * (j % 2 ? -1 : 1)) * s, j * s, s, s)
      } else {
        rect((i - 1) * s, (j - (t * 2 - 1) * (i % 2 ? -1 : 1)) * s, s, s)
      }
    }
  }
  
}

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

Experiments tagged p5 (41/85)

Experiments tagged tiling (2/6)

Experiments on this site (41/85)