Skip to content

Spinning hexagon cubes

Made for a TilingTuesday post on Mastodon.

A tiling of rhombs that are actually cubes which spin in place.

(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)

Experiments tagged p5 (43/85)

Experiments tagged tiling (4/6)

Experiments on this site (43/85)