p5.js | 帧()函数

p5.js 是一个基于 Processing 的 JavaScript 库，用于创建可交互的图形和动画效果。

在 p5.js 中，帧函数（frame）是一个重要的概念。帧函数可以让我们控制 p5.js 中每一帧的执行时间。p5.js 默认每秒钟会执行 60 次帧函数，也就是每秒钟会呈现 60 次不同的画面。

基本使用

在默认情况下，p5.js 会自动执行帧函数。如果要手动控制帧函数的执行时间，可以使用 frameRate() 函数。

function setup() {
  createCanvas(400, 400);
  frameRate(30); // 控制每秒钟执行帧函数的次数为 30 次
}

function draw() {
  background(220);
  // 绘制图形等操作
}

示例代码

以下是一个简单的使用帧函数的示例，每秒钟执行 10 次帧函数，将画布上的圆形旋转一定的角度：

let angle = 0;
let speed = 0.1;

function setup() {
  createCanvas(400, 400);
  frameRate(10); // 控制每秒钟执行帧函数的次数为 30 次
}

function draw() {
  background(220);

  translate(width/2, height/2);
  rotate(angle);

  noFill();
  stroke(0);
  ellipse(0, 0, 100, 100);

  angle += speed;
}

注意事项

1. 每次执行帧函数时，p5.js 会自动清空画布并重新绘制。
2. 帧函数不必要在 draw() 函数中使用，也可以在其他自定义函数中使用。
3. frameRate() 函数必须在 setup() 函数中调用，否则无效。
4. 如果帧函数的执行时间过长，将会导致画面卡顿，降低用户体验。因此，在编写代码时，应尽量控制帧函数执行的时间。

参考链接

• p5.js 官方文档