how to have steps of actions in p5.js

Question

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

The shape keeps rotating throughout the process.

The shape moves to point A.

The shape stay at point A rotating for 2 seconds.

The shape moves to point B.

The shape stay at point B rotating for 2 seconds.

The shape moves to point C.

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

}

Answer 1

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

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

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++;
  }
}