HTML5 Monkey

1 Comment 27 February 2010

HTML5 Monkey… doesn’t quite have the same ring to it, but I thought I’d have a little play with HTML5 anyway. So far 2010 seems to be the year where people Flash bash. “It’s not accessibly, it isn’t great at SEO, HTML5 will wipe it out” – it’s all being said. I personally think there are some exciting new developments happening in HTML5 and JavaScript, but I very much doubt it’s the end of Flash. Flash will either innovate or die, and when you look at how far it’s come in recent years (typed arrays, the sound spectrum amongst other stuff) I reckon Adobe will innovate Flash and it will live on for some years to come. Grant Skinner summed it up brilliantly: “you shouldn’t get so emotional about technology, I don’t care if it’s Mac vs. PC, XBox vs. PS3, or Flash vs. HTML 5, I say use whatever works for you.”

Anyway, with that in mind and a bit of general curiosity I thought I’d have a play around with some JavaScript today. The plan was to re-write a couple of the physics stuff I’ve been doing lately using HTML5 canvas and the JavaScript drawing API. I actually really enjoyed playing around with it, and found it very simple to pick up – although my code may not be written in the best way (I’m by no means a JavaScript Developer).

It felt a lot like AS2 (well, that’s because it is) and writing AS3 is so much more fun (I guess cos I’m so familiar with Flash). However, on a positive note the apps run a lot faster in JavaScript.

With Away3D writing a library, and Google working on OpenGL, I think we’ll see some really cool stuff in HTML5 this year, and I’m really looking forward to learning a bit more about it, although my main focus will definitely remain on Flash (for the time being anyway).

Check out the two apps I’ve ported, below is a link to both the JS version and the Flash version so you can compare the two. If you don’t see anything in your browser for the JavaScript examples you will need to either upgrade you browser or grab a copy of Google Chrome.

ColorWall


I’m pretty bored of ColorWall but it had to be the first thing I re-wrote as I knew it would give me the best indication of performance differences.

> HTML5 JavaScript Canvas version
> Original AS3 Flash version

WobbleWall


It was getting late and I couldn’t be bother to make these exactly the same so this is a slight adaptation of WobbleWall. For the JS version I purposefully changed the effect slightly (it isn’t a bug).

> HTML5 JavaScript Canvas version
> Original AS3 Flash version

View the page source for all the code. If your a Flash Developer thinking of Playing around with canvas below are some useful/inspiring links:

> HTML5 Canvas Cheat Sheet
> How to Draw with HTML 5 Canvas
> P01′s Mars Canvas – check out the source code for this
> Some cool HTML5 stuff from Dr Doob


Any links, help, advise is very much appreciated so please post a comment.


Posted in HTML5, JavaScript

One Response to HTML5 Monkey

  1. 28 February 2010

    Nice! Good selection of HTML5/Canvas links. Hopefully very soon JS will catch up on AS3 syntax and improvements. It does indeed feel a awful lot like writing AS2 (i.e. all the little scoping “worries” are not nice to deal with).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>