This project is in plain HTML, JavaScript and CSS. The aim of the project is to create an educational/fun model of the solar system — with maximum accessibility — while also demonstrating some Canvas API drawing and animation techniques.
Screenshot
None
Anyone with a browser can display the animation without additional dependancies like IDEs or web servers. Code can be modified with notepad
Simply download the ZIP or clone this repository.¹ Now navigate to the solar-system folder, then copy the index.html path and paste into your browser address bar and prepend file://
example: file://C:/github/solar-system/index.html
For easiest access, click the green Code button above and select Download ZIP.
Follow instructions above in Accessibility for file protocol ¹ Git required.
Alternatively, you can see the animation here: demo
-
- Spacebar: stop/start (Also screen click/touch)
- +: increase speed
- -: decrease speed
- t: show orbitPaths
- f: hide orbitPaths
-
- Solar system is not shown to scale.
- Earth completes 1 ordbit in ~60 seconds with default speed. Other planet orbit are scale from Earth's speed.