Planet Dance is a React application written in TypeScript.
Why TypeScript?
Well the main reason is beacause it adds a robust type system to JavaScript, since JavaScript does not have types by default and that means it is very easy to make errors and these errors will only be caught at runtime when the code is being executed by users..and that’s BAD…so TypeScript just elimates this problem by adding…types.
The main reasons why I made this project are: learn a new language (Typescript), a new web framework (React) and show people the beauty of our solar system. Infact, Planet Dance shows the amazing patterns made by planets’ revolution around the Sun.
The pattern is drawn by the line connecting the center of two planets that can be chosen from the ‘planets bar’ just below the title. To make the paintings I used ‘canvas’. The planets are ordered starting from the closest one to the Sun to the farthest one.
<img style = ‘width: 100%; height: auto’; src = ‘/img/posts/planet_dance/planets_bar.PNG’ alt=’Planets bar’>
Right after the selection of the second planet the animation will start!
The orbit of the planets are circular for semplicity, but everything is proportioned, from the revolution speed to the orbit dimensions.
As soon as the planets start dancing let yourself be carried away by the music and the beauty of our solar system.
Some exaples
Earth & Venus
Earth & Jupiter
This is only a couple of the many patterns, so have fun exploring the different combinations and let the planets amaze you.
How to use Planet Dance
I suggest you to try it on your PC to have a better experience. It runs amazingly on Chrome and Safari.
You can run my application by clicking on this link: planet-dance.vercel.app.
If you want to check the code and try this locally on your computer, just clone my repository from here.
Then just open your Bash and type “npm start”.
Enjoy
PS: I am still working on this project and I have some nice ideas about some features, so, if you liked it, keep yourself updated!