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.
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)
Now we just need to draw from the current cursor to the second planet’s position = (radius 2, 0)
Now the funny part: Moving the planets around their orbits.
Not hard at all, we will try to rotate the canvas by
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 🙂