流场粒子 Flow Field

玩法

• 拖动滑杆调粒子数量、噪声尺度（纹理的粗细）、速度
• R 或「重新生成」换一颗种子，得到全新的画面
• S 或「存图」把当前画面存成 PNG
• 所有参数和种子都在 URL 里——复制链接发给任何人，对方看到的和你一模一样

拆解

原理只有三步：

1. 确定性噪声场：用种子字符串喂给 mulberry32 伪随机数生成器，生成一张 64×64 的随机格点， 双线性插值后得到一个平滑的标量场——同一颗种子永远得到同一张场。
2. 场变角度：每个位置的噪声值乘上 4π 当作角度，整张画布就成了一片「风向图」。
3. 粒子随风走：几千颗粒子每帧沿着所在位置的风向挪一小步，留下 1 像素的脚印； 背景每帧刷一层 4.5% 透明度的黑，旧轨迹慢慢淡出，画面就有了绸缎般的质感。

不依赖任何库，Canvas 2D + 约 150 行 vanilla JS。选 Canvas 2D 而不是 WebGL 是刻意的： 第一件玩具先把「参数进 URL、种子可复现、快捷键、性能降级」这套玩具页的基础设施跑通， shader 留给下一件。

尊重 prefers-reduced-motion：开了减少动态的设备上不做持续动画，一次性画出 300 帧的轨迹定格。 手机上粒子数自动降到 1200 以内。