Drawing Machine HTML, CSS, p5.js
There's something uniquely freeing about MS Paint — no layers, no pressure, just a mouse and a blank canvas. Drawing Machine is a browser-based drawing tool built with p5.js that tries to recapture that feeling while pushing it somewhere new.
The tool gives users five brush modes, toggled with number keys 1 through 5. A single freehand stroke. Two mirrored strokes that build symmetry in real time. Four mirrored strokes that turn every gesture into a kaleidoscopic pattern. A mirrored circle with an outline for more deliberate mark-making. And a solid circle that doubles as an eraser, letting you sculpt back into what you've made. The mirror modes were the most technically interesting challenge — getting duplicate strokes to feel responsive and fluid rather than mechanical took real iteration, and the results ended up more expressive than I originally planned.
The goal was never to replicate MS Paint exactly, but to honor the spirit of it: low barrier, high play. Anyone who grew up doodling on a family computer should feel at home within seconds.
