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中采取行动步骤

1 个答案: