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

Helix Geometry

Twist (turns density) 1.0×

Backbone radius 2.2

Rotation speed 0.6×

Base pairs 60

Live Readout

Rotation angle

0°

Helical pitch

— bp/turn

Base pairs shown

Rungs (H-bond pairs)

Strand 1 (sugar-phosphate backbone)

Strand 2 (sugar-phosphate backbone)

Base-pair rung (A–T style)

Base-pair rung (G–C style)

How it works

This is a flat-canvas projection of the same parametric double helix the 3D version renders with WebGL. Each rung i sits at height y_i along the helix axis and angle θ_i = i·0.28·twist + φ(t), where φ(t) is the whole-molecule rotation phase that advances at the chosen speed:

x1 = cos(θ) · R      z1 = sin(θ) · R
x2 = −x1              z2 = −z1

The depth coordinate z is never discarded — it drives a simple orthographic-with-shading projection: points and rungs with z closer to the viewer are drawn brighter, wider and later (on top), while far-side points are dimmer, thinner and drawn first. That single trick is what makes a 2D canvas read as a rotating 3D ladder without ever touching WebGL.

Turning up Twist packs more angular rotation into each step along the axis (a tighter helical pitch); Backbone radius sets how far apart the two strands sit; Base pairs resamples the same curve at a different density, same way the 3D engine's step count works.

Helical pitch is derived, not free — it is how many base pairs one full 360° turn takes at the current twist: 2π / (0.28 · twist).
Real B-form DNA has about 10.5 bp per turn and a 2 nm diameter; the default twist here is tuned to land close to that ratio, and the sliders let you explore looser (A-form-like) or tighter (Z-form-like) geometries.

rotating double helix · depth-shaded 2D projection