A blueprint bench where involute gears snap into mesh, drive clocks and jam.
Every part is drawn like an engineering drawing come to life: true involute spur gears with dash-dot pitch circles, centre lines and section hatching, straight-flanked racks, and a sawtooth ratchet with a spring pawl. Gears snap to exactly m(N1 + N2)/2 from the gear they mesh with, onto a hub as a compound gear, or into the one spot that meshes two gears at once. Each frame the mesh graph is walked breadth first from the motor, and every child gear's angle comes from a phase-matched formula, so it turns at -N1/N2 times its parent with teeth always in the gaps. When a loop of gears asks one arbor for two speeds, when its teeth cannot line up, or when a ratchet is driven backwards, the whole train jams and turns red with the clash marked. Left alone, the bench assembles a skeleton clock: 8:60 and 8:64 turn the minute arbor once for every sixty turns of the motor's seconds arbor, and motion work of 10:30 and 8:32 brings the hour wheel back onto the minute arbor at one twelfth the speed.
Try it. Drag gears, a rack, a ratchet or the motor from the tray. Drop a gear near another to mesh, on a hub to compound it, or back in the tray to remove it (right-click, Shift-click or Delete over a gear also removes it). Press + or - while dragging to change the tooth count. Click the motor to stop it; Space toggles it, R reverses, up and down change speed, C clears the bench and A rebuilds the clock.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive gear train workbench with JavaScript and the HTML canvas element, styled like a blueprint. 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, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint a blueprint blue background with a fine grid.
- Write a function that builds an involute spur gear as a Path2D in module units (pitch radius N / 2, 20 degree pressure angle, tip N / 2 + 1, root N / 2 - 1.25). Stroke it in white with a dashed pitch circle.
- Keep a list of gears (position, tooth count, angle). Let me drag gears of a few sizes from a tray at the bottom; when I drop one near an existing gear, snap its centre to exactly (N1 + N2) / 2 from it.
- Two gears mesh when their centres are that distance apart. Make the first gear the motor. Each frame, walk the mesh graph breadth first from the motor and set every child's angle with angleB = theta + PI - PI / NB + (theta - angleA) * NA / NB, where theta is the direction from A's centre to B's.
Once that works, make it beautiful:
- Label each gear with its tooth count and its speed in rpm.
- Detect jams: if the walk reaches a gear that already has a speed and the new speed disagrees (any loop with an odd number of gears does), stop the whole train and draw it red.
- Let me drop a gear onto another's hub to make a compound gear on a second layer.
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 racks and ratchets, an attract mode that assembles a clock gear train with hands, or snapping a gear into the one spot that meshes two gears at once.
