Hakim

It's that time of the year again! In late 2010, having spent five great years working at Fi, I was determined to change up my professional life. After interviewing with Qwiki and accepting the position of Lead Interactive Developer it was decided; I was moving to San Francisco! It took a good few months of hard work to sort out all of the practicalities but it was definitely worth it now that I'm here.

Fortunately I've still been able to keep this site updated and worked on a variety of projects and experiments throughout the year.

The first project to see the light of day was Sketch, a drawing tool that mimics the style of old cartoons. It was refreshing to build something that allows others to be creative. Now – almost a year later – over 78,000 sketches have been saved.

Sketch was followed by a short freelance project which involved building an interactive and animated logo for a Canadian media production company called Meru. Try it out on their site; http://meru.ca/.

Next I stumbled into the land of CSS3 3D transforms and ended up trying them out on two projects; Holobox and CSS3 3D Slideshow (later renamed reveal.js). A few weeks ago, in mid December, I resumed my CSS 3D pursuits by creating a rolling effect for links and building a Christmas tree out of form elements.

Being far from tired of working with <canvas> I also created a new game called Coil, it's similar in design to Sinuous but adds a touch of WebGL and perhaps an element of stress to the gameplay. Shortly thereafter I worked on a tool called Textify.it which allows you to recreate images using thousands of letters of text. Using Phonegap, I was able to easily port Textify.it to iOS.

It's been really encouraging to see that there's still a lot of activity on sinuousgame.com even though it's been out since 2010 – meaning ancient, in internet-time. In the past year it saw more than 2,000,000 visits.

Now the new year is approaching and with it new adventures. 2012 will start with relocating to NYC and opening up Qwiki's new office. Can't wait to see where it goes from there!

Building Coil presented me with a few interesting technical challenges. Primarily I had a hard time making the game operate at a reasonable framerate since it uses both 2D Canvas and WebGL. Double whammy. Even though I am still not fully satisfied with how the game performs, I wanted to share some of the optimization techniques used.

Redraw Regions

The best canvas optimization technique for animations is to limit the amount of pixels that get cleared/painted on each frame. The easiest solution to implement is resetting the entire canvas element and drawing everything anew but that is an expensive operation for your browser to process.

To limit the areas which are cleared in Coil, I keep track of exactly which rectangular regions are being painted in so that I can then clearRect(x,y,w,h) only those. This results in the following flow:

1. Clear pixels of all redraw regions
2. Reset redraw region list
3. Paint all elements and store their individual redraw regions

Coil has a debug mode in which these redraw regions are displayed as green rectangles, try it out.

Procedural Sprites

Even though I'm an advocate for generating graphics procedurally, sometimes that's not the most efficient approach. If you're drawing simple shapes with solid fills then by all means drawing them procedurally is the way to go. But if you're drawing more detailed entities with strokes, gradient fills and other performance sensitive make-up you'd be better off using image sprites.

In Coil I use a hybrid approach. Graphical entities are generated procedurally on canvas, but only once as the game starts up. For the rest of the game's lifespan I paint copies of those sprites rather than repeatedly generate the same drop-shadow, gradient and strokes.

One final tip when working with image sprites is to always draw them on integer x/y coordinates for better performance on OS X browsers. You can read about this in greater detail here.

Computation Distribution

The Chrome Developer Tools profiler is very useful for finding out what your performance bottlenecks are. In my case, for Coil, the two heaviest operations were the discovery of enclosures and rendering of WebGL. Both of these operations were being executed on every frame.

To distribute the processing for these two operations I changed it so that enclosure discovery only occurs on even frames while WebGL only gets rendered on odd frames.

Performance Based Scoring

From a scoring point of view, bad performance can be beneficial when playing a reflex based game since it gives you more time to react. To combat this unfair advantage I scale down the scores by a factor of the current FPS divided by the target FPS.

Another, perhaps more elegant, solution to this problem is to base all game mechanics on time rather than frames.

Translating information from a format aimed at computers into a narrated presentation tailored for human beings is a powerful idea. I realized this after discovering Qwiki in late 2010 and couldn't stop playing around with it. Coincidentally I received an email a few weeks late from Doug Imbruce, founder and CEO of Qwiki, asking for a meeting. After that meeting – and many interviews – I was offered a job which I gladly accepted.

Having worked many years in the advertisement industry I'm excited about the move to a product oriented environment. Primarily because I have longed for an opportunity to invest all of my time and mental energy in one product that I personally believe in. I also want to broaden my scope and what better way to do so than diving into the San Francisco startup scene!

As the HTML5 spec is slowly making its way from working draft to recommendation and browser implementations are solidifying – the urge to make use of these new features grows strong.

Coming from a Flash background, and being a sucker for anything that moves or can be interacted with, I am most excited about the introduction of the <canvas> element which allows for bitmap drawing through JavaScript. I started creating some visual experiments using canvas a few months back and have gathered some tips for anyone dabbling in this neck of the woods.

Performance

When working with animation on canvas, performance can be a challenge since bitmap operations are very processing expensive, especially at high resolutions. One important optimization rule to follow is to reuse as many pixels as possible between frames. What I mean by that is the fewer pixels that need to be processed each frame, the faster your program will run. For example, when erasing pixels with the clearRect(x,y,w,h) method, it is very beneficial to clear and redraw only the pixels that have changed and not the full canvas. Unlike the Flash Player’s redraw regions, this management of “dirty rectangles” needs to be done manually for canvas.

State Stack & Transformation

The canvas can be manipulated via transformations such as rotation and scaling, resulting in a change to the canvas coordinate system. This is where it’s important to know about the state stack for which two methods are available: context.save() (pushes the current state to the stack) and context.restore() (reverts to the previous state). This enables you to apply transformation to a drawing and then restore back to the previous state to make sure the next shape is not affected by any earlier transformation. The states also include properties such as the fill and stroke colors.

Compositing

A very powerful tool at hand when working with canvas is compositing modes which, amongst other things, allow for masking and layering. As an example you can check out Bakemono, where composite modes are used to mask the eye and mouth. There's a wide array of available composite modes and they are all set through the canvas context's globalCompositeOperation property.

Anti-Aliasing

To allow for sub-pixel drawings, all browser implementations of canvas employ anti-aliasing (although this does not seem to be a requirement in the HTML5 spec). Anti-aliasing can be important to keep in mind if you want to draw crisp lines and notice the result looks blurred. To work around this you will need to either round to integer values or offset by half a pixel depending on if you’re drawing fills or strokes.

Clearing the Canvas

To clear the entire canvas of any existing pixels context.clearRect(x,y,w,h) is typically used – but there is another option available. Whenever the width/height of the canvas are set, even if they are set to the same value repeatedly, the canvas is reset. This is good to know when working with a dynamically sized canvas as you will notice drawings disappearing.

Next Steps

If you’re interested in learning more about canvas, I would suggest getting started by reading through Mark Pilgrim's wonderful Dive Into HTML5 chapter. Once you're up and going this cheat sheet is a great point of reference.

Conclusion

Canvas has been around for quite a while already and is supported by all modern, and some not so modern, browsers. This being the case, I think it’s very much ready to be used for real production. Some suitable places to utilize canvas would be to enrich buttons, charts/data visualization and navigational elements such as a list of thumbnails for an image gallery.