Skip to content

Checkerboard animation 2

A much more complicated checkerboard animation. Made right after checkerboard animation 1 for a TilingTuesday post on Mastodon.

A checkerboard with white/black squares spinning in place

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(220)
  let s = 40
  noStroke()
  for (let z = 0; z < 2; z ++) {
    for (let i = -1; i < width / s + 1; i ++) {
      for (let j = -1; j < height / s + 1; j ++) {
        let t = frameCount * 22 / 5000
        t += noise(i*0.1, j*0.1, frameCount/400)
        // t = 0.45 + i/100
        t = t % 1
        t = (1 - cos((t % 0.5 * 2) * PI)) / 2 / 2 + floor(t * 2) / 2
        t = (1 - cos((t % 0.5 * 2) * PI)) / 2 / 2 + floor(t * 2) / 2
        push()
        translate(i * s, j * s)
        if (z == 0) {
          fill(t < 0.5 ? 0 : 255)
          rect(-s/2, -s/2, s, s)
        } else if (((i + j) % 2) == (t < 0.5)) {
          fill(t < 0.5 ? 255 : 0)
          rotate(t * PI * (noise(1000+i*0.1, j*0.1, floor(t) / 2)>0.5 ? -1 : 1))
          //scale(1 + sin(t % 0.5 * 2 * PI) ** 5 * 0.1)
          rect(-s/2, -s/2, s, s)
        }
        pop()
      }
    }
  }
}

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

Experiments tagged p5 (42/85)

Experiments tagged tiling (3/6)

Experiments on this site (42/85)