✨Effect Lab
Read the full guide完整技术长文 One force, six pictures一个力,六张画面
🌪️

Particle Tornado 粒子龙卷

Particles spiral outward and upward, then recycle — the funnel shape is a linear map from radius to height. 粒子向外、向上螺旋,然后回收——漏斗的形状就是「半径到高度」的一个线性映射。

Canvas 2DHelical motionRadius mapping
Live demo实时演示

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

How it works原理拆解

Y is 20 + r*3.1, so height is literally derived from radius: small radius means high up, large radius means near the ground. That single line produces the cone. Adding p.r*0.05 to the angle makes the spiral tighten as it rises, which is what gives it the twisting look. Y 是 20 + r*3.1,也就是高度直接由半径算出来:半径小就在高处,半径大就贴地。这一行就画出了锥形。角度上再加 p.r*0.05,螺旋会越往上越紧,扭转感就是这么来的。

What to change可以改的地方

  • 1Change 3.1 to 1.8 for a squat, wide funnel.
  • 2Increase the angle drift so the bands become more visible.
  • 13.1 改成 1.8,漏斗会变矮变宽。
  • 2加大角度漂移,螺旋的层次会更清楚。

Source code源码

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

tornado.html