React Orrery

React | Javascript | Tailwind

Totally inaccurate React model of the solar system!

Runs Like Clockwork

This orrery is implemented by three react components: SolarSystem.jsx, Planet.jsx and Satellite.jsx, the code for them is here on my github blog repo

SolarSystem.jsx is the root component that contains the others, its main job is to share a time state with its children, and keep the time updated.

It also handles the twinkling of the stars, the updating of the simulation speed, and some boring resize behaviour (that we won’t get bogged down in here).

Children of the Stars

The other thing the SolarSystem does is to hold and instantiate its child components. Each child component just displays a spacey character from an emoji font, and holds various properties useful for positioning itself in the solar system (like orbit diameter and year length). All the child components need to be passed the current time.

Note that earth has the moon as a child component, and that the sun can be implemented as a planet on an orbital radius of 0.

Planetary motion

The Planet components take the orbital information passed down from the SolarSystem and use it to absolutely position their emoji character on the solar system by calculating leftPos and topPos. Additionally, rotation and scaling are supported to add some interest to the animation.

Planets can have children (i.e. moons) and can pass their own position down to a child (as parentX/Y) so that moons can orbit their parent planet by offsetting their own position from their parent’s position.

Satellites and Space Junk

The other sprites in the scene are all implemented by the Satellite component, which is very similar to the planet component, but supports a stretched-out orbit and different rotational spinning. Not very much code is needed - here it all is:

Acknowledgements

This orrery would not have been possible without the UseInterval hook from Overreacted