Clockwork: High-Performance Interactive Gear Simulation in Canvas2DClockwork: High-Performance Interactive Gear Simulation in Canvas2D
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
An interlocking gear-train workbench with true ratios and brass-blueprint charm.
I built this project to test An interlocking gear-train workbench with true ratios and brass-blueprint charm. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Canvas2D while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING: I focused on two core engineering benchmarks:
Real-time gear mesh torque transfer and escapement tick mechanics
Interactive placement of interlocking brass gears with variable ratios
THE TECHNICAL SIDE: Implements true involute tooth profiles computed via parametric equations. Rotational speeds are propagated through an adjacency graph of connected gear nodes. Everything executes in the browser using Canvas2D, Mechanical Gear Physics, Involute Gear Tooth Profiles. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED: Floating-point precision drift caused gear teeth to gradually overlap after several minutes. Clamping phase angles to gear pitch intervals solved the drift. Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF: The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Built by Samin Sami | Developer & 3D Experimentation
Post image
Post image
Dev's avatar
The mechanistic gears and simulations was just a chef's kiss.🔥 Too smooth it feels almost illegal.😂
Ruhi's avatar
Steampunk vibe👍
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started