Javascript 使用p5.js在路径上移动对象

我正在尝试编写一个代码，模拟HTML画布中发生的情况

我的代码的不同之处在于，每次加载或刷新页面时，都会随机生成两个圆的半径。我需要“行星”以相同的速度沿着各自的圆周运动

我正在使用p5.js绘制画布。在p5.js中是否有根据路径绘制对象的东西，在我的例子中，路径是一个圆

我查阅了参考文献，发现了向量，但我不太明白它们的作用

到目前为止，我的代码是：

var w = window.innerWidth;
var h = window.innerHeight;
var r1, r1;
var d;
var x1, x2, y1, y2;
var angle = Math.PI / 4;

function setup() {
    // canvas setup
    createCanvas(w, h);
    background(255);
    angleMode(RADIANS);

    // randomly generated radiuses 
    r1 = Math.floor(Math.random() * (h/2-300)) + 300;
    r2 = Math.floor(Math.random() * (200-100)) + 100;

    // drawing the two ellipses
    ellipseMode(CENTER);
    noFill();
    ellipse(w/2, h/2, r1*2, r1*2);
    ellipse(w/2, h/2, r2*2, r2*2);

}

function draw() {

    // points on the circles
    x1 = (r1 * (Math.cos(angle))) + (w/2);
    y1 = (h/2) - (r1 * (Math.sin(angle)));
    x2 = (r2 * (Math.cos(angle))) + (w/2);
    y2 = (h/2) - (r2 * (Math.sin(angle)));

    // drawing two circles at those points
    ellipseMode(CENTER);
    noStroke();
    fill('rgb(140, 140, 140)');
    ellipse(x1, y1, 20, 20);
    ellipse(x2, y2, 20, 20);

    // randomly generated color for the line
    var r = random(0, 255);
    var g = random(0, 255);
    var b = random(0, 255);
    stroke(r, g, b);
    strokeWeight(1);
    // drawing the line that connects the two points
    line(x1, y1, x2, y2);

    // animation????
    angle = angle + (10 * (Math.PI / 180));

}

---

最后一条线的问题在于它创建的是图案，而不是视频中创建的图案。

如果两颗行星以相同的角度增量移动，它们将始终保持一种关系，从而在它们之间形成一条等距线

为了使它们之间连接的线穿过中心，它们必须具有不同的增量值。您必须保持两个不同的角度值以及每个角度的步长（或速度）

例如，视频中的速度比是1:2.247，基于地球和金星围绕太阳的日比之间的真实关系。因为它们的速度不同，所以它们之间的线现在会交叉并产生五角星图案

我不知道P5.js，所以我在下面添加了一个简单的JavaScript示例，如果P5是一个需求，可以将其视为伪代码。由此，您将能够了解如何在变速下计算这两个位置

例子

var ctx=c.getContext（“2d”），
比率=2.247，//地球与金星的比率为1:2.247
角度1=0，//行星1当前角度
角度2=0，//行星2当前角度
dlt=0.05，//角度步长（速度）
半径1=150，//行星1的半径路径
半径2=100，//行星2的半径路径
cx=c.width*0.5，//中心画布
cy=c.高度*0.5，
t=503；//每帧中止动画
ctx.strokeStyle=“rgba（0120255,0.5）”；
（函数循环（）{
变量x1、y1、x2、y2；
x1=cx+Math.cos（角度1）*半径1；//行星1的电流（x，y）
y1=cy+数学正弦（角度1）*半径1；
x2=cx+Math.cos（角度2）*半径2；//行星2的电流（x，y）
y2=cy+数学正弦（角度2）*半径2；
ctx.beginPath（）；//画线
ctx.moveTo（x1，y1）；
ctx.lineTo（x2，y2）；
ctx.stroke（）；
角度1+=dlt；//增加行星1的角度
角度2+=dlt*比率；//每比率增加角度行星2
if（t--）requestAnimationFrame（循环）
})（）

---

你有没有办法把你想模仿的视频截图包括进去？很多人都不想访问facebook。我最终在代码上做出了让步，做了一些其他的事情，但谢谢你的回复！我想我错了，如果它们以相同的速度旋转，但沿着不同大小的圆周旋转，那么这些线最终会穿过。我最终坚持使用的代码实际上使用了不同的外圆角度！