Skip to content
Pattern · TechniqueIntermediate

Voronoi cells

Split a surface into irregular cells around scattered points, and use the distances and cell ids to draw them.

UVSurface

Cards

One live example to tweak, learn and copy.

How it works

Scatter points over a surface and give every spot to the point nearest to it. The regions that come out form a Voronoi diagram: irregular, convex cells that tile the plane with no gaps, like dried mud, giraffe skin, foam, cracked paint or the panes of a church window.

Cellular noise computes it per pixel. It places one point in each grid cell, at a random offset from a hash, and searches the pixel’s cell and its eight neighbors. That search returns three useful things, and each Voronoi look is a choice among them:

  • F1, the distance to the nearest point: round bumps, scales and bubbles.
  • F2 − F1, the second-nearest distance minus the nearest: zero on the borders, so a smoothstep on it draws walls, cracks and lead lines.
  • The cell id, which point won: a flat value per region, for random colors, heights or materials per cell.

The pattern works in UV space on a quad or a mesh, and the same search in three dimensions (27 cells) works on world position, so a mesh without good UVs still gets seamless cells.

Every engine that ships Voronoi computes something a little different (another jitter, another distance metric, another range for the result), so a look tuned in one doesn’t carry over by copying numbers. The platform guides say what each one gives you.

Further reading