Image / media · 5.6
Halftone rasterization
Halftone patterns from print media. A newspaper photo under a magnifier.
Reducing an image to a grid of sized dots.
4 knobs
How it actually works
Halftone and dithering are the same sentence with different grammar: both destroy an image to preserve the impression of it. Halftone modulates size and keeps the grid. Dithering keeps the size and destroys the grid. Run them side by side and you can see two industries argue.
Per-cell brightness maps to dot radius, drawn in a fragment shader on a rotated grid. The rotation angle is what stops moiré, and it is the knob nobody expects to matter until they turn it. Distinct from dithering, which quantizes to a palette with error diffusion rather than modulating dot size.
The knobs, named
Cell size, dot-size ramp, grid rotation angle, dot shape. Two sliders with an instantly-readable result.
| Knob | Source | What it teaches |
|---|---|---|
| Cell size | ours | The dot grid pitch. This is the halftone screen ruling, in effect. |
| Dot-size ramp | ours | How brightness becomes radius. Low keeps the dots small and the image light. |
| Grid rotation | ours | The angle that stops moiré. Set it to 0 and watch the interference patterns arrive. |
| Dot shape | ours | What sits in each cell. line is where halftone becomes engraving. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (rendered) for existence; mechanism INFERRED
/features/dot-matrix-gradient confirmed in gradientlab.co's 19-feature catalogue. Mechanism and all four knobs are ours. Not upgraded.
- Seen on
- gradientlab.co/features/dot-matrix-gradient (DOT MATRIX, "Halftone patterns from print media").
- Dependencies
- any shader context
- Difficulty
- moderate
- Performance
- One quad, cheap.
- Accessibility and the floor
- Static by default, so there is no reduced-motion issue unless you animate the source.
Notes
Composability. Pairs with dithering (5.7) as a "two ways to destroy an image" lesson. Run both, same source, and the difference explains itself.