All studies

Weighted Voronoi relaxation

Weighted stippling

Reconstruct a spiral shell with 8,000 ink dots, or explore up to 20,000. Darker regions attract more points; weighted relaxation distributes them along the shell’s changing tones.

JavaScript · Canvas · Web Workers · Weighted Voronoi relaxation

View source on GitHub

Try it

Runs locally in your browser. Uploaded images stay on your device.

Image uploads are resized to a 512px preview.

Start with 8,000 dots or raise the count to 20,000 for finer detail. Download SVG to inspect individual dots at any scale.

Source image
Source image
Precomputed Weighted stippling example
Example · update to make your own

Ready when you are.

Worker processing · local inputs · downloadable output

How it works

Start with 8,000 dots or raise the count to 20,000 for finer detail. Download SVG to inspect individual dots at any scale.

The shell’s ridges and shaded spiral are represented by the spacing and area of individual dots. Dark areas receive more points and ink; light areas leave more paper visible. The output is a set of marks that can be inspected in an SVG export.

  1. Sample an initial point distribution according to image darkness.
  2. Assign image samples to their nearest point, forming Voronoi cells with squared-darkness centroid weights.
  3. Move points toward weighted centroids and size each ink circle from its cell’s local darkness; repeat to refine.

Read the original research
Adrian Secord · 2002

Computed examples

Outputs from the same implementation used in the playground.

Spiral shell photograph · generated input
Weighted relaxation · 8,000 individually positioned ink dots

Source photographs were generated for these studies. The displayed results were computed by the algorithms; they are not generated illustrations of an expected result. Published previews are compressed for the web.

Implementation and limits

Raster-sampled weighted Lloyd relaxation with exact nearest-site queries. This is a bounded preview, not an analytic continuous Voronoi integration.

Interactive settings are bounded to keep the experiment practical in a browser. Higher detail can cost more processing time without guaranteeing a better result. The implementation and its tests are available in the source repository.

The relaxation uses squared-darkness centroid weights, while each circle’s area follows its cell’s local tone. This keeps dark photographs from washing out into an even gray field. Start with 8,000 dots or increase to 20,000; SVG exports retain the individual circles at any scale.