p5.js | frameCount 变量

frameCount 是在 p5.js 中可用的一个内置变量。它记录了从开始运行程序以来绘制的帧数，每秒帧数受到计算机性能和浏览器窗口的大小等因素的影响。

使用

要使用 frameCount，只需在 draw() 函数中引用它即可：

function draw() {
  // 绘制代码
  console.log(frameCount); // 输出绘制的帧数
}

在这个例子中，我们将 frameCount 的值输出到控制台。这可以帮助我们调试程序，查看是否存在性能问题并确保动画效果正常。

示例

以下示例演示了如何使用 frameCount 创建一个简单的动画，当 frameCount 增加时阻尼将逐渐减小：

let damping = 0.95;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  const radius = 50;
  const position = createVector(mouseX, mouseY);
  const center = createVector(width / 2, height / 2);
  
  const vector = position.sub(center);
  vector.mult(damping);
  position.set(center.x + vector.x, center.y + vector.y);

  const distance = center.dist(position);
  
  fill(255, 0, 0);
  ellipse(position.x, position.y, radius);
  
  const dampingChange = map(frameCount, 0, 1000, 0.004, 0.3);
  damping = constrain(damping - dampingChange, 0.1, 1);
}

在这个程序中，我们为一个圆形指定了一个 position，该 position 跟随鼠标。我们使用一个名为 damping 的变量来模拟该位置的阻尼，而 frameCount 则用于使阻尼逐渐减小。这导致圆形在靠近鼠标时移动迅速，而在远离鼠标时移动缓慢。

总结

frameCount 是在 p5.js 中常用的一个内置变量，它可以帮助我们调试程序、检测性能问题和创建动画。在 draw() 函数中，只需引用它就可以轻松地使用它。