Dither engine guide
Every control
Every control in the panel, top to bottom. Interaction and Shockwave show only in the Advanced view. Shockwave, Appearance and Export start closed; tap their titles to open them.
Load and save
They stay at the top while the panel scrolls. Your pictures stay on this device for every lab tool until you press × on a tile; Reset puts the controls back and leaves them.
- Image AButton
- Your picture. Press it to open one from your device, or drop one on the frame; two at once fill A and B. It is kept on this device, never uploaded, and every lab tool that takes a picture opens with it until you press × on its corner.
- SwapButton
- Changes which tile Dither engine uses, so a picture you added as B in another tool can be used here. When the other tile is empty, the sample comes back.
- Image BButton
- A second kept picture. Dither engine dithers one picture at a time: the tile it is not using is dimmed and says Not used here, and pressing it only says so.
- Try with sampleButton
- Loads the sample picture again, in place of yours.
- Save PNGButton
- Saves the frame as you see it, background and all, as dither-engine.png. See PNG.
- Record videoButton
- Records one sweep, frame by frame, and saves it as dither-engine.mp4 (H.264, so it plays anywhere); a browser that cannot write MP4 gets a WebM. Sweep starts by itself if it was not running, and stops after. See MP4 and WebM.
- Save SVGButton
- Saves the dots as shapes, at their resting places, as dither-engine.svg. See SVG.
- CopyButton
- Copies the same picture as Save PNG to the clipboard. See clipboard.
Image
A line shows how many dots there are, how many frames a second are drawn, and the size of the dot grid.
View
- Simple · AdvancedPick one
- How much of the panel shows.
- Simple: Hides Interaction and Shockwave. The page opens here.
- Advanced: Shows Interaction and Shockwave as well.
Algorithm
- Floyd-Steinberg · Bayer · Blue noise · Atkinson · StuckiPick one
- How each cell of the grid is turned into a dot or no dot. See dithering.
- Floyd-Steinberg: Passes each cell's rounding error on to four neighbours, in sixteenths. Fine, even grain. The page opens here. See Floyd–Steinberg.
- Bayer: Compares each cell with a repeating 8 × 8 grid of thresholds, which gives a regular crosshatch. See Bayer matrix.
- Blue noise: Compares each cell with a scattered pattern of thresholds, the same on every visit, for an even grain without a grid. See blue noise.
- Atkinson: Passes on only three quarters of the error, over six neighbours, so darks and lights come out crisper. See Atkinson dithering.
- Stucki: Spreads the error over twelve neighbours, for softer shading. See Stucki dithering.
- ScaleSlider · 0.1 to 2 · starts at 0.4
- How many cells the grid has: at 0.40 the long side of the picture has 234 cells, and at 2 it has 1,171. More cells give more detail, more dots and slower drawing. Phones stop at 300 cells.
- Dot sizeSlider · 0.5 to 8 · starts at 1
- How big each dot is, in screen pixels. The dots are spaced the same distance apart, so this also sets how big the whole picture is on the frame. A picture bigger than the frame is cut off. See dot size.
- Dot shapeChoice
- Draws each dot as a square, a circle or a diamond. See dot shape.
- InvertOn or off · starts on
- On, as the page opens: dots mark the dark parts. Off: dots mark the bright parts. See invert.
Image processing
- ThresholdSlider · 0 to 255 · starts at 181
- The grey level between on and off. For the error diffusion methods it is the cut-off, nudged a little from cell to cell so flat areas do not fall into rows; for Bayer and blue noise it shifts the whole pattern. With Invert on, a higher value gives more dots. See threshold.
- ContrastSlider · -100 to 100 · starts at 0
- Spreads the grey values apart, or pulls them together, before dithering. See contrast.
- GammaSlider · 0.1 to 3 · starts at 1
- Bends the middle greys. Above 1 they get lighter; below 1, darker. Black and white stay put. See gamma.
- BlurSlider · 0 to 20 · starts at 3.75
- Softens the picture before dithering, so small detail and hard edges melt. At 0 the picture stays sharp. See Gaussian blur.
- HighlightsSlider · 0 to 1 · starts at 0
- Pulls the brightest greys down towards the middle. At 1 everything brighter than a light grey is flattened to that grey. See highlights.
- BrightnessSlider · -50 to 50 · starts at 0
- Makes the whole picture lighter or darker before dithering.
Dither parameters
Error strength and Serpentine change only the error diffusion methods.
- Error strengthSlider · 0 to 2 · starts at 1
- How much of each rounding error is passed on. Below 1 the flat areas get cleaner; above 1 the error overshoots and the grain gets busier. Bayer and blue noise ignore it. See error strength.
- SerpentineOn or off · starts on
- Walks every other row right to left, so the error does not drift one way. Only Floyd-Steinberg uses it. See serpentine scan.
- Corner radiusSlider · 0 to 0.5 · starts at 0.28
- Rounds the corners of the dotted area; dots outside the curve are dropped. At 0.50 each corner's curve is a quarter of the short side. It works with Invert on or off.
- Noise amountSlider · 0 to 50 · starts at 0
- Adds a little random jitter to each grey value before dithering, which breaks up patterns. It changes each time the picture is redrawn. See noise.
Interaction
Shows when View is on Advanced. These settings change how the dots move under a mouse or a finger. The sliders glide to a new value instead of jumping.
- Push radiusSlider · 30 to 250 · starts at 100
- How far from the pointer or finger the push reaches, in pixels. The push is strongest at the middle and fades fast towards the edge. See push radius.
- Push forceSlider · 5 to 80 · starts at 40
- How hard the dots are pushed. The shockwave uses it too. See falloff.
- EasingSlider · 0.04 to 0.3 · starts at 0.12
- How quickly the dots move. Low is slow and floaty; high is quick and snappy. It sets both the push and the pull back home. See easing.
- Snap thresholdSlider · 0.01 to 0.1 · starts at 0.01
- How close to home, in pixels, a dot must drift before it is put back exactly. When every dot is home and the pointer is gone, drawing stops until you move again.
Shockwave (click or tap)
Shows when View is on Advanced. A click or a tap on the frame sends a ring out from that spot, and the dots in the ring are pushed outward, whatever the Interact mode. The sliders glide to a new value.
- SpeedSlider · 50 to 500 · starts at 225
- How fast the ring grows, in pixels a second.
- Band widthSlider · 10 to 100 · starts at 37
- How thick the ring is, in pixels.
- DurationSlider · 200 to 2000 · starts at 675
- How long the ring lasts, in milliseconds. It fades as it goes.
- StrengthSlider · 0.5 to 5 · starts at 1.5
- How hard the ring pushes, as a multiple of Push force.
Appearance
- Dot colorChoice
- The colour of the dots: Gray, White, Mint, Custom, or Sampled from image. Sampled takes the colours from the picture: dots of a close colour share the average colour of their group, in any Dot shape. See sampled colour.
- Custom colorColour · starts #8A8F98
- Shows when Dot color is Custom. Pick any colour; the hex value is shown beside it.
- BackgroundChoice
- The colour behind the dots: Dark, White or Custom.
- Background colorColour · starts #08080A
- Shows when Background is Custom. Pick any colour; the hex value is shown beside it.
- OpacitySlider · 0.3 to 1 · starts at 1
- How solid the dots are, from 0.30 to 1. See alpha.
Sweep
Space presses Sweep, the lab's one keyboard. See loop.
- SweepButton
- Starts and stops the sweep: the threshold breathes around the value you set, a smooth wave, and returns to it when you stop. See sine wave and easing.
- Seconds a cycleSlider · 1 to 12 · starts at 4
- How long one breath takes, in seconds. Record video keeps exactly one, so the clip loops. See loop.
- WidthSlider · 10 to 100 · starts at 60
- How far the slider travels from end to end, as a share of its whole range, centred on your value. 100 swings the whole way.
Reset
- ResetButton
- Puts every setting back to how the page opened, and returns to the Simple view.