Painting Between the Pixels

In the 1980s and 90s, hardware limitations were strict. An Amiga 500 in standard mode displayed 32 colors. A VGA card in Mode 13h displayed 256. Yet, artists needed to depict photorealistic skies, metallic robots, and human faces—subjects requiring thousands of subtle shades.

The solution was Dithering: the strategic arrangement of pixels of two existing colors to create the illusion of a third, non-existent color.

The Science of Optical Mixing

Dithering relies on the human eye’s inability to resolve individual pixels at a distance (or on a fuzzy monitor). If you place a red pixel next to a yellow pixel, the eye averages them into orange. This is similar to the Pointillism technique used by painters like Seurat, or the halftone dots used in newspaper printing.

The Mathematics of Perception

The perceived color $C_{p}$ is the weighted average of the two mixed colors $C_1$ and $C_2$:

$$ C_{p} = \frac{N_1 \cdot C_1 + N_2 \cdot C_2}{N_1 + N_2} $$

Where $N$ is the number of pixels in a given area. By mixing Black and White in a 50/50 checkerboard, you get 50% Gray. By mixing Black and White in a 25/75 pattern, you get Dark Gray.

Pattern Dithering (Ordered Dithering)

The most common form in early games was Ordered Dithering. This uses a fixed, repeating pattern (usually a 2x2, 4x4, or 8x8 matrix). The “Bayer Matrix” is the standard algorithm for this. A 4x4 Bayer matrix looks like this:

 0  8  2 10
12  4 14  6
 3 11  1  9
15  7 13  5

When converting an image, the algorithm compares the brightness of the source pixel (0-15) to the number in the matrix.

If Brightness > MatrixValue, plot a Light Pixel.
If Brightness <= MatrixValue, plot a Dark Pixel.

This creates the distinctive “crosshatch” look seen in GameBoy games, early Macintosh software, and EGA adventures like King’s Quest.

Error Diffusion (Floyd-Steinberg)

Ordered dithering is fast, but it looks “computer-generated.” For scanned photos, developers used Error Diffusion. The most famous algorithm is Floyd-Steinberg (1976).

The concept is brilliant:

Look at a pixel.
Find the closest matching color in the limited palette.
Calculate the “Error” (Difference between wanted color and picked color).
Push this error onto the neighboring pixels that haven’t been drawn yet.

The error is distributed as follows:

7/16 to the pixel Right.
3/16 to the pixel Below-Left.
5/16 to the pixel Below.
1/16 to the pixel Below-Right.

This “smears” the error around, creating a noisy, organic grain that preserves details much better than patterns.

The CRT Factor

Modern emulators often make dithering look harsh. This is because modern LCD pixels are perfectly square and sharp. On an old CRT (Cathode Ray Tube) monitor, pixels were not square dots. They were glowing blobs of phosphor.

Bloom: Bright pixels would bleed into dark neighbors.
Shadow Mask: The physical mesh of the screen softened edges.
Scanlines: The black gaps between lines broke up vertical patterns.

Artists knew this. They designed their dithering patterns specifically to exploit the “fuzziness” of a CRT. A checkerboard pattern on a CRT didn’t look like checks; it looked like a flat, solid color. This is why “waterfall” effects in games like Sonic the Hedgehog look transparent on a TV but like striped bars on an emulator.

Hardware Support: The Amiga HAM Mode

The Amiga had a unique hardware trick called HAM (Hold-And-Modify). It wasn’t dithering in the algorithmic sense, but it solved the same problem. It allowed 4,096 colors by modifying only one RGB component at a time. However, because you could only change Red, Green, OR Blue (not all three), creating a sharp transition from Red ($F00) to Blue ($00F) took two pixels steps. Artists used dithering to mask these “HAM fringes,” blending the transition so the color artifacts weren’t noticeable.

Dithering as an Aesthetic

Today, 32-bit color (billions of shades) is the standard. Dithering is no longer a necessity. Yet, the technique has returned as an artistic style. It represents a “texture” of digital history—a reminder of a time when programmers hacked the human eye to see colors that weren’t there.

Technical Modules

Technical Demo: Metaballs - The smooth gradients of metaballs were often dithered in real-time on slower 16-bit machines.
Technical Demo: Plasma - Plasma effects often used palette limitations to create banding, which dithering would attempt to smooth.

Source & Further Reading

“Dithering: The Art of the Pixel” by PixelJoint: A community guide to hand-made dithering patterns.
Wikipedia: Floyd-Steinberg Dithering: The mathematical foundation of error diffusion.
“Return of the Obra Dinn” Devlog: Lucas Pope explains his custom dithering algorithms for high-contrast 3D rendering.
“Depicting the World in 1-Bit”: An analysis of dithering in early Macintosh art.