Original idea by elplanetaerrante.

Implementation

First sketch

seccond sketch

Prototype here

Source code here

Details to add

• [x] Change the color of the barycenter to better differentiate it from the stars.
• [x] Add mention to elplanetaerrante
• [x] Add tool tips with explanation on what is each variable.
• [x] Add a bit of space on top.
• [x] Make sliders bigger for mobile.
• [x] Change github link to repo link.
• [x] Fix orbital period

Simulation

The process of simulating the two body problem in real time with the mass ratio, excentricity and semi-major axis as parameters was not an easy task. Fortunatelly I was able to come with a solution to do this, that works well enough to give an aqurate representation of the orbits in real time.

The orbit of the blue planet is created based on it’s excentricity and semi-mayor axis. It’s right foci is centered in the canvas. This foci will become the baricenter later.

While the orbit itself is easy to create, ensuring that the planet moves at the right speed at each time is not. For this we need the funtion $r(t)$ (position based on time). The Law of Areas becomes important now.

A line that connects a planet to the sun sweeps out equal areas in equal times.

We need to adapt it to a two body problem where the center is not the sun but the baricenter. We know that $t(A)$ is linear (time based on area swept) so it’s enough to get an $r(A)$ (position based on the area) to get a proper scale of time for our position.