Checkerboard animation 1
A simple checkerboard animation.
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)
Browse more articles?
← Lissajous scanner Experiments tagged p5 (41/85) Checkerboard animation 2 →
← Natural Knight tiling Experiments tagged tiling (2/6) Checkerboard animation 2 →
← Lissajous scanner Experiments on this site (41/85) Checkerboard animation 2 →