Dither Lab
Ordered dithering on the site's own surfaces: a few flat tones that read as smooth, and the pattern that does it.
Bayer 4: each cell is compared with its own threshold from a 4 by 4 pattern, so the bands dissolve into texture.
Move a pointer across the picture to carry a soft light over it.
The concept
A picture with only three tones normally turns into bands. Ordered dithering avoids that by giving every cell its own threshold, taken from a small repeating pattern laid over the whole picture. A cell that is almost the next tone up rounds up if its threshold is low and down if it is high, so neighbours disagree on purpose, and from a little distance the eye averages them back into the tone that was asked for.
Pick a surface, a pattern and a number of tones. With a plain threshold you see the bands. With a Bayer pattern you see texture instead. The pointer carries a soft light across the picture, so the rounding can be watched while the values under it change. It is the technique behind pixel art on screens that could only show a few colours.
Under the hood
The pattern
A Bayer matrix is built by doubling. Start with a 2 by 2 square of 0, 2, 3 and 1, and replace every entry with four, laid out in the same order, until the matrix is as big as you want. Each entry becomes a threshold between 0 and 1. The recursion is a dozen lines, and a test checks that every threshold appears exactly once.
The rounding
A value is scaled to the number of tones and split into the whole tone below it and a fraction toward the next. The fraction is compared with the cell's own threshold. With no matrix the threshold is always one half, which is a plain round, and is what produces the bands.
const fraction = (value * (levels - 1)) % 1;
return fraction > matrix[y % size][x % size] ? low + 1 : low;What it costs
The picture is about 9,400 cells, drawn as filled squares on one canvas. It is redrawn only when a control changes or the pointer moves, one frame at a time, so it sits idle the rest of the time.