Impressions from the IE9 beta launch event

IE9 Beta Launch Event

Yesterday I had the opportunity to attend the IE9 Beta launch event and I’m glad to have gone. This was a good day for IE and I think a good day for the web overall. Not only was Microsoft able to show that IE was taking HTML5 seriously, but also that they were pushing the experience of browsing the web to something better.  Info on the GPU and multiple core acceleration, modern browser features, nifty native integration and more of the new features are available on the site: beautyoftheweb.com

The biggest topic here is the revitalization of the web and what we can aspire to do as web designers and developers in this new brave world of HTML5 and all of its accompanying technologies.  During the keynote, Jeff Henshaw Director of Bing User Experience demoed an HTML5, GPU accelerated smarter version of Bing.  Not only was the video tag, CSS3, Canvas and other new features used, but it was presented as a whole experience. Avery thoughtful experience, and it was better than a website from the past.  (Make sure to watch the video found at the bottom of the linked article).

Is this “revitalization of the web” I’m going on about happening only because of the IE9 beta?  No, of course not.  The perfect storm of advancement and adoption of newer HTML5-ish technologies, tools support, browser support certain devices (iPad) and awareness is happening.  IE9 just gave the storm a whole lot more energy.

As a developer who worked on one of the ways to experience IE9, I can say that the performance is stellar, the support for Canvas is great and native integration is simple to accomplish.  I’d like to call out a few of these projects that shipped yesterday.  Although there are many to choose from, these are the ones I had a chance to really get to know or chat with the developers/artists that impressed me.

  • Comix Parallax from Steam Design – wish all comics moved like this
  • Endless Mural from Joshua Davis – collaborative art where everyone is a designer
  • Jitterbugs from Cynergy – fun game with great music and visuals
  • Rough Guides from Metia – crowd sourced traveling advice with flickr photos
  • BeatKeep from Archetype – because you  can always use a beat box
  • Lost World’s Fair from Mighty and Friends – WOFF extravaganza
  • Jack and the Beanstalk from Clarity Consulting – graphical storybook w/physics
  • and of course, Agent8Ball from Pixel Lab – bombs, billiards and bow ties!

One of my favorite quotes was from Brendan Hall and Joshua Davis regarding performance: “when running the code for the burst gesture the first time, we were like, ok let’s see how it runs… expecting something to go slow… and boom!  It just worked!”.

That may not be word for word, but I know the “boom” part was right.

And it may sound magically, but a GPU accelerated Canvas implementation and a speedy JavaScript engine is pretty dang awesome.

Flash to Canvas Experiment: Bonsai Tree

Bonsai Tree canvas sample

In response to the HTML5/canvas hype, a challenge was recently issued to the public – recreate a wicked cool Flash button with an animated background in HTML5. The challenge was met within a few hours with decent results. Although proving not to be too difficult, the conversation around the challenge is interesting. How do the technologies surrounding HTML5 stand-up to plug-ins technologies? And more specifically in my interest, how reusable are existing skills and code in this new brave world of futuristic browsers?

One of the comments about the challenge offered the LiquidJourney site as a source of difficult experiments to recreate in canvas. After browsing a few of the examples, the bonsai tree or “Lines > 97” stood out as a great example to try. Not only did I like the aesthetics, but I also thought it would be a nice test of the canvas drawing API along with the browsers’ ability to handle the bloom effect of the tree.

I’m pretty pleased with the results and the conversion was pretty simple to accomplish.

A few notes on porting the code form AS2/Flash to JavaScript/Canvas:

  • Remove all of the type definitions next to  the variable declarations (var velocity:Number = 0.85; -> var velocity = 0.85;).
  • Move enterFrame logic into a draw function that is repeated using setInterval.
  • Hairline thickness for lineWidth in Flash is 0, for canvas I ended up at 0.2.
  • Change curveTo to quadraticCurveTo, nice that canvas also has a Cubic Bezier curve built in, but not needed in this case.
  • lineTo is not an implicit stroke, this just adds to a subpath and you must explicitly call the stroke function.
  • Unlike Flash the lineCap style does not default to round, so that is set explicitly.
  • Remember to call beginPath when constructing a new path, otherwise the path will continue to grow and be painted on fills and strokes.
  • And to get it to work in Chrome, I had to change the reserved variable name top to something else, otherwise I just kept getting a reference to the main document window.

The source code for the experiment is of course available via View Source.  And the experiment ran well within all of the latest browsers: IE9 beta, Firefox, Chrome and Safari.

Dissecting the IE9 Fish Tank demo: PNG based sprite sheet animation with Canvas

FishIE tank

One of my favorite demos from the IE9 Test Drive site is FishIE Tank. Labeled a “Speed Demo” the FishIE Tank demonstrates hardware acceleration, canvas based image manipulation and PNG based sprite sheet animation. And watching the FPS meter on the side of the demo, with 500 fish on a wide screen monitor it still reads ~32 FPS, almost 60 fps with 250 fish. That’s worth taking a look at the code to see how its done.

I decided to recreate the demo to understand the code better.  This first part covers only the background image rendering and the sprite sheet animation.  Plus I’ve switched out the image and sprite sheet to something a little more unique.

Spinning Heads Part1

Run the first Spinning Heads demo
(for the best results run it in the IE9 Preview, Chrome isn’t too bad, Firefox is not so good)

Of course since this is just HTML, JavaScript and Canvas you can View Source and read the commented code to figure out how the demo works.  To save you some time, though, I’ll highlight the setup and the two main features.

Two canvas layers created during SetupSpinning Heads Part1 Diagram

When the page loads, the setup function is called and two canvas elements are created and added to the page. Pointers to the drawing context are then saved for reuse during the drawBackground and draw functions.  With CSS, the spriteCanvas is absolutely positioned so the heads appear over the background.

Drawing the background image

On load and when the window is resized the drawBackground function is called:

The main thing to point out here is the flip variable used to mirror every other background tile to create a smoother horizontally repeating background image, no matter what image is used. Vertically the image is stretched to match the height of the window.

Drawing the Sprites

During the setup, the sprites or Head objects in the case, are created with the createHeads function. A loop is then created using the setInterval function to call the draw function every 36 milliseconds. During the draw function each Head object is told to spin, effectively moving the next step through the sprite sheet.

Important to note here that in the draw method, if the context is not cleared first, artifacts from previous “frames” will remain. This is not a retained mode graphics system, we’re just creating a big set of pixels that all share the same layer.

The next bit of code to call out here is within the spin method a call to save() and restore() is used to manually add and remove the translate and scale transforms.  This way the transforms are unique to each Head.  Otherwise the transforms by default are cumulative and each successive Head would be moved further and further off the screen.  This is similiar to pushMatrix and popMatrix in Processing.

And finally the real magic, each successive draw call increments (or decrements when going in reverse) the cell variable which offsets the drawImage call so that the appropriate section of the sprite sheet is called.

So that’s it for the basics! If you’re familiar with procedural based animation the techniques should look pretty familiar to you. The biggest difference here is that there’s no plug-in or applet, just JavaScript and a modern browser.