Mozilla

making waves with HTML5

on October 15, 2009 by

in Canvas CSS Featured Demo JavaScript

Thomas Saunders of modern-carpentry has a very nice HTML5 demo, making waves with html5, showcasing the power of Canvas as well as Processing.js.

modern carpentry rides the html5 canvas wave

Thomas says:

I was challenged at work to create something that “floats naturally”. After a while of confusion in my pursuit of “natural floating” or whatever, I came up with the idea that I needed a tool to investigate my confusion. This project is a result of my trying to build that tool.

It was initially built as a Flash/Flex application, which you can see here. Later on, however, I became interested in HTML5 and the Canvas tag and decided to port the application to JavaScript and HTML (with the help of jQuery, and also Processing.js, of course…). The transition went fairly well, and I ended up with a JS/HTML version of the application that I actually think is cooler than the original Flash version.

In the end, I came up with both something that “floats naturally” and also a serendipitous encounter with the simplicity of working with only HTML and JavaScript, which has been very rewarding.

Posted by on at

3 comments

Comments are now closed.

  1. Pingback from If you build it, they will build more on October 16th, 2009 at 6:33 am:

    [...] from the creation done using the tool.  So I was interested to see that Gen has posted about a cool use of html5 and Processing.js to explore smooth wave forms.  I wanted to draw my students’ attention to it, because it [...]

  2. Pingback from rizomer (rizomer) 's status on Saturday, 17-Oct-09 00:17:39 UTC - Identi.ca on October 16th, 2009 at 5:17 pm:

    [...] http://hacks.mozilla.org/2009/10/making-waves-with-html5/ a few seconds ago from web [...]

  3. simon wrote on February 9th, 2010 at 3:24 pm:

    Wow , it’s sine bobs or that llamatron stuff of the c64 and atari. Just wish I had the time to spend learning some modern coding – where did my youth go lol.

Comments are closed for this article.