In the beginning
When we first started this project, we didn’t really know how it would turn out. We had a basic idea of the approach we would take, but little experience with HTML5 projects of this scale. The technology is all relatively new, so there isn’t that much of reliable information and best practices around. It felt like a small expedition into the unknown.
The premise for the website was that it should be an example of html 5 – awesomeness. Performance was key. It had to run fast and stable! This would become a challenge.
We started out on a piece of napkin, a quick brainstorm on how we would structure the project and the code. What would the code look like? What would be the best implementations from a performance point of view? We started out with the logo. Our "piece de resistance", a way of showing what HTML5 was capable of.
The logo created by our designers looked really funky, like a web of letters. So that's what we wanted it to act like: a web. It needed to be a playful eye-catcher, but it shouldn’t distract the user from the frames.
We began by creating an object for the circles (Orb). This would be the key object for the logo. The orb object started out as just a big function to create a circle with a stroke, with options like fill color, stroke color and position.
After we'd created this basic object, we created an object for the lines. They would form the connection between the orbs. A line had a starting and ending orb, and should always be drawn like that. The lines could be straight but should also be able to bend, so then we added in a bezier method.
Afterwards we added some basic mouse interaction to the orbs, and because of the connection the lines had to the orbs, the lines would move too.
Now we had the base for the logo, and we could start building the letters. The Letter object would manage data loaded from a static JSON file and translate the coordinates in this file to Orbs and Lines.
Once we had all the coordinates for the letters, creating the web of letters was a piece of cake.
To make the logo stand out a bit, we also placed a gradient behind the logo. A standard static radial gradient would be a little boring on a living logo like this, so we created a gradient confined to a path. The path consists of the lines that made up our letter web.
Finally we added an interval, that would make our animation come to live one millisecond at a time.
After some optimisation and testing, the logo was finished. It looked awesome! Now it was time to start work on our grid.
When we started building the grid, we planned it to be quite static. One big canvas with your screen as the viewport. We had to choose from the following options:
- Building it with html5 tags and jQuery masonry
- Using multiple backgrounds and scroll backgrounds
- Create a big predefined grid of about 9 times the screen resolution, with your screen as a viewport and you can move over the grid, until it hits the bounds
- Create it on a canvas and build a ‘living’ grid
After some discussion and brainstorming, we opted for the last solution, because we really wanted to show-off what HTML5 can be.
First of all, we started off with building the grid itself, without interaction, on a separate page. The grid had to be built out of frames. These frames would share an almost identical skeleton, so we could create an object for it (Block). All frames had to have a background image, a position and a hover state. I’m especially mentioning the hover state, because it isn’t as easy as it looks.
Since the grid is drawn inside a canvas, you can’t set a hover handler on the frames itself. We had to create a hover handler on the canvas, and then compare the mouse position with the position of the frames. If the mouse position was inside a frame, that frame should show the hover state.
We started off building the grid by creating a Grid object. This object is supposed to measure the screen resolution, and build rows of frames accordingly. The grid needs to have bounds, so it would create blocks that could partially fall off the screen. We basically created an array with references to all visible blocks, which are rendered by using an interval.
When we had successfully built the static grid, we needed it to scroll. This was quite tricky since the grid just covered a little bit more then the screen. We had the array with all visible blocks and we had the position of all blocks. We added an update function to the blocks so we could move them. The Grid object could then determine where the mouse is and pass the move action to the blocks. Each time a block went off screen by a certain bounds, it is deleted from the array and another is added on the other side.
Now we had an infinite scrolling grid. After optimizing and bugfixing, we added some minor functionalities like the ‘claim a frame’ frames and some empty frames to act as a sort of ‘oasis of calm’.
What is it
This project is a competition for Dutch developers to create a HTML5 application inside a frame of 300x300px. The competition has already started and will end on the 25th of March. Visitors can vote on their favorite frames by using the on-site voting mechanism, or by sharing or tweeting the frames.
The ultimate best frame developer will win a xbox 360 + kinect and a really cool 3D figurine.
Since performance was key in this project, we did a lot of research to find out about best practices and how to optimize your code for performance. I’ll talk about this in my next post.
Smashing magazine also tweeted Framerate Fest (a feat we're quite proud of). This of course resulted in a wave of tweets, bringing a multitude of people to the website.