I'm developing a website showing the movement of Solar System planets according to the passage of time. I'm using this reference to calculate all the necessary orbital parameters.

These are two images some days apart.

Mercury far from the Sun

Mercury close to the Sun

(Only planets up to Mars are shown here. The moon orbit has been highly exaggerated to become visible. Celestial bodies radii are not to scale either, except among themselves—except the Sun.)

The images show the high eccentricity of Mercury's orbit, causing it to be very far from the Sun in the first image, and very close to it in the second.

I want to draw the correct ellipse, instead of circles that constantly change radius. I have all the “orbital elements” given in the link above (N, i, w, a, e, M, r, v, x, y, z, lon, lat), but don't know how to extract an ellipse from them. I'm drawing the planets using x, y heliocentric coordinates. Even if I had the ellipse foci, JavaScript needs the geometric center of the ellipse to draw it, and I don't know either how to convert the former into the latter.

How to calculate the ellipse center from the parameters given above?

  • $\begingroup$ @uhoh The place is already accurate (at least I think so). That's why the circles change radius between different dates. $\endgroup$ – Rodrigo Mar 23 at 5:04
  • $\begingroup$ Oh I've got you now; you have the correct trajectory, you just need the "trail". What I normally do is just run each planet for exactly one period, then connected the points with a curve, spline, or just line segments rather than force an other object to match reality. I think it's easier because you have everything you need already, no extra function to break later if you change units. $\endgroup$ – uhoh Mar 23 at 6:00

I assume that the Sun is at the origin: (0,0). Then we can look at this image of an ellipse: enter image description here

The foci are at +-c, where c = ea, by the definition of eccentricity. To put the perigee on the negative y-axis, we can then say the center of the ellipse is at (0,ea). Then, to account for the argument of periapsis, w, we need to rotate the ellipse (and ellipse center) counter-clockwise around the origin to get the coordinates for the ellipse center, (x,y) =(-easin(w),eacos(w)). A better approximation would include the inclination, i, for a 2-D projection, but the inclination is small for Mercury so it may not matter for the purposes of your animation. This diagram for the orbital elements should also help:

enter image description here

  • $\begingroup$ I had already found a solution, so I'm posting it, but yours seems much simpler. Will try it tomorrow. Thank you! $\endgroup$ – Rodrigo Mar 23 at 5:20

I have calculated the perihelion and aphelion distances,

q = a*(1-e); // perihelion distance
Q = a*(1+e); // aphelion distance

the perihelion and aphelion longitudes,

angPeri = (lon-v)*Math.PI/180;
angAph = (lon-v+180)*Math.PI/180;

the perihelion and aphelion coordinates,

xPeri = q*Math.cos(angPeri);
yPeri = q*Math.sin(angPeri);
xAph = Q*Math.cos(angAph);
yAph = Q*Math.sin(angAph);

then the center of the ellipse,

xEll = (xPeri+xAph)/2;
yEll = (yPeri+yAph)/2;

calculated a proportional to the canvas size,

aPx = a*maxPx/maxAU;

maxPx is the radius of the Mars orbit in pixels, maxAU is the radius of the Mars orbit in Astronomic Units. Then I've finally drawn the ellipse,


canvasWidth/2 and canvasHeight/2 mean that the Sun is positioned in the center of the canvas.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.