Helix Canvas

Helix Canvas started as a frustration with linear sequencers. Music doesn’t happen left-to-right in my head—it spirals, loops back, revises. So I built something that works the way I think.

The core idea is a helical (cylindrical) timeline. Events are placed on a rotating surface. You see the past fading above, the future approaching below, and the present as a line you can rotate around. It’s disorienting at first, then intuitive.

Technical challenges

• Audio timing precision: The Web Audio API’s scheduler is sample-accurate, but JavaScript callbacks aren’t. I ended up using a worker thread with a lookahead queue.

• Canvas performance: Redrawing a complex 3D projection at 60fps while audio locks to a different clock. RequestAnimationFrame and AudioContext time need careful reconciliation.

• State management: The undo/redo stack gets interesting when you have two time dimensions (absolute and relative to the helix rotation).

What I learned

Don’t optimize for the 60fps case until you’ve proven the 30fps case works. I spent two weeks on a complex delta-rendering system that turned out to be unnecessary—modern Canvas 2D is faster than I assumed, and my bottlenecks were in the audio graph, not the display.