Zhyohzhy Zhyohzhy - 6 months ago 18
Javascript Question

Using math to change positions of objects (javascript)

I’ve got a big request. It involves quite a bit of math, which was never my strong suit, so I thought, I’d ask the guys on Stackoverflow to help me out.

I’m working on this solar system interactive animation using Javascript. I’m using trigonometric functions to create full 360 degrees circled rotations around objects, for planets around the sun. I know, planets rotate elliptically, but I didn’t want it to make it too hard on myself.

function rotate_point(originX, originY, body) {
body.angle += (1.0 / body.period); //calculates the angle, divided by distance from center of body
var ang = body.angle * 2.0 * Math.PI / 180.0; //calculates full 360° rotation required based on angle
var r = body.orbit;
return {
x: Math.cos(ang) * r - Math.sin(ang) * r + originX,
y: Math.sin(ang) * r + Math.cos(ang) * r + originY
};} // generic rendering of a unit orbital progression of a planet


As you can see that part is all done though, my question:

What I would I need to “tweak” in order for the effect that sort of drives the objects toward the center of the sun. Like if I were to suddenly make the gravitational pull that much stronger that it would pull on the orbit of the planets so you see them crashing eventually toward that center.

Is it doable with any change to the above code, and if so, what would that code need to look like?

I’ve got a JS fiddle for what I’ve got, I hope there’s some smart guys that see the challenge in this and help me out!

FIDDLE

Answer

You can just reduce the radius of the orbit:

body.orbit = Math.max(body.orbit-.25, 0);

function rotate_point(originX, originY, body) {
  body.angle += (1.0 / body.period); //calculates the angle, divided by distance from center of body
  var ang = body.angle * 2.0 * Math.PI / 180.0; //calculates full 360° rotation required based on angle
  body.orbit = Math.max(body.orbit - .25, 0);
  var r = body.orbit;
  return {
    x: Math.cos(ang) * r - Math.sin(ang) * r + originX,
    y: Math.sin(ang) * r + Math.cos(ang) * r + originY
  };
}
// generic rendering of a unit orbital progression of a planet

function planetrotation(planet) {
  var x, y, x_sun, y_sun, e, c_new;
  e = document.getElementById(planet);
  x_sun = parseFloat(document.getElementById("Sun").getAttribute("cx"));
  y_sun = parseFloat(document.getElementById("Sun").getAttribute("cy"));
  c_new = rotate_point(x_sun, y_sun, sol[planet]);
  e.setAttribute("cx", c_new.x);
  e.setAttribute("cy", c_new.y);
} // Rotations of the planets around Sun    

var sol = {
  Earth: {
    period: 5.2,
    orbit: 200,
    angle: 51.0
  }
};

function animate() {
  planetrotation("Earth");
}

var animateInterval = setInterval(animate, 1000 / 60);
.st0 {
  fill: #FFFF00;
}
.st1 {
  fill: blue;
}
<div class="solarsystem">
  <svg xmlns="http://www.w3.org/2000/svg" id="solly" viewBox="0 0 1000 600">
    <g id="Sun2">
      <circle id="Sun" class="st0" cx="500" cy="300.8" r="30" />
      <circle id="Earth" class="st1" cx="375.4" cy="289.7" r="10.5" />
    </g>
  </svg>
</div>

Of course physically it wouldn't behave exactly like this.