Javascript 在processing.js示例中更新第二个轨道体时出现问题

gamedev.stackexchange上的用户向我提供了一个processing.js示例，说明如何围绕另一个对象动态观察一个对象

本质上，在示例中，原点或中心与轨道点的坐标一起建立：

// Logic vars
PVector origin;
float orbitRadius = 75.0;
PVector orbitVelocity;
PVector orbitPoint;
float t = 0.0;
float fps = 60.0;
float constDT = 1 / fps;

然后，在设置中对其进行初始化：

void setup() {
    size(400, 400);
    frameRate(fps);

    /*central point */
    origin = new PVector(width / 2.0, height / 2.0);

    /*first point and velocity of orb around center*/
    orbitVelocity = new PVector(0.0, /*-orbitRadius*/orbitRadius);
    orbitPoint = new PVector(origin.x + orbitRadius, origin.y);
}

然后每个时间步更新轨道点的坐标：

void update(float dt) {

    /*update orbit of first orb using velocity*/
    PVector accelerationTowardsOrigin = PVector.sub(origin, orbitPoint);
    orbitVelocity.add(PVector.mult(accelerationTowardsOrigin, /*dt*/constDT));
    orbitPoint.add(PVector.mult(orbitVelocity, /*dt*/constDT));

}

（我省略了绘图代码，因为它不相关。）我一直在尝试更新代码，以添加额外的轨道椭圆，可以看到。通过添加这些附加变量，我已经能够成功地沿着围绕中心点的轨道添加第二个点

/*Logic vars for second point on circle*/
PVector orbitPoint2;
PVector orbitVelocity2;
float circAngle;
float xcoord_along_circle;
float ycoord_along_circle;

并将其添加到设置中：

    //Added in setup
    /*second orbiting point for second orb*/
    /*Calculate second point along circle*/
    circAngle = 90.0;
    xcoord_along_circle = orbitRadius * cos(circAngle) + origin.x;
    ycoord_along_circle = orbitRadius * sin(circAngle) + origin.y;

    /*second point and velocity of orb around center*/
    orbitVelocity2 = new PVector(xcoord_along_circle,orbitRadius);
    orbitPoint2 = new PVector(xcoord_along_circle, ycoord_along_circle);

但是，当我更新第二个椭圆的坐标时，每个点都会产生一个拉伸的、拉长的轨道：

 /*update orbit of second orb using velocity*/
    PVector accelerationTowardsOrigin2 = PVector.sub(origin,orbitPoint2);
    orbitVelocity2.add(PVector.mult(accelerationTowardsOrigin2,/*dt*/constDT));
    orbitPoint2.add(PVector.mult(orbitVelocity2, /*dt*/constDT));

---

我相信我做的每件事都是正确的，并且重复了必要的步骤。我怎样才能纠正这一点，使轨道不失真

此时，您正在到处复制代码，而不是通过在一个可以简单构建一百万次的类中捕获轨道体来模块化代码。我建议首先将代码重写为

class OrbitalBody {
    float ox, oy, x, y, m, a;
    OrbitalBody(float originX, float originY, float startX, float startY, float mass, float speed) {
      ox = originX;
      oy = originY;
      x = startX;
      y = startY;
      m = mass;
      a = speed / 200;
    }
    void update() {
      float nx = (x-ox) * cos(a) - (y-oy) * sin(a),
            ny = (x-ox) * sin(a) + (y-oy) * cos(a);
      x = nx+ox;
      y = ny+oy;
    }
    void draw() {
      fill(255);
      ellipse(x,y,m,m);
    }
}

ArrayList<OrbitalBody> bodies = new ArrayList<OrbitalBody>();
int mx, my;

void setup() {
    size(420, 420);
    mx = width/2;
    my = height/2;
    bodies.add(new OrbitalBody(mx, my, mx-50, my, 10, 10));
    bodies.add(new OrbitalBody(mx, my, mx-100, my, 20, 3));
    bodies.add(new OrbitalBody(mx, my, mx-120, my, 5, 13));
    bodies.add(new OrbitalBody(mx, my, mx-170, my, 15, 6));
    bodies.add(new OrbitalBody(mx, my, mx-190, my, 10, 9));
    ellipseMode(CENTER);
}

void draw() {
    background(0);
    fill(100,100,0);
    ellipse(mx,my,50,50);
    for(OrbitalBody b: bodies) {
        b.update();
        b.draw();
    }
}

class轨道体{
浮牛，oy，x，y，m，a；
轨道体（浮子原点、浮子原点、浮子星TX、浮子星度、浮子质量、浮子速度）{
ox=原始值；
oy=原创；
x=startX；
y=星形；
m=质量；
a=速度/200；
}
无效更新（）{
浮点数nx=（x-ox）*cos（a）-（y-oy）*sin（a），
ny=（x-ox）*sin（a）+（y-oy）*cos（a）；
x=nx+ox；
y=ny+oy；
}
作废提款（）{
填充（255）；
椭圆（x，y，m，m）；
}
}
ArrayList实体=新的ArrayList（）；
intmx，我的；
无效设置（）{
大小（420420）；
mx=宽度/2；
my=身高/2；
添加（新的轨道体（mx，my，mx-50，my，10，10））；
添加（新轨道体（mx，my，mx-100，my，20，3））；
添加（新轨道体（mx，my，mx-120，my，5，13））；
添加（新轨道体（mx，my，mx-170，my，15，6））；
添加（新轨道体（mx，my，mx-190，my，10，9））；
ellipseMode（中心）；
}
作废提款（）{
背景（0）；
填充（100100,0）；
椭圆（mx，my，50,50）；
用于（轨道体b：物体）{
b、 更新（）；
b、 draw（）；
}
}

---

演示者：

我将我的答案从评论改为普通答案，但我想指出的是，你的小提琴使用Pjs 1.0，在这一点上很古老。最新版本是1.4.1，JSFIDLE在其Pjs库列表中有它可供选择。好的，是的，这是一个非常酷的示例，我能够调整它以获得我想要使用您提供的类进行测试的结果。我没有将代码模块化，因为我只是尝试做一个简单的添加来测试一个功能，但是您的组织使它更加高效和可用，所以谢谢您。非常欢迎。如果这是您正在寻找的答案，请确保点击帖子旁边的“这是正确答案”复选标记，这样这个问题就不会被列为“未回答”=）