Flashy HTML5 Experiments Point to Web’s Future

We’ve showed you where on the web you can find practical examples of HTML5 — like Google’s homepage, Scribd’s document viewer and Vimeo’s new video player. However, to really see the bleeding edge of HTML5 and what might be possible in the future, you’ll have to look beyond the practical.

Big names have released HTML5 showcase sites, Apple and Google among them. More importantly, hundreds of curious designers around the web are constantly experimenting with HTML5, trying to push the boundaries and see what’s possible with the new markup language and its related technologies. Many such experiments have little practical value as of yet, while others may well find their way into your favorite online games and web apps in the next few years.

Of course, some of the examples below aren’t purely HTML5. In fact there’s been quite a bit of talk about what is and what is not HTML5. All of the examples below use HTML5 tags, however some also use elements of CSS 3 and almost all of them use JavaScript to handle animation and user interaction.

In fact, most of the more interesting experiments we’ve seen revolve around the HTML5 canvas tag and JavaScript. The HTML5 canvas tag is essentially what it sounds like, a canvas on which all sort of JavaScript-powered goodness can be displayed. Regardless of whether you think of the end product as being an experiment in HTML5 or JavaScript or both, the results are impressive.

One other thing to keep in mind: HTML5 is still an unfinished spec and browser support varies. All of these experiments work in the latest versions of Firefox, Chrome, Safari and Opera, but other versions of those browsers and Internet Explorer won’t be able to see these demos.

If you’d like to see some more innovative examples of what’s possible when JavaScript and HTML5 collide, check out Swedish developer Hakim El Hattab’s HTML5 experiments. Ranging from arcade-style games like Sinuous to Twitter messages in animated bubbles, Hattab’s experiments are creative and fun, if not immediately useful to most people. Just view source to see what makes these examples tick.

Hattab includes a note on his site saying, “please don’t use this as HTML5 vs Flash firewood,” which is worth mentioning since, yes, you could do many of these experiments in Flash, but that isn’t the point. The point is to do it using open web tools that will work everywhere — modern web browsers, iPhones, Android Phones, iPads, next year’s toaster and any other device with a standards compliant web browser.

That said, some potentially useful animation experiments are in fact ports of Flash animation libraries. In these cases the innovation is less about originality than practicality — taking what’s good from Flash and porting it to JavaScript where it can be used with HTML5.

For example, Jonas Wagner has ported a Flash 2D physics engine JavaScript. The result is a JavaScript physic engine you can incorporate into your own animation projects.

Another cool experiment in physics engines comes from developer Florian Boesch’s website, Codeflow, which features an experiment using Canvas and JavaScript to animate dots. In Boesch’s experiment there are 15 dots on the screen, and each has a velocity and pulls on each other dot, thus changing their velocities. As an added bonus Boesch breaks down all the code behind the scenes and shows you how everything works.

Physics engines are useful for building web-based games, but how about some cool retro graphics? Yes, HTML5 can do that too.

Developer Joseph Huckaby has created a way to generate that old school video game look using a full 8-bit color cycling engine, rendered into a canvas tag in real-time. Huckaby used Mark Ferrari’s famous game illustrations to create some awesome classic video game scenes. You can learn more about how Huckaby created the 8-bit rendering engine on the Effect Games website.

Not into retro games? How about a multi-user collaborative sketchpad? Like many of the examples here, the heavy lifting in this one is done by JavaScript, with an HTML5 canvas tag providing the canvas and some websockets for the multi-user aspect. Unfortunately this one will only work in Chrome.

The sketchpad was created by Ricardo Cabello, of Mr. Doob, which has dozens of other HTML5 experiments as well as plenty of Flash-based experiments.

This is just a small sampling of the many HTML5 experiments on the web. If you know of other cool sites, showcases or other experiments be sure to chime in the comments.

See Also: