Solar System Animation

Your primitive, sucky browser does not support the canvas element.

Here’s a swanky little bit of animation from the HTML5 Canvas. If you don’t see it, then your browser doesn’t support canvas, which means that you’re using an old version of Internet Explorer. (You should stop doing that.) The goal was to see what I could draw programmatically with the canvas API.

It started with just the sun, but then I wanted some planets, then a moon, and finally I added a starfield. The neat thing is the complete lack of canvas rotation. Instead of using the rotation method of the canvas, the sun is being drawn a little differently upon each interval.

Another neat thing is the use of classes. There are two different classes for this animation. There’s a Sun and a Planet. (That little moon is just a planet which is targeted on another planet instead of the sun.) They have their own methods and properties, so a simple loop can tell them all to adjust their positions before the next redraw.

One thought on “Solar System Animation

  1. Pingback: Animating Space Stuff with the HTML5 Canvas | Brian Cribb