p5.js 动画原理：利用 frameCount 控制运动轨迹

一、p5.js 的动画循环与 frameCount 的运行机制

理解 p5.js 的动画，首先必须掌握其核心结构：setup() 与 draw()。setup() 只在程序启动时执行一次，用于创建画布和配置初始环境；而 draw() 则由底层的 requestAnimationFrame 驱动，默认以大约每秒 60 次的频率无限循环执行。

每当 draw() 的一次执行周期开始前，p5.js 引擎都会自动执行 frameCount++。当程序刚进入 setup() 时，frameCount 的值为 0；进入 draw() 的第一次绘制时，frameCount 变为 1，随后依次递增为 2, 3, 4 ...。

初学者通常习惯在 draw() 之外声明一个状态变量（如 let x = 0;），然后在每一帧内部执行 x += speed;。这种“命令式累加”方式虽然直观，但在面对周期往复、复杂波浪或多图元排演时存在显著短板：状态容易混乱、难以做时间回溯、多个物体的相位关系难以精确同步。

相反，如果我们把 frameCount 视作物理学或数学中的时间参数 t，任何图元的位置都可以表示为 Position = f(frameCount)。这种“函数式参数方程”的思考方式，让整个画面在任意一帧的状态都具备严格的确定性与可复现性。

二、核心推导流程：将帧计数转换为屏幕运动坐标

frameCount 本质上是一个单调递增的整数序列（0, 1, 2, 3...）。如果直接把它当作像素坐标，物体会以恒定每秒 60 像素的速度飞出画布。如果直接传给三角函数 sin(frameCount)，由于 1 弧度约等于 57.3 度，小球会在正负值之间极速剧烈抖动，无法形成肉眼可见的平滑曲线。

要生成优美、可控的轨迹，需要经过严密的 5 步参数化转换流水线：

1. 提取时钟基准：直接读取当前帧的 frameCount，获取单调连续的时间自变量。
2. 调节时间频率（步频缩放）：通过乘以一个小于 1 的浮点数因子（如 0.02 ~ 0.05），将离散的整数压缩为平缓演进的弧度增量 let t = frameCount * speed;。
3. 施加特征函数映射：利用 sin()、cos()、取模 % 或 noise()，将无限单调递增的值域折叠或规范化为特定形态的数值区间（如正弦波的 [-1.0, 1.0]）。
4. 空间幅度与中心放缩：将归一化的数学结果乘以振幅半径 amplitude，并加上画布中心坐标偏移 centerX，投射到具体的屏幕物理像素空间。
5. 图元绘制与视觉呈现：调用 circle(x, y, d)、rect(x, y, w, h) 等绘图命令完成渲染。每一帧位置的细微连续变化在人眼中便构成了连贯运动。

三、实战轨迹实现：四种常见运动模式详解

通过为 frameCount 配套不同的数学映射算法，我们可以低成本地构造出形态各异的几何运动模式。以下是四种最具代表性的轨迹实现方案。

1. 匀速水平平移与边界取模回环 (Modulo Translation)

当希望物体以恒定速度沿单一方向滑动，并在穿出屏幕边缘后立即从另一侧重新出现时，可以使用取模运算符 %：

function setup() {
  createCanvas(600, 300);
}

function draw() {
  background(247, 249, 251);
  
  let speed = 3;
  // 利用取模运算符将 x 约束在 [0, width] 范围内
  let x = (frameCount * speed) % width;
  let y = height / 2;

  fill(69, 101, 129);
  noStroke();
  circle(x, y, 30);
}

运行机理：随着 frameCount 持续增长，frameCount * speed 持续变大。取模运算 % width 使得结果在达到 width 的瞬间立即归零，实现无缝平铺循环。

2. 正弦简谐振荡 (Harmonic Oscillation)

正弦函数 sin(angle) 接收一个弧度值，并返回一个在 -1.0 到 1.0 之间平滑波动的数值。其导数（速度）在经过中心时最大，在到达峰值两极时减速至零后折返，极具自然物理质感：

