Cascading Solar System
When I was a kid, I wanted to be an astronaut. Or maybe an astro-physicist. Or maybe a rocket scientist. Or an archaeologist. Safe to say that, between them, George Lucas and Steven Spielberg influenced my aspiring career decisions immeasurably. My parents recognised the facts behind the science fiction and encouraged me, bought me books and telescopes, brought me to museums, watched National Geographic documentaries with me. So though these interests came from the movies, they very quickly became interests and hobbies that I still hold dear today.
I recently purchased a new telescope for myself because, as a big child making my own money, I could! Venus is low in the late twilight sky the other night and while looking at it I wondered, what the relative positions of the planets are to each other at this very moment. I didn’t have an answer, but good ol’ Internet found me the solution. I wondered if there was a CSS animated Orrery available and when I couldn’t find one, I wondered if I could make one. So after 3 days of tweaking, researching planetary orbits, motion and lunar attributes, I came up with this:
There’s a lot to it that isn’t obvious. The timing is greatly increased. Even at 1 day = 1 second, Pluto would still take 2 months to complete an orbit! This means that the orbits of some moons (specifically Mars) are insanely fast. Phobos orbits Mars once every 7 hours. Scaling is not always a good solution. Also, the relative diameters of the planets is more or less correct, but if the Sun were to the same scale, it would be 700 pixels wide. To get the colours of things like planets, Jupiter’s stripes, Saturn’s rings, Neptune’s spot, etc, I took high quality Wikipedia images into PhotoShop and did 101 × 101 pixel averages of the colours. Oh yeah, and the Sun? That’s a live image direct from the SDO (Solar Dynamics Observatory) satellite, so those spots are real!
I would love to find a way to start the planets off in their exact current positions in the sky, but I can’t find an API or a source to give me that data. I’m also kinda happy that there’s no JS in this, so I’m not really too pushed if I never find this.
I hope you enjoy this as much as I enjoyed making it. If you have codepen access, try changing the scale (not great above 2) and the timing to see the changes I mentioned above.