如何在 p5.js 中执行操作步骤

Question

这是我希望在p5.js中实现的伪代码：

整个过程中形状一直在旋转。

形状移动到A点

图形在A点停留2秒

形状移动到B点

图形停留在B点旋转2秒

图形移动到C点

图形停留在C点旋转2秒

这是我已经尝试过但没有奏效的方法：

var angle=0.0
var x=[20,40,60,320]
var y=[50,70,90,280]

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


function draw() {
  for (i=0; i<x.length; i++) {

  translate(x[i], y[i]);

  setTimeout(rotate(angle), 1000);
  ellipse(0,0,10,100);
  angle+=0.1
    pop()}

}

Answer 1

你真的不应该为这样的逻辑使用 setTimeout() 函数。

而是使用 P5.js 中内置的计时机制，例如 frameCount 变量、millis() 函数和 lerp() 函数。

下面是一个在 2 秒后移动一个圆圈的简单示例：

var y = 0;

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

function draw() {
  background(220);

  ellipse(width/2, y, 20, 20);

  if(millis() > 2000){
    y++;
  }
}

如何在 p5.js 中执行操作步骤

how to have steps of actions in p5.js

p5.js