TumblingBlocks

Options

near #7c5cff

css colour

The lighter cube colour, and the one a cube starts from.

far #ff5c9d

css colour

The other cube colour, mixed in per cube so the wall is not one tone. The variation is in hue only: see `relief`.

line #0b0a18

css colour

The lattice lines, between cubes and across each one. A near-black with some of the cube hue still in it, because a true black line over a coloured face reads as a gap rather than as an edge.

cells 7

2 to 24, good: 5 to 12

Cubes across the short edge. Few and large reads as architecture; past about fifteen the faces are too small to carry their own shading and the illusion goes with them.

rotation 0

0 to 60

Rotation of the lattice in degrees. Only sixty are worth having: a rhombille is unchanged by a third of a turn, and the three faces simply exchange roles.

thickness 0.04

0 to 0.2, good: 0.02 to 0.08

Line width in lattice units. At 0 there are no lines and the cubes are held apart by their shading alone, which works and is quieter.

softness 0.05

0 to 1

Softness of the line edge, on top of the one pixel of antialiasing that is always there.

variation 0.28

0 to 1, good: 0.3 to 0.7

How far the cube colour wanders from cube to cube. Kept low on purpose. The variation is in hue and the shading is identical on every cube, because agreement about where the light is coming from is the only thing telling the eye these are solids; push this up and a dark-hued cube's lit face ends up darker than a light-hued one's shadowed face, which is enough to flatten the whole wall into a pattern of diamonds.

relief 0.85

0 to 1, good: 0.6 to 1

How far the three faces separate in tone. This is the illusion and almost nothing else is: at 0 the faces match, the solids flatten, and what is left is a pattern of diamonds. The shading is identical on every cube in the field on purpose, because agreement about where the light is coming from is the only thing telling the eye these are solids.

seed 5

0 to 999

Which cubes take which colour. Changes nothing else.

period 16

6 to 60 s, good: 12 to 30

Seconds for one turn of the light. The loop closes exactly on it, because a whole turn of the light is the same light.

What it needs

Category

Backdrops, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~0.2 ms · 1 context

Pinned to

v0.14.0

• The three internal edges of a hexagon are rays from its centre, not lines through it. A line at one of those angles also passes through the opposite vertex, so measuring distance to lines draws six spokes and splits each rhombus into two triangles. Behind the ray the nearest point on it is the centre, so the distance there is the length.
• A hexagonal lattice is two rectangular lattices offset by half a cell, so the nearest centre is found by measuring against both and keeping the closer. No trigonometry and no loop.
• fwidth measures one pixel in lattice units, which keeps the line the same weight at every cell count and every rotation.
• One hash, one atan, a three-step loop over the spokes and a smoothstep per pixel. Measured with pnpm gputime rather than by timing the draw call.

Concept credit: The parameter set, and the choice of a rhombille tiling read as cubes. Their IsometricCubes names cells, thickness, rotation, softness and a per-cube colour variation, which is the right set. The tiling is a rhombille and the illusion is older than photography. The code here is this repo's own., by Shader Effects Inc.. The implementation here is written from scratch.