流场

演示 · 流场全屏打开 ↗

流场给屏幕上的每个点指定一个方向。粒子沿着这些方向移动，并留下逐渐消失的轨迹，于是一张数字网格就变成了看起来像风或水流的画面。

原理

1. 一个带种子的噪声函数为任意一点给出平滑变化的数值。
2. 这个数值被换算成角度，每个粒子朝这个方向走一小步。
3. 每一帧都在画布上覆盖一层几乎透明的颜色，让旧的轨迹慢慢淡去。

const angle = noise(p.x * scale, p.y * scale + time) * Math.PI * 4;
p.x += Math.cos(angle) * 1.4;
p.y += Math.sin(angle) * 1.4;

点击 新的流场 换一个随机种子和配色，拖动滑块可以改变粒子数量。