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

【问题标题】：How to get P5JS line to slide to new position on function mousePressed()如何让 P5JS 线在函数 mousePressed() 上滑动到新位置
【发布时间】：2018-05-03 18:33:42
【问题描述】：

我正在尝试使用 line 作为记录制作点唱机动画。我想要

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 循环来使其工作，但它只是使线跳到位而不是平滑过渡。请帮帮我。

【问题讨论】：

标签： javascript for-loop if-statement p5.js

【解决方案1】：

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

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

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

      record1X1 += recordSpeed;

      record1X2 += recordSpeed;
    }
  }
}

【讨论】：