如何在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++;
  }
}