如何在p5.js中采取措施 [英] how to have steps of actions in p5.js

问题描述

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

This is the pseudocode I hope to realize in p5.js:

形状在整个过程中保持旋转.

The shape keeps rotating throughout the process.

形状移到点A.

形状停留在A点旋转2秒.

The shape stay at point A rotating for 2 seconds.

形状移到B点.

形状在B点旋转2秒.

形状移至C点.

形状停留在C点旋转2秒.

The shape stay at point C rotating for 2 seconds.

这是我已经尝试过的，但是没有用:

This is what I have already attempted which didn't work:

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()}

}

推荐答案

您不应真正将setTimeout()函数用于这样的逻辑.

You shouldn't really use the setTimeout() function for logic like this.

相反，请使用P5.js中内置的计时机制，例如frameCount变量，millis()函数和lerp()函数.

Instead, use the timing mechanisms built into P5.js, such as the frameCount variable, the millis() function, and the lerp() function.

下面是一个简单的示例，该示例在2秒后移动了一个圆圈:

Here's a simple example that moves a circle after 2 seconds:

var y = 0;

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

function draw() {
  background(220);

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

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

这篇关于如何在p5.js中采取措施的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！