VoronoiCells

Options

near #2440d8

css colour

Cell colour at the near end of the ramp.

mid #fc02dd

css colour

Cell colour through the middle. Between two colours a ramp gives one hue and a tint of it; passing through a third is what makes a field of flat cells read as lit from somewhere.

far #ffc2f0

css colour

Cell colour at the far end.

edge #06040c

css colour

The borders between cells. Near-black with a little of the cell hue still in it, because a true black line across a saturated cell reads as a gap rather than as an edge.

cells 7

2 to 30, good: 5 to 12

Cells across the short edge. Few and large reads as stained glass; past about twenty the borders are closer together than the cells are wide and it becomes a texture.

wobble 0.34

0 to 0.49, good: 0.2 to 0.42

How far each site drifts from the middle of its own cell, in cell widths. Capped just under a half on purpose: a site that crosses into its neighbour cell breaks the nine-cell search and the field tears along the lattice. At 0 nothing moves, which costs nothing to draw and is a legitimate way to use it.

thickness 0.055

0 to 0.3, good: 0.02 to 0.1

Border width, in lattice units. At 0 there are no borders and the cells are held apart by colour alone, which is quieter and entirely usable.

softness 0.18

0 to 1

Softness of the border, on top of the one pixel of antialiasing that is always there. A little helps more here than on a straight line, because a Voronoi border meets its neighbours at angles that are never the same twice.

depth 0.22

0 to 0.6, good: 0.1 to 0.35

How much a cell darkens away from its own site. Just enough that a large cell does not read as a flat sticker; past about 0.4 it is a gradient competing with the borders for attention.

seed 4

0 to 999

Where every site sits and which cell takes which colour. Every value is a different field and none is better than another.

period 24

6 to 90 s, good: 16 to 40

Seconds for one circuit of the sites. The loop closes exactly on it, because each site completes a whole turn of its own small circle in that time.

What it needs

Category

Backdrops, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~0.2 ms · 1 context

Pinned to

v0.13.0

• Nine cells is the whole search. Each site is jittered inside its own lattice cell and capped so it can never leave, so the nearest site to a pixel is in that pixel cell or one of the eight around it: nine hashes and nine distances, no list, no sorting and no texture.
• The borders come from the second nearest site. Halfway between two sites the two distances are equal, so their difference goes to zero at the boundary, which is a usable distance to the edge for nothing. It is slightly wrong where three cells meet, by an amount nobody has noticed.
• The wobble radius is capped just under a half. A site that crosses into its neighbour cell breaks the assumption the three by three search rests on, and the field tears along the lattice.
• Nine hashes, nine distances and a smoothstep per pixel, with no loop over anything but the fixed three by three. Measured with pnpm gputime, which asks the GPU rather than timing the draw call.

Concept credit: The parameter set and the pair of colours. Their Voronoi names two cell colours, a border, a scale, a seed and an edge intensity and softness, which is the right set, and the blue and magenta are theirs: far enough apart in hue to separate every cell from its neighbours without either reading as a highlight. The tessellation is Georgy Voronoy from 1908. The code here is this repo own., by Shader Effects Inc.. The implementation here is written from scratch.