hr-studioPatterns & Tiling · 02
A computational design primer · Voronoi & Delaunay

Carved by nearness.

Scatter a handful of points and ask a simple question of every other spot in the plane — which point are you closest to? The answer slices space into cells, one per point. It's the pattern of cracked mud, giraffe hide, soap froth, and cell walls — and it comes from nothing but distance.

Scroll to begin
i.

The nearest-point rule

Plant a few sites. Every location in the plane belongs to whichever site is closest — colour each by its owner and the space falls into cells. That's a Voronoi diagram, complete.

Move your cursor and a line snaps to its nearest site. Drag any site and watch its territory swell or starve as the walls re-settle.

Drag the sites
move & drag
ii.

Walls of equal distance

Why are the cells straight-edged? Between any two sites, the dividing wall is the set of points exactly equidistant from both — the perpendicular bisector. Where three walls meet sits a point equidistant from three sites at once: the centre of a circle through all three.

Drag the three sites. The circle always passes through them, and its centre is a corner of the diagram.

Equidistant — the empty circle
iii.

The hidden dual: Delaunay

Connect every pair of sites whose cells share a wall and a triangulation appears — the Delaunay, the Voronoi's twin. It has a magic property: the circle through any triangle's three corners is empty — no other site inside.

That's why Delaunay makes the "roundest" triangles possible, which is exactly why mesh-makers prize it. Toggle the two structures and watch a circumcircle sweep the field, always empty.

Voronoi ⟷ Delaunay
iv.

Distance is a choice

"Closest" assumed straight-line distance. Change the ruler and the whole pattern changes. Manhattan distance — blocks walked, not crow-flown — bends the walls into steps and diamonds. Chebyshev squares them off.

Same sites, same rule, different metric. This is the doorway to distance fields, two chapters on. Switch the ruler.

The metric reshapes the cells
v.

Lloyd's relaxation

Random sites give lopsided, jagged cells. So nudge each site to the centre of its own cell, recompute, and repeat. The diagram breathes — clumps spread, slivers fatten — and settles into an even, organic honeycomb. This single loop is how designers turn noise into the soft, blue-noise cell textures you see everywhere. Let it relax.

Centroidal Voronoi · living tessellation
One question — who is nearest? — and the plane organises itself into territory, structure, and mesh. Distance, it turns out, is enough to build a world from.