function draw() {
  background(247, 249, 251);

  let speed = 0.04;    // 运动频率
  let amplitude = 80;  // 上下振动振幅（像素）
  let centerY = height / 2;

  // y 坐标在 centerY - amplitude 与 centerY + amplitude 之间平滑往复
  let y = centerY + sin(frameCount * speed) * amplitude;
  let x = width / 2;

  fill(67, 138, 128);
  noStroke();
  circle(x, y, 32);
}

3. 极坐标正交圆周公转 (Circular Orbit)

圆周运动的几何本质，是将极坐标 (r, θ) 转换为直角坐标 (x, y)。利用 cos() 控制水平轴、sin() 控制垂直轴，两者频率保持一致即可合成正圆：

function draw() {
  background(247, 249, 251);

  let angle = frameCount * 0.03; // 角速度
  let radius = 100;              // 旋转半径
  let centerX = width / 2;
  let centerY = height / 2;

  // 正交分解计算圆周坐标
  let x = centerX + cos(angle) * radius;
  let y = centerY + sin(angle) * radius;

  // 绘制中心参考点与轨道
  stroke(220, 228, 236);
  noFill();
  circle(centerX, centerY, radius * 2);

  // 绘制公转小球
  fill(69, 101, 129);
  noStroke();
  circle(x, y, 24);
}

进阶扩展：如果让 radius = frameCount * 0.2; 随着时间缓慢膨胀，物体的轨迹就会从圆周演变成为优美的阿基米德螺旋线。

4. 柏林噪声有机漂移 (Perlin Noise Drift)

如果需要让物体产生类似浮游生物、飞蛾绕灯或微风落叶般的有机不规则运动，直接使用 random() 会导致严重的帧间抽搐。p5.js 内置的 noise() 接受一维平滑自变量，产生连贯但非周期的自然平滑曲线：

function draw() {
  background(247, 249, 251);

  // 分别使用不同的时间偏移行采样 X 和 Y 坐标，避免沿对角线运动
  let x = noise(frameCount * 0.008) * width;
  let y = noise(frameCount * 0.008 + 100) * height;

  fill(67, 138, 128);
  noStroke();
  circle(x, y, 28);
}

四、高阶技巧：相位差与残影轨迹的综合应用

当场景中存在成百上千个图元时，frameCount 的优势更加无可替代。我们只需要在循环中通过图元索引 i 引入一个微小的相位差（Phase Offset），就能以极低的代码量创造出群体波浪、多节蛇形尾迹等壮丽的动态编排。

配合在每一帧绘制带有透明通道的背景 background(247, 249, 251, 30)，旧帧画面不会被瞬间清空，而是层层渐隐，自然形成流动感十足的发光残影。

完整示例：多质点正弦波动矩阵与动态残影

function setup() {
  createCanvas(720, 360);
}

function draw() {
  // 使用带有 alpha 透明度的背景色，实现视觉残影与拖尾
  background(247, 249, 251, 35);

  let numParticles = 40;
  let spacing = width / numParticles;
  let speed = 0.04;
  let phaseStep = 0.15; // 相邻质点之间的相位延迟

  for (let i = 0; i < numParticles; i++) {
    let x = i * spacing + spacing / 2;
    
    // 关键：在时间自变量中融入 i * phaseStep 构造相位差
    let localAngle = frameCount * speed + i * phaseStep;
    let y = height / 2 + sin(localAngle) * 70;

    // 动态半径：利用余弦函数同步调整质点大小
    let diameter = map(cos(localAngle), -1, 1, 8, 22);

    fill(69, 101, 129);
    noStroke();
    circle(x, y, diameter);
  }
}

在这个示例中，没有任何数组在维护 40 个粒子的历史位置。纯粹依靠 frameCount 和几何索引 i 的数学映射，整个画面便呈现出永不停歇、严密同步的流体波动。

五、工程边界：frameCount 与 deltaTime 的选型决策

尽管 frameCount 在生成艺术中极为强大，但在实际前端工程与游戏开发中，开发者必须清晰认识到它的前提假设与局限性。