HOW TO: Create a Galaxy Within a Website

After stumbling into the brilliant Galaxy.fili.nl website, we thought we should invite Filidor Wiese to guest post on how can you do such a wonderful thing and if you need to be a magician or not to create this in HTML5 & CSS3.

Galaxy.fili.nl is a new website where I promote myself as a front/back-end web developer. I felt it didn’t make sense to build yet another portfolio based website – mainly because most visitors wouldn’t be able to see past the various project designs, while my work, the underlying techniques and usability are less tangible. About a month ago I asked designer Arthur van ‘t Hoog to design a fancy new website where I could demonstrate some of the latest web techniques like HTML5 and CSS3.

You may also be interested in these articles:

8bit pixel graphics have been a recurring theme on some of my earlier websites, so we decided to build the concept around a pixelated character – which is essentially a virtual representation of myself. The character would re-enact my daily routine by showing sequences of animation depending on the actual time someone visits the website, for example I would be sleeping at night and drinking coffee in the morning. As a bonus feature we later added a time line controller that would enable the visitor to view other time slots without having to wait several hours. Here you see me doing one of my favorite activities;

We gave the character his own planet in his own universe because space as a theme is just awesome, also we really liked the idea of writing <body id=”universe”>. To simulate the vastness of space we wanted to create a sense of depth. We found that the best way of achieving this was to divide the website into a stack of layers and making them move in parallax. In effect objects nearby (like the planet) would move more then objects in the distance (like stars) based on the cursor position of the mouse.

THE SPRITE ANIMATIONS

Arthur did a smashing job at creating different sprite sheets for me to work with. In order to get the animations going I needed to build a custom sprite animator engine. The problem with conventional techniques, like using GIF or APNG animation is that it’s very hard to control from a Javascript perspective. For example, it’s impossible to figure out when an animation has ended and when to start the next.

Another requirement would be the ability to not only exactly time, loop, chain and script several animations in a row – but also to reposition itself frame by frame. This feature enables for more advanced animation. For example a walking character using a basic sprite sheet;

Inspired by Spritely I started working on a jQuery plugin that would be reusable within the project. At the core of the plugin is a background positioning procedure, efficiently delayed by implementing the window.requestAnimationFrame API (using Paul Irish’ browser-safe requestAnimationFrame). This Javascript API asks the browser if and how fast the animation should be running, removing the need for an interval based timer which is less efficient. As an added benefit the browser can stop the animation when the browser window/tab is invisible to the end-user, saving CPU cycles and on mobile devices battery-power.

In code, using the sprite animator would require an empty div-element as an animation placeholder and attaching the plugin to it;

TRIGGERS

Currently, on the website there are eight placeholder elements for animation (signal-tower, blinking eyes, space debris, characters, et cetera). One of the difficulties that emerged was the necessity for interaction between different placeholders. For example, the tower should only emit signals if the character is typing on his computer. Or in a more interesting example, consider the scene below;

My dog enters the picture and drops me a bone, next I throw it away and the dog follows it into oblivion. As you can see it starts out as a single placeholder, and ends up as two. For this to work I used custom Javascript events to let one placeholder trigger an animation switch to another placeholder. The green-bordered placeholder above is actually already present from the beginning but stuck in an invisible infinite loop. When the bone is thrown, a ‘stop’ event is triggered to exit this loop and the next ‘dog chasing bone’ animation is started.

THE LAUNCH

Finally on the 15th of July we decided it was good enough to launch, even though we probably could have gone on perfecting it indefinitely – a website like this is never quite finished. I’ve learned a lot while working on this project. For one, how to make good use of hardware accelerated CSS3 properties like transform and @keyframe and how to fall back on conventional techniques for the less then modern browsers. I’m proud to say that on the 22th of July the website won a ‘Site of the Day’ Awwward.

Thanks for reading, I hope you like the website as much as we enjoyed making it.