p5.js -从两个点在相关的时间动画一条线

Question

我正在尝试从一个点到另一个点的动画线。我想设置一个动画持续时间，例如10分钟，使用一个变量来传递行程持续时间:

let p1_x = 200;
let p1_y = 200;
let p2_x = 200;
let p2_y = 300;
let run_x = p1_x;
let run_y = p1_y;

function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
noFill();
stroke(0);
point(p1_x, p1_y);
point(p2_x, p2_y);
let d = int(dist(p1_x, p1_y, p2_x, p2_y));
stroke(0, 153, 255);

if(run_x < p2_x) {
run_x = run_x + 0.1;
} else if(run_y < p2_y) {
run_y = run_y + 0.1;
}

line(p1_x, p1_y, run_x, run_y);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>

Answer 1

可变计时器是程序持续的秒数*10。变量t在刺激时上升。当t等于计时器时，绘制函数使用noLoop()停止;要重新启动它，必须执行loop()。我还让这条线增加了除以计时器的距离，所以当计时器结束时，这条线应该完美地到达终点。如果这行不通，请告诉我。

let p1_x = 200;
let p1_y = 200;
let p2_x = 200;
let p2_y = 300;
let run_x = p1_x;
let run_y = p1_y;
let timer = 600;
let d = int(dist(p1_x, p1_y, p2_x, p2_y));
let t = 0;    
function setup() {
createCanvas(400, 400);
frameRate(10);
}

function draw()
{
background(220);
noFill();
stroke(0);
point(p1_x, p1_y);
point(p2_x, p2_y);
stroke(0, 153, 255);

if(run_x < p2_x) {
run_x = run_x + 0.1;
} else if(run_y < p2_y) {
run_y = run_y+(d/timer);
}

line(p1_x, p1_y, run_x, run_y);

if(t>=timer)
{
noLoop();
console.log("Works")
}
t++;
}