On the Floor

Remember the first time you looked at some Assembly code, and you thought, "OMG, WTF is this?" That's kind of how I've felt every time I've looked at SVG markup.  So, when I stumbled across Raphaël, a javascript library that lets you create and manipulate SVG images on the fly, I thought that this might be a good way to finally learn something about this stuff.

SVG (w3, wikipedia) stands for "Scalable Vector Graphics."  These are graphics that, rather than being defined on a pixel by pixel basis ("raster graphics"), are instead defined by mathematical equations ("Draw a line from (0,0) to (25,4). Now draw a funky curve to (-12,-8).  Now draw a line back to the start.  Fill it in with chartreuse").  The big problem with raster graphics is that when you try to scale them up, you don't have the information to do so, and you lose quality.  With vector graphics, though, you just change the scale of the graph and run the calculations again, and your image is a smooth as butter.  SVG markup is a language like html or xml that lets you create all those funky shapes and chartreuse fillings and render it in an html <canvas> element.

Raphaël's super-awesomeness is that it wraps up all of this stuff in javascript, with the following benefits:

• because you are used to javascript, the barrier to entry on SVG is lower
• SVG elements become objects, and attributes become properties, and this makes them easier and more intuitive to use
• since you are probably using js to manipulate the rest of your site, why not put all this stuff in the same place?

There are a couple of downsides, though.  For instance, you are still going to have to learn all the arcane syntax that lets you create paths more complicated than simple shapes, and gradient fills, and all that stuff (remember Logo and that damned turtle?).  And, if you want to make complex shapes, you had better get some graph paper, because this stuff can get tricky to do in your head.  And, since we have introduced another layer of abstraction, SVG features not implemented / improperly implemented in Raphaël will be unavailable to you (I'm thinking of the "viewport" property in particular, but I could be wrong about this.)  Still, those are all arguments you could make about any language/library, I suppose, so maybe that's just being picky.

For my first Raphaël project, I wanted to pick something that was simple, but still kind of interesting.  Around about the same time I discovered Raphaël, my 5-year-old son started getting into the solar system, and so we have been reading a lot of kids books about the planets and the sun and stuff.  So, I figured that I would make him a little solar system in a box that he could play around with.

In creating this project, there were some interesting considerations before I even did any coding.  My first thought was that I wanted to build an actual scale model of the solar system.  That is, the planets' distances from the sun would be mapped to the same scale as their radii, so that you could get a real sense of their prominence.  Taking Mercury as the smallest planet (Pluto is a DWARF PLANET!  Get used to it.) and setting its diameter of ~4880km equal to 1px, I worked out that I would need a canvas 1,845,674px x 1,845,674px in order to fit in the orbit of Neptune.  So, my solar system uses two sizing scales, one that scales the planets' distances from the sun, and one that scales their sizes.

My solar system is pretty simplistic.  Among other things:

• Planets are circular, not elliptical
• Orbits are circular, not elliptical
• There are no moons, dwarf planets or comets
• The Kuiper Belt and the Oort Cloud aren't shown
• The planets don't start in their current positions.  Rather, they are just lined up like an astrologer's wet dream.

Also, there is a bug in here somewhere.  If you speed up the animations, you will notice that the orbits get a little wonky after a few revolutions.  Not sure if that is a timing issue, a bug in the code, a bug in Raphaël or a bug in the browser.  If you figure it out, let me know.

Check it out here:

http://factore.ca/experiments/solar_system/index.html

Let me know what you think!