loops - 在 p5.js 中重置动画

Question

在 p5js 中，我有一个持续循环的 3 个字符的动画，但我希望它们在 5 秒后回到原点位置。我还想通过按一个键让他们返回到他们的初始位置，无论过了多久。我对此很陌生，真的不知道该怎么做。这是完整程序的 link。有任何想法吗？提前致谢!

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

Answer 1

看来你已经根据链接想出了如何让角色在5秒后回到原来的位置。您可以使用函数 keyPressed() 来检测按键。阅读更多 here 。使用 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();
}

在代码的末尾重置字符在按键上的位置。