Visualizations
377 / 500

377 · Type and image

Risograph Press

A poster printed in CMYK or two riso inks, with a loupe that shows the rosettes.

A lighthouse poster is painted in continuous tone, then separated into inks: CMYK with gray component replacement, or two riso inks solved per pixel by least squares in optical density, with the contrast pushed the way a riso operator would. Each ink is printed through its own rotated screen, where a spot function over each cell is compared with the local tone, so dots grow from points into checkerboards into holes. Dot gain fattens the midtones, paper fibers rough the dot edges, every plate drifts slightly out of register, and the inks multiply on off-white paper like transparent ink. The plates roll on one at a time, and the loupe evaluates the same screens at higher resolution, showing the true rosettes and the moire that appears when screen angles are careless.

Try it. Drag the loupe across the print. The controls panel, which unfolds when you hover or tap, switches inks (CMYK, pink and blue, teal and orange), screen ruling, dot shape (round, elliptical, line or stochastic grain), standard or careless screen angles, dot gain and registration drift. Keys: P reprints plate by plate, M cycles the inks, D the dot shape, A the angles, arrows move the loupe.

  • Color separation
  • Rotated halftone screens
  • Spot functions
  • Dot gain
  • Subtractive ink mixing

View the source · one module, plus a small shared runtime for sizing, the animation loop and input

Build your own

Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.

Build a halftone print simulator with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.

Start simple:
- Make a canvas that fills the window and resizes with it. Paint a simple continuous-tone illustration into an offscreen canvas with gradients (a sunset sky, a big sun, a dark hill) and read it back with getImageData.
- Separate each pixel into cyan, magenta and yellow coverage (c = 1 - r, and so on), plus black for the gray they share.
- For each ink, rotate the pixel coordinates by the screen angle (C 15, M 75, Y 0, K 45 degrees) and divide by a cell size. Inside each cell compute the spot function (2 - cos(2 pi u) - cos(2 pi v)) / 4, and give the pixel ink where the spot value is below the ink's coverage, with a one-pixel soft edge.
- Composite the inks by multiplying them over an off-white paper color, the way transparent inks overprint.

Once that works, make it beautiful:
- Add dot gain (fatten midtones a little), a small random offset per plate for misregistration, and paper fiber noise that roughens the dot edges.
- Add a circular loupe that follows the pointer and renders the same screens at four times the resolution, so you can see the rosettes.
- Add a two-color riso mode with fluorescent pink and blue inks.

Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as an animated press that rolls each plate on in turn, careless screen angles that produce moire, or stochastic grain screening.
PreviousBaby UniverseTune the universe's ingredients and watch the microwave sky respond. NextWood Wide WebRoots and fungal hyphae weave a soil network that shuttles carbon to shaded seedlings.

Related visualizations

  • Paper MarblingGenerative art Ink drops, combs and styluses on a size bath, then a print pulled onto paper.
  • Glyph RasterizerType and image Letters become pixels: exact-area scanline coverage, subpixel RGB and hinting.
  • HarmonographGenerative art A Victorian pendulum machine inks decaying roses and stars onto cream paper.
  • Engraving Renderer3D A moving 3D still life printed as a copperplate engraving, line by swelling line.
  • Rose EngineGenerative art A simulated rose engine lathe cuts banknote-fine guilloche, one pass at a time.
  • One Line PortraitType and image Thousands of stipple dots become one unbroken pen line, untangled by 2-opt.
  • Plotter LandscapeGenerative art A mountain range inked stroke by stroke, with exact floating-horizon hidden lines.
  • Through Other EyesType and image A fruit market, a metro map and test plates as dichromats see them.
  • MoireIllusions Two sheets of fine lines beat into giant ghosts, and hide a secret message.

Use ← and → to move between demos. While the canvas has focus, keys go to the demo instead.

← More from Emergent Mind Labs