10 Amazing Examples of JavaScript and HTML5

Zef.me put together a list of 10 amazing JavaScript/HTML examples that a lot of people (me included) thought still required Flash to do.

Some of the highlights is an accurate (and performant) interactive cloth simulation by Andrew Hoyer. You can drag any node on the “cloth” around and have it’s 3D skeleton realistically react to the interaction; swinging around or flopping on the ground if you unhook it from the wall.

Another impressive technical feat is “Gordon“; a Flash runtime written in pure JavaScript and SVG by Tobias Schneider. The fact that you can even take a Flash SWF file and run it back using Gordon is amazing to me and the results look great; smoothly animated and accurate renderings.

Again, no Flash needed.

There is also a live video motion-tracking example that I couldn’t get to work (Because no one was in-frame at the time) as well as a Wolfenstein rendering demo that is more of a proof of concept then anything else.

Every time I see these HTML5/JavaScript demos I am blown away again and again at what is possible.

When Steve Jobs originally made the assessment that Flash was not coming to the iOS platform (and likely never would) there was a lot of uproar. With my limited experience with Flash and almost no knowledge of HTML5 at the time I thought that was a huge mistake and was happy when Google took up the Flash reigns.

Now we are seeing a turning of the tides.

It looks more and more like Jobs was right: Flash’s time has passed.

As Google moves forward with it’s support for Flash on Android, a year late and riddled with bugs, the experience of Flash on mobile devices (performance, bugs and battery life) proves to be nothing any of us want.

It is unclear if Adobe lacks the expertise to make Flash work on devices with limited power and performance (mobile devices) or if it is something Flash and 10 years of cruft just isn’t going to do without a rewrite.

In the mean time, the browser wars continue to push JavaScript entire generations forward with each release of Chrome, Firefox or Safari, with no end in sight.

Alongside these enhancements in JavaScript runtime performance is the mass adoption of HTML5 Canvas support to begin implementing rendering engines for just about anything from video to 3D environments.

It is unclear to me at this point if Google will continue down the path of being Flash’s only lifeline into the mobile space. Google’s choice to start bundling Flash with their Chrome browser suggests to me that while Google sees a bright future with HTML5/JavaScript, they don’t see viable alternatives for their investment in things like YouTube’s Flash-based video playback.

I imagine part of that lifeline that Google threw to Adobe was agreement that they would pioneer Flash on their mobile platform after getting left out in the cold by Apple.

If you like these type of tech demos and want to see what else HTML5 and JavaScript are capable of, install Google’s Chrome browser and head over to the “Chrome Experiences” webpage to see a whole slew of them.

I would also strongly recommend that you follow Dion Almaer on Twitter (@dalmaer), the guy is a treasure trove of HTML5/JavaScript tips, code snippets and news all day long.

, , , , , , ,

3 Responses to 10 Amazing Examples of JavaScript and HTML5

  1. peter September 5, 2010 at 6:57 am #

    Flash is like 1000 times better than these craps..


  1. Google Celebrates 25 Years of the Buckyball With Helacious Markup | The Buzz Media - September 4, 2010

    […] I thought this was the result of some slick HTML5 Canvas action, but looking at the page source it looks much more manual than […]

Leave a Reply