Skip to main content
BVDART Logo

Dithering: Creating Illusions with Mathematics

⊘ Deep Dive• 6 min read
ditheringfloyd-steinbergpixel-artcolor-depth
When you have only a handful of colors, clever pixel placement can trick the eye into seeing thousands. A deep dive into error-diffusion dithering and the algorithms behind the illusion.

The Problem: Too Few Colors

Imagine you have a photograph with 16.7 million possible colors, but your display — or your artistic constraint — allows only 16. How do you bridge that gap without losing the essence of the image? This is the fundamental challenge that dithering solves.

Early computer graphics faced this problem constantly. The Commodore 64 had 16 colors. The Game Boy had 4 shades of green. Yet artists and engineers produced images of surprising depth and realism on these machines. Their secret weapon was dithering.

What Is Dithering?

Dithering is the deliberate introduction of noise — carefully calculated noise — to reduce the visual impact of quantization. When you reduce an image from millions of colors to a handful, the transitions between shades become harsh, banded steps. Dithering scatters pixels of available colors in patterns that, at a distance, blend optically into the missing intermediate shades.

This is not random noise. The best dithering algorithms are deterministic and mathematically elegant, distributing quantization error across neighboring pixels in precise ratios.

Ordered Dithering: The Grid Approach

The simplest dithering method uses a threshold matrix — a small grid of values (typically 2×2, 4×4, or 8×8) that defines when a pixel should be rounded up or down. The classic Bayer matrix creates the characteristic cross-hatch pattern visible in retro console graphics.

Ordered dithering is fast — each pixel is processed independently — but the resulting patterns can be visually obvious, especially in gradients. The regularity is both its charm (in pixel art) and its limitation (in photography).

Trade tones for patterns

Target white coverage37.6%
Stored palette0 / 255
Hard threshold: 0.0% white
Hard threshold0.0% whiteMean error: -96.00 / 255
Ordered / Bayer: 37.5% white
Ordered / Bayer37.5% whiteMean error: -0.38 / 255
Floyd–Steinberg: 37.4% white
Floyd–Steinberg37.4% whiteMean error: -0.62 / 255
Seeded random: 36.2% white
Seeded random36.2% whiteMean error: -3.61 / 255
mean = (Nwhite / 1024) × 255All four patches receive the same constant tone. Only two stored values are allowed. Their spatial decisions change both texture and finite-patch average.

Bayer repeats a 4 × 4 threshold tile. Diffusion carries signed error forward and loses some at image borders. The random patch uses a fixed seed, so moving the tone reveals the same underlying random field.

Sweep one gray tone across four binary methods and compare their texture, coverage and mean error. Use any control to take over.

Keep the tone under control while comparing thresholding, an ordered pattern and diffusion. The pattern carries the shades the palette cannot store.

Try it yourself
  1. Move the requested gray level while all patches keep the same two stored colors.
  2. Switch to the distant view and compare texture, white coverage and mean error.

Watch: Hard thresholding loses intermediate tones. Ordered, diffused and seeded-random decisions trade different textures and finite-patch errors for a closer average.

Full guide Open in the Lab

Error Diffusion: Floyd-Steinberg and Beyond

In 1976, Robert Floyd and Louis Steinberg published a deceptively simple algorithm. For each pixel, calculate the quantization error (the difference between the original color and the nearest available color). Then diffuse that error to neighboring pixels that haven't been processed yet, using specific ratios:

7/16 to the right neighbor, 3/16 to the pixel below-left, 5/16 directly below, and 1/16 to below-right. These fractions sum to 1 for a complete stencil. At an image boundary, contributions to neighbors outside the image may be discarded, so global error conservation also depends on boundary handling.

The result is dramatically better than ordered dithering for photographic images. Error diffusion produces organic-looking patterns that follow the natural contours of the image, creating smooth gradients from coarse palettes.

Follow the error to the next pixel

Follow the scan, one decision at a time10 / 48

Black/white cells are committed. Gray cells show the source plus accumulated error; their displayed preview is clipped, while calculations keep signed fractions.

Send the error to future neighbors
Error diffusion stencil and signed contributionse47.957/16+20.983/16+8.995/16+14.991/16+3.00

Faded destinations lie outside the image and receive nothing. The stencil is for a left-to-right scan.

112 + -64.05 = 47.95 → 0
e = 47.95 − 0 = 47.95
Stencil weight total100%
Error lost at border0.00
Deliberately not propagated0.00

Continue the scan to its last pixel; follow signed error into future neighbors. Replay starts a new scan. Use any control to take over.

Step through the signed error sent to four future neighbors. Contributions outside the image are discarded at its boundaries.

Try it yourself
  1. Step to the next pixel and follow source + incoming error → chosen value.
  2. Compare Floyd–Steinberg with Atkinson, then inspect a pixel at the right or bottom border.

Watch: The next decision includes earlier fractional errors. Floyd–Steinberg passes 100% through its stencil; Atkinson passes 75%, and destinations outside the image receive nothing.

Full guide Open in the Lab

Dithering in the Color Cube

When dithering color images, the algorithm works in three dimensions simultaneously. Each pixel has an error in red, green, and blue, and each error component is diffused independently. This means a pixel that's "too red" will cause its neighbors to become slightly less red, creating a balanced average across local regions.

The choice of color palette is just as important as the dithering algorithm. A well-chosen 16-color palette can outperform a poorly chosen 256-color palette, because the error the dithering algorithm must compensate for is smaller in perceptual terms.

Dithering as an Aesthetic Choice

In algorithmic art, dithering is not just a technical necessity — it's a deliberate aesthetic tool. The characteristic texture of dithered images evokes nostalgia for early computing, while the mathematical precision of error diffusion creates patterns that are simultaneously chaotic and orderly.

Many of the artworks in this gallery use dithering as a final compositing step, reducing high-color renders to restricted palettes. The result is images where every single pixel matters — where the viewer can zoom in and find deliberate, calculated placement at every level.

Try It Yourself

In the Lab, open the Dither effects to compare Floyd–Steinberg, ordered dithering and other methods on an imported image or generated noise. Use Indexed palette when you need a fixed total number of colors; the dithering controls describe levels per channel.

Related Concepts

Related Articles

Related Artworks

Explore Related Sections

More about the work: