Check out this awesome project by our Australian DPE team!
From their blog:
We decided to push the boundaries for HTML5’s canvas tag in this beautiful photo gallery visualiser. So we at La La Ninja decided to make ForestFly – http://forestfly.lalaninja.com.au
by Tom Knight from Xamling
ForestFly was designed to provide a simple, yet visually appealing method of viewing facebook photo albums. With limited knowledge of Canvas, HTML5 Video and Audio elements, our designer and I managed to complete the project in less than 5 days thanks to broad community knowledge and relative ease of use.
Technologies Used
ForestFly is designed around HTML5?s Canvas tag element. Canvas allows you to rapidly “paint” elements to an area on your website, stacking them up into layers to form a full picture. If you clear and repeat rapidly you can easily create a smooth animation.
Canvas does animation very well, allowing full control over placement of elements including scaling, rotation, alpha channels etc, but not much more. It does not have the ability to store information regarding the elements you are using in the canvas or their metadata. To implement this I leveraged some previous XNA experience and created a series of world object types in JavaScript; each inheriting from a core base type that contained the most basic metadata – x/y Coordinates, scale, rotation etc. More advanced types included image or text information and anything else required to correctly render. Each of these classes has an Update method to move and change the element as required and a Draw method to render the element in the canvas in its current state. For each frame of the animation the driver method simply calls each of the world objects to update and then calls them again to draw. This process repeats after a time delay which controls the speed of the animation.
Canvas does not provide a direct interface for user interaction like button clicks etc. It would be fairly easy to implement this system for Canvas if you detect mouse clicks and determine what object area this relates to based on objects in the JavaScript arrays. But given a limited time-frame we decided to not include the menus and splash areas within the canvas element. These are instead implemented using Knockout JS coupled with jQuery templates which also allow for a more systematic MVVM approach.
The floating particles in the background are sampled from a HTML5 video element which is hidden off screen. Canvas has the ability to capture the current frame of the video and paint it into a layer. The bird song is playing in a HTML5 audio element.
Lessons Learned
Canvas has a few oddities that you have to overcome; for the most part they revolve around the way that you draw on a canvas. For example, once an item has been drawn to the canvas, it is essentially set in stone for the current frame with all the previously drawn items. If you want to rotate the next element you need to rotate the entire canvas, but the canvas rotates around the 0,0 top left corner which would not usually allow for the desired effect. So the end result simply means offsetting the canvas so the item area is situated around the 0,0 coordinate, rotating the entire canvas, painting the item, then reversing the rotation and offset. Thankfully canvas includes a stackable state save and restore feature that helps out.
HTML5 video does not auto play on some mobile devices due to bandwidth considerations. You can allow video to play with a user initiated command but it can prove to be a hindrance when trying to make a fluid user experience.
ForestFly renders really well in some browsers and suffers in others due to the JavaScript engine and GPU integration. Within the current versions of browsers at build time, IE9 ran by far the smoothest and Firefox was fairly good. Some others such as Chrome really struggled to render at the required frame rate. A few Canvas features were not supported at all in certain browsers such as text shadowing.
Online resources
HTML5 and canvas are still relatively new, and cross browser support for different elements varies. Thankfully the community assistance available online is vast.
Canvas in general
Getting started with Canvas was very easy thanks to the plethora of tutorials found online. The Mozilla Developer Network has a fantastic tutorial on how to get started and keeps everything basic and well defined. From there you can branch out into more advanced areas such as HTML5 Video Canvas integration (see below), shadows and alpha channel transparency.
As with most animation you will probably find yourself eventually looking for tutorials on scaled rotation, object intersection which are generally mathematically based. With a bit of searching around you should be able to find what you are after.
Webfonts
ForestFly uses several non-standard webfonts for text. Font Squirrel have a fantastic generator that allows you to upload any font and returns the font file variants and a style segment to simply insert into your CSS files.
HTML5 Video and Audio
All the major browsers support HTML5 video and audio, but there has not been a unanimous decision made over the default supported codecs. During trials we found it quite difficult to embed these media elements with full cross browser support. This guide contains all of the information you should need and gives examples on how to actually convert your video with free converters found on the web.
Painting HTML5 Video frames onto Canvas elements
The design of ForestFly required the video layer to be set in front of several layers in the canvas. Thankfully Canvas has the ability to grab the current frame out of any HTML5 video currently playing on the page and render it as an image. The frame can be manipulated to suit your needs and the main video can be offset using CSS to hide it from view. html5doctor has a good report on how to achieve this.
Finding media
The video, audio and most of the images used in ForestFly where purchased from the ol’ faithful iStock photo. It’s hard not to find what you’re after amongst their massive collection.
All Up
Canvas is a brilliant tool with ever increasing browser support. It allows you to easily compile static images or full blown animations without the need to install additional plugins.
HTML5 video and audio elements are also great once you figure out how to convert your media to the correct formats for full cross browser support.
We hope you enjoy our fun little project! ForestFly
Tom
Follow