如何在p5.js中重置动画

Question

在p5.js中，我有一个连续循环的三个角色的动画，但我希望它们在5秒后回到原始位置。

我还想通过按键使它们返回初始位置，无论经过多长时间。我非常新手，不知道如何做到这一点。这是完整程序的链接。有什么建议吗？提前感谢！

var Ax = canvasW/2 - 125,
    Ay = canvasH/2;
var speedAx = 5,
    speedAy = 6;

var Bx = canvasW/2,
    By = canvasH/2;
var speedBx = 6;

var Cx = canvasW/2 + 125,
    Cy = canvasH/2;
var Cy1 = 50,
    Cy2 = canvasH - 50;
var t = 0;
var startTime = 0;
var interval = 400; // miliseconds


function setup() {
  createCanvas(canvasW, canvasH);
  
  textAlign(CENTER, CENTER);
  textFont('Fredoka One');
  
  abcSize = 150;
  
}


function draw() {

  textSize(abcSize);
  text('A', Ax, Ay);
  Ax = Ax + speedAx;
  Ay = Ay + speedAy;
  
  if(Ax<abcSize/2 || Ax>width-abcSize/2){
    speedAx*=-1
  }
  if(Ay<abcSize/2 || Ay>height- abcSize/2){
    speedAy*=-1
  }

  
  fill('magenta');
  text('B', Bx, By);
  
  Bx = Bx + speedBx 
  
  if (Bx > canvasW-45) { 
    speedBx = -speedBx;
  }
  
  if (Bx < 0+45) { 
    speedBx = speedBx * -1;
  }
  
  
  fill('yellow');
  textSize(150);
  text('C', Cx, Cy);
  
  t = map(millis(), startTime, startTime + interval, 0.0, 1.0);
  t = constrain (t, 0, 1);
  
  Cy = Cy1 * (1 - t) + Cy2 * t;
  
  if (t >= 1) {
    t = 0;
    startTime = millis();
    //  update Cx1 and Cx2 here with new values from an array
    Cy1 = Cy2;
    Cy2 = random(100, 500);
  }
}

- asdfg1234

Answer 1

看起来你已经通过链接弄清了如何使字符在5秒后返回原始位置。你可以使用函数keyPressed()来检测按键。在这里阅读更多信息。使用keyPressed()函数，你可以添加

function keyPressed() {
  Ax = canvasW / 2 - 125;
  Ay = canvasH / 2;
  Bx = canvasW / 2;
  By = canvasH / 2;
  Cx = canvasW / 2 + 125;
  Cy = canvasH / 2;
  resetTime = millis();
}

在代码末尾添加代码，以在按键时重置字符位置。

- Authom