Voronoi cells
Split a surface into irregular cells around scattered points, and use the distances and cell ids to draw them.
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 diagramA split of the plane into one region per seed point, where every spot belongs to the point nearest to it. The borders lie where two points are equally near. Voronoi diagram A split of the plane into one region per seed point, where every spot belongs to the point nearest to it. The borders lie where two points are equally near.
Cellular noise computes it per pixel. It places one point in each grid cell, at a random offset from a
hashA function that scrambles its input into a value that looks random but is always the same for the same input. Shaders use it for per-pixel and per-cell randomness. Hash A function that scrambles its input into a value that looks random but is always the same for the same input. Shaders use it for per-pixel and per-cell randomness.h = fract(sin(dot(p, k)) × big), 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
smoothstepA soft threshold. It is 0 below the first edge, 1 above the second, and follows an S-shaped curve with flat ends in between.Fundamental
Smoothstep
A soft threshold. It is 0 below the first edge, 1 above the second, and follows an S-shaped curve with flat ends in between.
t = clamp((x − e0) / (e1 − e0), 0, 1); s = t² (3 − 2t)Sourceson it draws walls, cracks and lead lines.- smoothstep (opens in a new tab)Reference
- Smoothstep (opens in a new tab)Reference
- 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
- Cellular noise (opens in a new tab)Book
- Worley noise (opens in a new tab)Reference
- Voronoi edges (opens in a new tab)Article
- Voronoi diagram (opens in a new tab)Reference
- Came glasswork (opens in a new tab)Reference
- length (opens in a new tab)Reference
- smoothstep (opens in a new tab)Reference
- FastNoiseLite (opens in a new tab)Docs
- NoiseTexture2D (opens in a new tab)Docs
- CanvasItem shaders (opens in a new tab)Docs