Dither engine guide

Overview

Dither engine redraws a picture as dots of one colour, and lets you push the dots around.

White dots on black forming a round glow, thick in the middle and thinning to single dots at the edge, with a dark box below
The sample with Invert off and white circles at Dot size 3: the dots mark its bright glow.

The dots and the background are only two colours, so the tones in between have to be faked. That is dithering: from a step back, how close the dots sit reads as light or dark.

First the picture is shrunk to a grid, and each cell becomes a grey value, its luminance. Then each cell is turned on or off.

Floyd-Steinberg, Atkinson and Stucki round each cell to on or off and pass the rounding error on to the cells not yet drawn. That is error diffusion.

Bayer and blue noise compare each cell with a fixed pattern of thresholds instead. That is ordered dithering; Bayer uses a Bayer matrix and blue noise uses a blue noise pattern.

Every dot is also a small moving part. Move a mouse over them and they move away; click or tap and a shockwave rolls out. They spring back to their places.

Open Dither engine Start here

In this guide

  1. StartWhat you need, your first picture, and the mouse and touch moves.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree pictures and the settings that made them.
  4. Keep your workThe PNG, the SVG, the copy, and how they differ.
  5. HelpWhat to do when something goes wrong.

It runs in your browser on a 2D canvas. It needs no WebGL, and nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.