如何在 p5.js 中重置动画答案

【问题标题】：How to reset animation in p5.js如何在 p5.js 中重置动画
【发布时间】：2021-03-26 09:22:29
【问题描述】：

在p5.js 中，我有一个持续循环中的 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);
  }
}

【问题讨论】：

标签： p5.js javascript loops animation p5.js reset

【解决方案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();
}

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

【讨论】：