✨Effect Lab
Read the full guide完整技术长文 Shapes nobody drew: recursion, displacement and polar coordinates没人画过的形状:递归、位移与极坐标
🌀

Hypno Spiral 催眠螺旋

Seventy dots placed along r = i*4 with an angle offset of i*0.12 — an Archimedean spiral, rotating. 七十个点沿 r = i*4、角度偏移 i*0.12 摆放——一条阿基米德螺旋,在缓慢旋转。

Canvas 2DArchimedean spiralHue by index
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

The constant radial step is what makes the arms equally spaced; an exponential step would give a logarithmic spiral instead. Because t only advances 0.01 per frame, the perceived motion is a slow rotation of the whole pattern rather than dots travelling along it. 半径是等差递增,所以每圈间距相等;如果改成等比,得到的会是等角螺线。因为 t 每帧只推进 0.01,观感上更像是整幅图案在旋转,而不是点在沿螺线跑。

What to change可以改的地方

  • 1Change i*4 to i*7 for a looser spiral with wider gaps.
  • 2Speed t up past 0.05 and it stops being hypnotic and starts being alarming.
  • 1i*4 改成 i*7,螺旋更松、间隙更宽。
  • 2t 增速超过 0.05,就从催眠变成让人心慌了。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

spiral.html