Как заставить строку P5JS скользить в новую позицию по функции mousePressed ()

Question

Я пытаюсь сделать анимацию музыкального автомата, используя линию в качестве записей. Я хочу

line(record1X1, 120, record1X2, 120);

для перехода от (50, 120, 170, 120) к (375, 120, 475, 120) в моем наброске p5js. Я получил его на работу, положив

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

    record1X1 += recordSpeed;

    record1X2 += recordSpeed;
}

(recordSpeed ​​равен 2)

в функции draw (), но я хочу, чтобы анимация происходила в функции mousePressed () на эллипсе в моем чертеже. Я попытался использовать цикл for в mousePressed (), чтобы заставить его работать, но он просто заставляет линию перейти на место вместо плавного перехода. Пожалуйста, помогите мне.

Answer 1

Цикл

A for внутри функции mousePressed() не будет работать, поскольку будет отображаться только последний кадр. Вместо этого вам нужно выполнить все свои движения внутри функции draw().

Вы можете сделать что-то вроде установки логической переменной внутри функции mousePressed(), которую затем будете использовать внутри функции draw(). Примерно так:

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

      record1X1 += recordSpeed;

      record1X2 += recordSpeed;
    }
  }
}