JavaScript Curiosities: A Solar System Rotator Script

JavaScriptSearch
Wednesday, August 2, 2006; 02:14 AM

The latest demonstration of what is possible with JavaScript comes from young web programmer and enterprenuer Will Jessup.  Using the JQuery JavaScript library, he has put together an impressively compact (in terms of bandwidth) graphical simulation of the solar system.

“And yet Its still moves.”  --Galileo Galilei

The rotator script makes the images of the planets revolve around the sun and, as an added bonus, allows you to rotate the whole view with your mouse.  Although the author initially "lost" Saturn, but the planet is at its place now; also, the script seems to work only in Firefox and Opera. This feat of unorthodox JavaScript programming is contained in a the 5KB rotator.js script.  You can look at it for yourselves at willjessup.com/sandbox/jquery/solar_system/js/rotator.js/.

Will Jessup is also associated with a mysterious project, called Kevo, but the only details on his site about it are some projects for a logo with decidedly Web 2.0 feel.  We'll keep you updated.

The JQuery JavaScript library, used in creating the model of the solar system, is a ligthtweigh framework for web developers, which "takes common, repetitive, tasks, stripping out all the unnecessary markup, and leaves them short, smart and understandable."

Here are some of the techniques Jessup used in creating the 3D JavaScript solar sytem, as described in the JQuerry blog:

• He adjusts the opacity and z-index of the images based upon the depth of the element.
• The height and width are also adjusted dynamically - but are all laid out using fontSize and EMs, allowing you to also simulate depth-of-field with text (in addition to static images or elements).
• The background moves based upon the speed, and direction, of rotation.