Home▸Generative Art & Algorithmic Patterns▸Voronoi Growth

🔶 Voronoi Growth

Generate Voronoi and Johnson-Mehl-Avrami growth patterns. Watch seed points nucleate and grow into a crystalline mosaic, switch distance metrics, run Lloyd relaxation, and export PNG art.

Generative Art & Algorithmic Patterns3DModerate60 FPS

About this simulation

This simulation nucleates seed points on a canvas and grows them outward at constant speed until every pixel belongs to whichever seed reached it first — the same process that shapes real crystal grains and gives Worley noise its cellular look. Switch between simultaneous growth (a classic Voronoi diagram with straight cell walls) and sequential nucleation (Johnson-Mehl-Avrami, where earlier seeds claim more territory and boundaries curve into hyperbolic arcs), and try Manhattan or Chebyshev distance to warp the cells into diamonds and squares.

🔬 What it shows

Coloured cells expanding from seed points until their growing boundaries meet and freeze in place. Straight walls mean every seed started at the same instant (Voronoi); curved walls mean seeds nucleated at different times, so faster-starting grains grabbed more area (Johnson-Mehl-Avrami).

🎮 How to use

Adjust seed count, growth speed, seed jitter and Lloyd relaxation iterations, switch nucleation mode, distance metric and colour scheme, click New seeds to reroll, Save PNG to export, or load a preset (Classic Voronoi, Johnson-Mehl grains, Manhattan blocks, Organic relaxed) to see cells, coverage and boundary length update.

💡 Did you know?

Running Lloyd relaxation repeatedly moves every seed to its own cell's centroid, which gradually turns a random, jagged tiling into the smooth, hexagon-like honeycomb pattern found in soap foam, cork cells and packed circles.

Frequently asked questions

What is a Voronoi diagram?

It's a partition of space into regions, one per seed point, where every location belongs to whichever seed is nearest. Here, "nearest" is computed by simulating all seeds growing outward at the same speed starting at the same time, so the boundaries are straight lines equidistant between neighbouring seeds.

What is Johnson-Mehl-Avrami growth?

It's a model of how crystals actually nucleate in real materials: grains appear at random times, not all at once, and each grows outward at constant speed. A grain that nucleates early has already claimed territory by the time a later grain appears, producing curved (hyperbolic) rather than straight boundaries.

What does the distance metric change?

Euclidean distance produces normal round, straight-edged Voronoi cells. Manhattan (taxicab) distance produces diamond-shaped cells with 45° edges, mimicking a city grid, while Chebyshev distance produces square cells, since it measures the larger of the horizontal or vertical offset.

What does Lloyd relaxation do?

Each iteration moves every seed to the centroid (centre of mass) of its current cell, then recomputes the diagram. Repeating this a few times evens out cell sizes and pulls the pattern toward a regular, hexagon-like tiling instead of a jagged random one.

Why do earlier-nucleating grains end up bigger?

In sequential (Johnson-Mehl) mode, a grain that starts growing sooner has a head start covering territory before its neighbours even appear, so by the time growth finishes it typically occupies more area than grains that nucleated later.

⚙ Under the hood

Crystalline growth patterns from Johnson-Mehl-Avrami nucleation: seeds grow outward into a Voronoi-like mosaic (straight boundaries for simultaneous, curved for sequential nucleation) with three distance metrics and Lloyd relaxation.

Generative ArtVoronoiJohnson-MehlWorley NoiseCrystallisation

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install