如何让 P5JS 行在函数 mousePressed() 上滑动到新位置

Question

我正在尝试使用线作为记录来制作自动点唱机动画。我要

line(record1X1, 120, record1X2, 120);

在我的 p5js 草图中从 (50, 120, 170, 120) 滑动到 (375, 120, 475, 120)。我通过

让它工作

if (record1X2 < 475 && record1X1 < 375 ) {

    record1X1 += recordSpeed;

    record1X2 += recordSpeed;
}

(recordSpeed 等于 2)

在函数 draw() 中，但我希望动画在绘图中的椭圆上的函数 mousePressed() 上发生。我试图在 mousePressed() 中使用 for 循环来让它工作，但它只是让线跳到位而不是平滑过渡。请帮助我。

Answer 1

mousePressed() 函数内的 for 循环将不起作用，因为只会显示最后一帧。相反，您需要在 draw() 函数内进行所有移动。

您可以在 mousePressed() 函数中设置一个布尔变量，然后在 draw() 函数中使用它。像这样：

function draw(){
  if(mouseWasPressed){
    if (record1X2 < 475 && record1X1 < 375 ) {

      record1X1 += recordSpeed;

      record1X2 += recordSpeed;
    }
  }
}

如何让 P5JS 行在函数 mousePressed() 上滑动到新位置

How to get P5JS line to slide to new position on function mousePressed()

javascript

for-loop

if-statement

p5.js