1

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

}
santoku
  • 3,297
  • 7
  • 48
  • 76

1 Answers1

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++;
  }
}
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • @santoku My code used an `if` statement. Your code uses a `while` loop. Your code is not going to show the movement between frames. But if you have follow-up questions, please post them in new questions instead of editing this one. – Kevin Workman Nov 18 '18 at 17:11
  • my bad. I was intending to append the new code but now I reverted to original question and new question here: https://stackoverflow.com/questions/53363581/how-to-interpolate-between-two-consecutive-points-with-a-smooth-curve-in-p5-js thanks – santoku Nov 18 '18 at 17:25