• About
Triona Weblog

Software Development and much more

Visualization of the solar system (in Javascript)

30.07.2013 by Anton Autor

Here is a little fun animation (in Javascript) I made recently.

Click here to see the solar system (Firefox only)

anim2 anim1

So what do we see?

The planets of our solar system orbiting around the sun. The planets of our solar system are
Mercury, Venus, Earth, Mars, Jupiter, Saturn, Neptun and Uranus. Pluto has lost its status as a
real planet in 2006, it is a dwarf planet now, but it’s in there nevertheless.
Included are all moons which have a diameter of 2000km and greater.

When you start the animation, you don’t see all planets at once, planets like Jupiter or Saturn are too far away.
Click on ‘-‘ or ‘–‘ to zoom out and ‘+’ and ‘++’ to zoom in.

You may notice other animations as well, like the NCC 1701, a borg ship, shining stars or astronauts.

This is a FUN animation, so please don’t expect academically correct results. E.g. some parameters had to be adjusted, like the orbit of the jupiter moons and the earth moon. And I haven’t yet checked the correctness of the orbital periods and the eccentricities of the planets and its moons.

What can you do?

Start/Stop: Start and stop the animation
+ / ++ / – / –: Zoom in and zoom out
Click on the planets and moons: to get further information.

Technically the animation is pure DOM manipulation of div elements that contain images, so there is no HTML5. Every planet, every moon and all other objects are controlled by js threads via window.setInterval. Almost all animations are done by hand, i.e. by changing the position of the images.

So the core of all animations is this:
HTML

<div class="planet" style="position: absolute; left: 0px; top: 0px">
 <img src="planet.gif"/>
</div>

Javascript

// img is referencing the image within the div-tag
animID = window.setInterval(function() {
   img.parent().css("left", parseInt(imgLeft) + "px");
   img.parent().css("top",  parseInt(imgTop) + "px");
   imgLeft += chgX;
   imgTop  += chgY;
}, updateInterval);

Please feel free to make any comments, suggestions, corrections etc.

Enjoy!

Disclaimer: Images and info window taken from Wikipedia.

Posted in: Java Tagged: animation, CSS, javascript, jQuery, Solar System
September 2023
M T W T F S S
 123
45678910
11121314151617
18192021222324
252627282930  
« Nov    

Tags

API Architecture CDI Collections Comparable Comparator Database EA Eclipse EJB Enterprise Architect Excel Hessian HTML Iteration Java Java 8 JavaEE Java EE Java Enterprise Development javascript Javascript Canvas HTML5 JEE JEE 6 JPA jQuery JSF linux Makro Map MariaDB Maven Oracle Plugins Relation relationship Richfaces Service Service Facade Set SOA Subversion Tutorial VBA XML

Recent Posts

  • Domain Driven Design und Event Storming
  • NESTJS BEYOND „HELLO WORLD“
  • Jakarta EE 9 – An upheaval with difficulties
  • Jakarta EE 9 – Ein Umbruch mit Schwierigkeiten
  • Erste Schritte mit Hibernate Spatial

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Copyright © 2023 Triona Weblog.

Impressum | Datenschutzerklärung