Pixel Magic: The Dithering Effect
How do games and images fake millions of colors with just a few?
How do games and images fake millions of colors with just a few?
When you only have a few colors, gradients look like ugly stairs. This is called "banding."
With only 4 colors, you can only show 4 shades. Everything in between gets rounded to the nearest color.
How can we make the left look more like the right... without using more colors?
The original Game Boy could only display 4 shades of green, yet artists made beautiful games!
A magic grid of numbers tells each pixel whether to round up or down. This creates a pattern that fools your eye!
This is a 4x4 Bayer matrix. Higher numbers = more likely to use the lighter color.
At each pixel, compare the desired brightness to the matrix value. If higher, use light color. If lower, use dark.
The repeating pattern creates zones of mixed pixels that your eye blends together into intermediate shades.
Floyd-Steinberg dithering spreads the "error" from rounding to neighboring pixels. The result looks more organic!
Watch how errors flow to the right and down, creating an organic pattern.
When you round a color, the difference between what you wanted and what you got is the "error."
That error gets distributed: 7/16 right, 3/16 down-left, 5/16 down, 1/16 down-right.
Floyd-Steinberg was invented in 1976 and is still used today in image processing software!
Pixel artists hand-craft dithering patterns for stylized shading. Each pattern has its own character!
Click different patterns to see how they create different moods and textures.
The classic 50/50 mix. Creates a perfect middle tone between two colors.
Mimics traditional pen-and-ink shading. Great for a hand-drawn look.
Random-ish dots create a grainy, textured appearance. Used in comics!
From retro games to GIFs to newspaper printing, dithering is everywhere!
4 shades of green, endless creativity
Limited palettes per sprite
Max 256 colors, needs dithering
Halftone dots = analog dithering
Pixel art games use dithering for that authentic retro feel. It's an art form!
Your brain naturally blends nearby colors together. Dithering exploits this!
The word "dither" originally meant "to tremble" - because the pixels tremble between two colors!
You now understand how dithering creates the illusion of more colors using patterns, matrices, and error diffusion.
Limited colors create visible steps called "banding" in gradients.
A threshold matrix decides which color to use at each pixel position.
Floyd-Steinberg spreads rounding errors to neighboring pixels for organic results.
Hand-crafted patterns like checkerboard and crosshatch create stylized shading.
Old games and GIFs used dithering to display more colors than hardware allowed.
Put your new knowledge into practice!