Inspired from this video

I found it’s very interesting when we draw the lines between planets. It also reminds me the Spirograph Drawing when I was a small boy.

Let’s give some minutes to try to draw it with Javascript 🙂

The main idea is to have 2 circles – 2 (perfect) orbits for 2 planets.

Now we draw a first line between 2 planets.

We need to translate the current drawing canvas to center, means (0, 0) becomes (width/2, height/2).

ctx1.translate(canvas1.offsetWidth / 2, canvas1.offsetHeight / 2);

Then we move the cursor to first planet’s position = (radius 1, 0)

ctx1.moveTo(r1, 0);

Now we just need to draw from the current cursor to the second planet’s position = (radius 2, 0)

ctx1.lineTo(r2, 0);

Now the funny part: Moving the planets around their orbits.

Not hard at all, we will try to rotate the canvas by

\[{2\pi \over 60}\]
ctx1.rotate((Math.PI * 2 * (v1 % 60)) / 60);

Great, now we just need to repeat it, and change planets’ positions every loop:

v1 += a1;
v2 += a2;

Extra: How about we have 4 planets? We will add a “moon” flying around our earth 🙂