CODEWITHSUNDEEP
javascriptphysicsprocessingprocessing.js
Christian
Christian

Reputation: 1735

Issue updating second orbiting body in a processing.js example

I was given a processing.js example of how to orbit an object around another object by a user on gamedev.stackexchange here.

Essentially, in the example, an origin or center is established along with the cooridinates of the orbiting point:

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

Then, they are initialized in the setup:

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);
}

And then the cooridinates of the orbiting point are updated each time step:

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));

}

(I have omitted the drawing code as it is not relevant.) I have been attempting to update the code to add additional orbiting ellipses, which can be seen here. I have been able to successfully add a second point along orbit around the central point by adding these additional variables

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

and adding this to setup:

    //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);

However, when I update the cooridinates of the second ellipse each point it results in a stretched out, elongated orbit:

 /*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));

I believe I am doing everything correctly, and replicating the necessary steps. How can I correct this so that the orbit is not distorted?

Upvotes: 0

Views: 127

Answers (1)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53666

At this point you're duplicating code all over the place rather than modularising your code by capturing the orbiting bodies in a class that you can simply build a million times. I'd suggest first rewriting your code to something like

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();
    }
}

demonstrator: http://jsfiddle.net/XhPzL/34

Upvotes: 1

Related Questions