Drawing Tool Demo

One canvas that mixes the strokes, the fills, the palette, the pen pressure, and the MIDI input, built as a reusable component: it takes any registry of tools and builds the whole interface around it, so the try-drawing demos on the other pages are the same instrument with each page's tools. A settings panel floats over the right edge of the canvas, open by default and toggled by the icon at the top right, holding every control; only the three dials float over the canvas, and the whole interface fades away while the pen is down. A turn sharper than a threshold splits a drawn stroke, so a fast zigzag bakes and records as separate strokes; fills (blobs and shapes) never split and draw one mark per gesture. Each piece appears once its direction settles, and the wider the stroke, the harder its turns smooth.

The hue dial steps the palette: each step moves the key hue by about ten degrees and rolls a fresh scheme, and the current stroke takes its colors from the result. Like the tool dial, ten palettes stay remembered on each side, so dialing back retrieves the same one. The width dial is a position mapped into the current tool's width range, held across tool changes, so the middle of the dial is the middle of any tool's range. The tool dial steps through a trail of rolled tools, each with its own width, parameters, and pressure sensitivity (pressure scales the stroke around its width, by a swing each tool sets). Ten entries are remembered on each side of the current one, so dialing back finds the same tool again, its preview included; each step ahead rolls a fresh entry as the far end falls away. Changing the tool, and every release of the pen, rerolls the palette's jitter under the same hue and scheme, so the key color holds while the rest of the palette moves. The dials also listen to MIDI controls 16 to 18, and either source is latched to one update per frame. The box at the bottom left previews the current tool on a wiggle. No tool paints one flat color: the flat ones fill with a gradient between the two current colors, running along the drawn spine or across it.

Clear fills the canvas with a palette gradient and scatters a few random marks. Replay redraws everything since the last clear through the same drawing cycle: each mark stores its tool, parameters, colors, seed, and drawn points, not the resulting raster, and only drawn points are stored, so idle time is skipped by construction. While a replay runs the button reads Stop, and stopping jumps straight to the end state. A Randomize tool on release checkbox turns on continuous surprise: every release rerolls the colors and steps the tool ahead along the trail. A pointer trace checkbox shows the pointer's own path as a thin line while drawing, off by default. The record button runs the replay while capturing the canvas and saves the video, mp4 where the browser can encode it. The download button saves the drawing's log itself, the background and every record, as a zip of JSON that the Player page plays back. The preview box hides while a replay runs, so the video shows only the drawing. In full screen a dropdown offers fixed canvas sizes: Full HD in either orientation, or a square at 1280 or 960.

The settings panel groups the buttons at its top (canvas, replay, and guide image) and the exact selections below. The palette is picked exactly: a small dial sets the key hue, a dropdown picks the scheme, and a reroll button draws a new jitter under the same settings; the whole palette shows with the tool's colors outlined. The tool is picked by a dropdown or a dial that steps through the same order, and every parameter of the current tool sits below as sliders, width and pressure included. A guide image can be laid over the canvas, fit to it, with its own opacity and visibility controls; it is never baked, and replay and recording behave as if it did not exist.