Interactive design · Creative tool
Chromata
A generative drawing workspace. Pathfinders read the colors of an image and redraw it as moving lines, with controls for forces, faces, regions, and sound input.
Try this: Drop an image on the panel, then press Start.
- Role
- Design & development
- Period
- 2026
- Status
- Live
- Platform
- Cloudflare Pages
- Built with
- JavaScript
- Canvas
- Tweakpane
- Face detection
- Web Audio
- 14,320
- lines of code in the extended project
- 2
- modes: the drawing editor and Story Studio
01
What I added
Chromata's pathfinders move across an image and draw with the colors they read. I built an editor around that engine.
- Radial pathfinder math and force nodes, adjusted live with Tweakpane.
- Face detection that pulls pathfinders toward faces.
- Region constraints, presets, and parameter modulators.
- Microphone or audio-file input, mapped from frequency to hue through a spectrogram.
- Story Studio, a second mode that sequences images and text into a timed piece.
How a drawing forms
Pathfinders leave an origin and steer by the colors under them.
Scope & limitations
The base engine is Michael Bromley's Chromata, credited in the project. The editor, controls, and Story Studio described here are my additions.