DNA Helix DNA 螺旋
Two strands of dots orbiting a shared axis half a turn apart, with rungs every fourth step. 两股点阵绕同一根轴转,相位差半圈,每隔四步连一根横档。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Each of the 40 steps has an angle of t + i*0.3, so the helix winds once every ~21 steps. The second strand uses the same angle plus π, which guarantees the two are always exactly opposite. A crossbar is only drawn when i%4 === 0, keeping the base-pair look sparse instead of a ladder. 40 个台阶每个的角度是 t + i*0.3,大约每 21 步绕完一圈。第二条链用的是同一个角度加 π,这样两股保证永远正对。只有当 i%4 === 0 时才画横档,碱基对才不会密成一把梯子。
What to change可以改的地方
- 1Reduce the 0.3 per-step twist for a longer, looser coil.
- 2Draw the crossbars with a gradient to fake depth as the strands rotate.
- 1每步 0.3 的扭转量调小,螺旋会更长更松。
- 2横档用渐变画,链旋转时就有前后深度。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。