DNA Double Helix: Rotating Base-Pair Ladder (2D)

The 3D version of this simulation builds a real WebGL double helix by walking a parametric curve — two strands offset 180° around a shared axis, connected by base-pair rungs, twisting as they rise. This 2D companion runs the exact same equations — angle θ_i = i·0.28·twist + rotation phase, positions x=cos(θ)·R, z=sin(θ)·R on each strand — but projects them onto a flat canvas itself instead of handing them to a 3D renderer: the depth coordinate that a camera would normally consume is used directly to brighten, widen and paint the near strand over the far one, in back-to-front order every frame, so the helix still visibly rotates in depth on nothing but Canvas2D. Twist, backbone radius, rotation speed and base-pair count are all live, and a readout panel tracks the current rotation angle, the derived helical pitch (bp per full turn) and the rung count in real time.