Here is a little fun animation (in Javascript) I made recently.
Click here to see the solar system (Firefox only)
 |
 |
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.