Voronoi Stippling

Watch the canvas while it runs: thousands of dots are rearranging themselves, and the picture comes into focus. Nobody tells any dot where to go. Each one follows the same small rule, over and over.

Start with a random scatter

First, scatter the dots at random, but not evenly: more of them where the picture is bright. (In the reel, dots were light on a dark background, so brightness is where the dots belong.)

The picture is already there, but it looks grainy: clumps here, gaps there. Random placement has no reason to keep dots apart, so some crowd together and others leave holes.

Give every pixel to its nearest dot

Next, every pixel of the image is given to the nearest dot. Each dot now owns a region: all the pixels that are closer to it than to any other dot. That region is called a Voronoi cell, and together the cells tile the whole picture like a mosaic of irregular polygons.

Move each dot to the center of its cell

Then each dot moves to the center of its cell. Not the plain geometric center, though: a weighted center, where bright pixels pull harder than dark ones. A dot whose cell has a bright patch on one side drifts toward that patch.

After the move, the cells are out of date, so recompute them and move again. Repeat.

Over many rounds, something nice happens. Bright areas end up with small, crowded cells, because the bright pixels keep pulling dots in. Dark areas get big cells, so dots spread out there. Clumps dissolve and gaps close, because a dot in a crowd owns only a tiny cell and gets pulled toward the empty space next door.

In the reel’s run, after three hundred rounds, no dot moved more than a fifth of a pixel. The arrangement had settled.

The limit: dots can’t jump

A dot only ever moves within its own cell. It never jumps across the picture. So the starting scatter matters.

The reel tested this. Starting the dots evenly instead, many of them got stuck in the dark background: after 300 rounds, 71% of the dots were still in dark areas, compared with 21% for the brightness-weighted start. That is why the algorithm starts with more dots where the picture is bright.

Who came up with this

The repeating “assign to nearest, move to center” step is Lloyd’s algorithm, a classic method for spreading points out evenly. Weighting it by brightness to make stipple drawings was introduced by Adrian Secord in 2002, in a paper called Weighted Voronoi Stippling.

No dot knows the picture. Each one only knows its own little cell.

What the controls change

• Dots sets how many dots draw the picture, from 100 to 20,000, on a log scale. Fewer dots look like a bold, graphic print; more dots reveal fine detail but take longer to settle. The reel used 4,000.
• Iterations sets how many rounds of “assign pixels, move to the center” run, from 1 to 200. With only one or two, much of the random grain is still visible. As the count grows, clumps dissolve and the spacing turns calm and even, the look of hand stippling. The reel ran 300 rounds; most of the visible change happens in the first few dozen.
• Dot size sets the radius of each drawn dot, from a quarter of a pixel to 3 pixels. It changes only how the dots are drawn (in the image and the SVG), not where they go. Bigger dots fill in more of the picture and make sparse areas read better; smaller ones look finer.

One honest shortcut: above 4,000 dots or 50 iterations, the browser computes the cells on a brightness grid of at most 256 pixels and maps the dots back to full size. That keeps big runs fast; the reel-sized settings use the full image.

The label on the canvas shows the current round, so you can watch the movement settle.

Export as SVG

The result is a list of dot positions, so it can be saved as an SVG file. It stays sharp at any print size, and pen plotters can draw it dot by dot.

Try this

• Pick a photo with a strong light subject on a dark background, like a lit face at night, the moon, or a candle. That gives the dots a clear place to gather.
• Save the process clip. The slow settling from grainy to calm is the most satisfying part, and it plays exactly like the reel.
• Compare with the original in the split view. Notice how dot spacing, not dot size, carries every shade.

Your photo is processed on your own device. Nothing is uploaded.