Halftone by Hand

A screen has a fixed grid and a fixed set of inks. A photograph has neither. Halftoning is the arithmetic that gets one into the other, and it is older than every screen in this room — newspapers were printing photographs this way in the 1880s.

The oldest version spends area. Cut the image into cells, measure the average tone of each cell, print one dot whose area matches that tone. Nothing about the ink changes; only how much of the cell it covers. Step back far enough that the cell is smaller than your eye can resolve and the eye does the averaging for free.

That trick needs a dot you can resize. A pixel is not one of those. On a display, on a plotter, on anything with a fixed cell, you spend position instead: for each pixel, compare its tone against a threshold and print ink or nothing. Pick the threshold badly and the picture bands into flat plates. Pick it from a small repeating tile and the error turns into texture.

The Bayer matrix is the tile built so that neighbouring thresholds are as far apart as the tile allows. Nothing in it is random. It is the same eight by eight numbers on every frame, which is why ordered dithering is fast, and also why it leaves that faint woven crosshatch once you know to look for it.

Put the two side by side on the same source and the trade is obvious. Variable radius keeps the tone honest and throws away detail smaller than a cell. One bit per pixel keeps every pixel and pushes the tone into a pattern your eye has to integrate.

The practical part: dots are cheap to draw. Every diagram on this page is a single SVG path made of zero-length segments with round caps, a few hundred bytes each. The grid does the work that a gradient would otherwise do, and it stays crisp at any zoom, which a gradient does not.