✨Effect Lab
Read the full guide完整技术长文 A particle is four numbers and a deadline粒子就是四个数,加一个截止时间
❄️

Snowfall 漫天飞雪

A hundred and twenty flakes that fall straight down in y but sway in x on a sine curve. 一百二十片雪花,y 方向匀速下落,x 方向走正弦曲线来回摆。

Canvas 2DSine swayWrapping
Live demo实时演示

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

How it works原理拆解

The horizontal sway is sin(p.y/30)*0.6 — driving the sine with the flake's own y position means the sway accelerates as it falls, which looks like wind rather than a pendulum. When a flake passes the bottom edge it is teleported back to y=0 instead of being respawned, so the density never drops. 横向摆动是 sin(p.y/30)*0.6——用雪花自己的 y 当正弦的输入,摆动会随着下落越来越快,看起来像风,而不是钟摆。落到下边缘直接重置到 y=0(而不是重新随机整片),密度不会掉。

What to change可以改的地方

  • 1Multiply the sway amplitude by 3 for a blizzard, or by 0.3 for calm air.
  • 2Randomise the /30 divisor per flake so they do not sway in unison.
  • 1振幅乘 3 是暴雪,乘 0.3 是无风的静雪。
  • 2把 /30 这个除数做成每片随机,雪花就不会整齐划一地摆。

Source code源码

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

snow.html