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 because 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.

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).

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:

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