Color Smoke 彩色烟雾
Puffs that grow as they rise and are drawn at 15% opacity, so dozens of them build up into smoke. 一团团会边升边变大、而且只用 15% 不透明度画的烟,几十个叠起来才成雾。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Three things happen per frame: y decreases, r increases by 0.4, and x drifts by sin(y/20). The growing radius is what makes it read as expansion rather than translation. Because each puff is only 15% opaque, no single circle is visible — only the accumulation is. 每帧做三件事:y 减小、r 加 0.4、x 按 sin(y/20) 漂移。半径不断变大,是它看起来像「扩散」而不是「平移」的关键。因为每一团只有 15% 不透明,单看任何一个圆都看不出来——雾感来自累积。
What to change可以改的地方
- 1Slow the radius growth to 0.15 for tighter, more defined plumes.
- 2Randomise the hue range down to one colour family for tinted stage smoke.
- 1半径增速降到 0.15,烟柱会更紧、形状更明确。
- 2把色相范围收窄到同一个色系,就是舞台上的染色烟。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。