流场粒子的实现笔记

首页的风场,技术上朴素得近乎简陋:没有 WebGL,没有 Three.js,只有一个 Canvas 2D 上下文。

流场:用正弦冒充噪声

真正的 Perlin noise 当然好,但为了一个角度场引入噪声库不值得。多层正弦叠加就够了:

function flowAngle(x: number, y: number, t: number): number {
  const s = 0.0016;
  const n =
    Math.sin(x * s * 1.7 + t * 0.9) * Math.cos(y * s * 1.3 - t * 0.6) +
    Math.sin((x + y) * s * 0.7 + t * 0.4) * 0.8;
  return n * Math.PI;
}

每个粒子每帧问自己:我所在位置的风向是多少?然后把速度向量往那个方向推一点,再乘以阻尼。剩下的交给积分。

拖尾:不要清屏

最关键的一个技巧是永远不完全清屏。每帧用极低透明度的底色盖一遍:

ctx.fillStyle = "rgba(7, 8, 10, 0.085)";
ctx.fillRect(0, 0, width, height);

旧轨迹会自然衰减成几帧长的彗尾,粒子的"速度感"是免费的。

克制比炫技难

粒子数量按面积自适应,上限 1200;devicePixelRatio 封顶 2;尊重 prefers-reduced-motion,退化成一帧静态星野。视觉效果的上限,往往不是算力,而是你知道什么时候该停。