Spinning hexagon cubes
Made for a TilingTuesday post on Mastodon.
(Known bug: cubes around the corners might be blinking in and out of existence at certain screen sizes)
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
pixelDensity(2)
smooth()
}
windowResized = setup
function draw() {
background(10);
let tg = millis() / 1500
let s = 50
camera(500, -500, 500)
ortho()
fill(255)
stroke(0)
strokeWeight(3)
let sizeOnScreen = s * sin(PI / 3) // empirical
let iSize = height / sizeOnScreen
let jSize = width / (sizeOnScreen * sin(PI / 3) * 2) + iSize / 3 + 1
for (let i = -iSize / 2 - 1; i < iSize / 2; i ++) {
for (let j = -jSize / 2; j < jSize / 2; j ++) {
let t = tg + (noise(i, j, tg) - 0.5) * 0.6
t -= sin(t * 2 * PI) / 2 / PI
t -= sin(t * 2 * PI) / 2 / PI
t = t % 3
resetMatrix()
translate(s * (i - j), s * i, s * j)
if (tg % 2 > 1) {
rotate(PI, [1, -1, 1])
translate(s, -s, 0)
}
if (t < 1) {
rotate(t * PI, [-1, 0, 1])
} else if (t < 2) {
rotate(t * PI, [1, 1, 0])
} else {
rotate(-t * PI, [0, 1, 1])
}
box(s - 1)
}
}
}(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/vZRBxs5PO)
Browse more articles?
← Checkerboard animation 2 Experiments tagged p5 (43/85) Sync-unsync →
← Checkerboard animation 2 Experiments tagged tiling (4/6) Spinny hexagon/hexagon-star tiling →
← Checkerboard animation 2 Experiments on this site (43/85) Sync-unsync →