HomeGenerative Art & Algorithmic PatternsLloyd's Relaxation

⚪ Lloyd's Relaxation

Interactive Lloyd's algorithm: watch random Voronoi seeds glide to centroids and converge to a uniform centroidal Voronoi tessellation in your browser.

Generative Art & Algorithmic Patterns3DModerate60 FPS
lloyd-relaxation ↗ Open standalone

About this simulation

This simulation shows Lloyd's relaxation algorithm transforming a random scatter of seed points into a centroidal Voronoi tessellation. Each frame it partitions the canvas into a Voronoi diagram — every pixel is assigned to its nearest seed — then moves each seed toward the density-weighted centroid of its own cell. Repeating this step over and over drives the layout toward a state where every cell's centroid coincides with its seed, producing the uniform, roughly hexagonal packing that gives the algorithm its many uses in mesh generation, stippling and point-distribution art. A running energy term E = Σ ρ·|x − c|² tracks convergence and should decrease monotonically as the system relaxes.

🔬 What it shows

A pixel-painted Voronoi diagram of up to 400 seed points, recomputed every step by finding each pixel's nearest seed. From that diagram the algorithm sums up each cell's pixels (optionally weighted by a density field) to get its centroid, then blends every seed 85% of the way toward that centroid. The live stats track iteration count, total energy E, mean cell area and the area standard deviation — a falling std-dev is the clearest sign the tessellation is becoming uniform.

🎮 How to use

Drag Seed points (20–400) to change how many cells relax, and pick a Density mode — Uniform, Radial (denser at centre), Gradient (denser on the left) or Paint your own, where you brush density directly onto the canvas. Iterations/sec controls animation speed, Step/Auto/Pause/Reset give manual control over the relaxation loop, and the Display checkboxes toggle filled cells, a Delaunay overlay (the dual graph of adjacent cells) and seed dots; Cell colour can shade by index, by area, or show plain outlines.

💡 Did you know?

Lloyd's algorithm was originally devised by Stuart Lloyd at Bell Labs in 1957 for optimal scalar quantization in pulse-code modulation, not for graphics — its use for generating evenly spaced point sets and blue-noise textures came decades later. The same iterate-Voronoi-then-recentre idea underlies k-means clustering, which is essentially Lloyd's algorithm applied to cluster assignment instead of spatial pixels.

Frequently asked questions

What is a Voronoi diagram?

A Voronoi diagram partitions a plane into regions, one per seed point, where every location in a region is closer to that region's seed than to any other seed. In this simulation the partition is computed directly on pixels: for every point on the canvas the algorithm finds the nearest seed by brute-force distance comparison and colours that pixel accordingly, building the diagram up as a pixel-owner grid rather than as explicit polygon edges.

What does Lloyd's relaxation actually do to the seeds?

Each step it computes the current Voronoi diagram, finds the centroid (density-weighted centre of mass) of every cell, and moves each seed 85% of the way from its current position toward that centroid rather than jumping straight there. Doing this repeatedly is a form of gradient descent on the quantization energy E = Σ ρ·|x − c|², so the seeds gradually settle into positions where they already sit at their own cells' centroids.

What is a centroidal Voronoi tessellation and why does it look so uniform?

A centroidal Voronoi tessellation (CVT) is the fixed point of Lloyd's algorithm: a partition where every seed is exactly the centroid of its own Voronoi cell. At that state there is no more net force pulling seeds around, and the energy stops decreasing. CVTs tend toward cells of similar size and roughly hexagonal shape because that configuration locally minimises the quantization energy for a uniform density.

What do the density modes change?

The density field ρ(x,y) weights how much each pixel contributes when a cell's centroid is computed. Under Uniform density every pixel counts equally and cells converge to equal areas; under Radial or Gradient density, pixels in denser regions pull centroids toward themselves harder, so converged cells are smaller and more numerous where density is high. Paint mode lets you draw an arbitrary density field with the mouse, which is read back from an offscreen canvas each time the grid is rebuilt.

Why does the energy value keep dropping and then plateau?

The energy E = Σ ρ·|x − c|² measures the total (density-weighted) squared distance from every pixel to its seed. Because each Lloyd step moves seeds toward their cells' centroids — the points that minimise exactly this sum for a fixed partition — every step can only decrease or maintain E, never increase it. As the tessellation approaches a centroidal Voronoi tessellation the improvements shrink and the energy curve flattens out, which is visible in the on-canvas energy plot.

⚙ Under the hood

Move each point to the centroid of its Voronoi cell and repeat — points drift into a centroidal Voronoi tessellation, beautifully uniform and hexagonal-tending. Energy E falls monotonically.

Canvas 2DVoronoiLloyd's AlgorithmCentroidalRelaxation

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

What did you find?

Add reproduction steps (optional)