Map of the ’Verse

Rendering the Firefly universe using HTML5, CSS3, jQuery and XML.

Hide controls Hide explanation Reset

Controls

Use the LEFT and RIGHT arrow keys to change the rotation speed. Use UP and DOWN to zoom in and out.

Hide names Fancy fonts

What's this?

This animation shows the fictional universe from the TV series Firefly. It's been created by Koen Hendrix.

About the animation

The planets and suns are rendered on a full-screen HTML5 Canvas. (If performance is slow, try making you browser window smaller.) Their names and 2D coordinates are stored in an XML file. Javascript/jQuery code reads the XML and transforms the 2d coordinates into a quasi-3D projection, and draws a scaled image (.gif and .png files) on the canvas for every solar body.

The background and overlaying panels are not on the canvas, but styled using CSS3 (notice the transparency, rounded corners, and glow effects). The 'Orbitron' font is pulled in from the Google Font Directory. Finally, the black panels are draggable thanks to the jQuery UI library.

Some years ago I made a similar Verse renderer using Flash and Actionscript 2, for a Firefly-themed roleplaying event. I thought it was nice to recreate it now as a normal web page, using the HTML5 Canvas.

About Firefly

Firefly is a 'sci-fi western' TV series from the mind of Joss Whedon. It's set in 2517, when humanity has been forced to explore the stars because ‘earth got used up’. The series follows the adventures of the renegade crew of the spaceship Serenity.

I love the series not just because of the action and the humour, but mostly for its wonderful combinations: eastern and western culture, spaceships and six-shooters, next-millennium technology and current-day dilemmas.

Sadly, only 11 episodes were ever made before the series got cancelled. Because many planet names are mentioned but never really detailed in those 11 episodes, any Firefly map contains a lot of guesswork (or rather, artistic freedom). This one is no exception.

About me

I'm Koen Hendrix, a web experience designer and developer. I'm currently living in the UK. This demo is part of my online portfolio. If you want to contact me, just send me a mail.