我可以使用 p5.js 为从一个点移动到另一个点的圆制作动画吗

Question

我 canvas 有两点。 P0 和 P1。我想用给定的时间从 P0 移动一个圆到 P1，然后重复动画。这可能与 p5.js 有关吗？

Answer 1

使用p5.Vector进行计算。

定义 P0 和 P1 通过 createVector():

P0 = createVector(50, 50);
P1 = createVector(350, 150);

通过millis()获取开始时间并计算动画的结束时间（以毫秒为单位）：

startTime = millis();
endTime = startTime + 3000; // 3 seconds

在draw()中连续获取当前时间：

let currentTIme = millis();

计算流逝时间与动画时间的关系，限制最大为1：

let scale = min(1, (currentTIme - startTime) / (endTime - startTime));

计算从 P0 到 P1 的向量，并根据经过的时间对其进行缩放：

let V_dist = p5.Vector.sub(P1, P0).mult(scale);

计算动画的当前中心点：

let PX = p5.Vector.add(P0, V_dist);

查看示例

let P0, P1;
let startTime, endTime;

function setup() {
    createCanvas(400, 200);

    P0 = createVector(50, 50);
    P1 = createVector(350, 150);

    startTime = millis();
    endTime = startTime + 3000; // 3 seconds
}

function draw() {

    let currentTIme = millis();
    let scale = min(1, (currentTIme - startTime) / (endTime - startTime));

    let V_dist = p5.Vector.sub(P1, P0).mult(scale);
    let PX = p5.Vector.add(P0, V_dist);

    background(200);
    
    noFill();
    stroke(0);
    strokeWeight(3);
    ellipse(PX.x, PX.y, 40, 40)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

我可以使用 p5.js 为从一个点移动到另一个点的圆制作动画吗

Can I animate a circle moving from one point to another with p5.js

javascript

animation

p5.js