making waves with HTML5

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.

About Gen Kanai

Hello, you're reading the Mozilla blog of Gen Kanai. I have two roles in the Mozilla organization. I help support business development in Asia and I am the director of marketing and partner relations for Mozilla Japan.

More articles by Gen Kanai…


3 comments

  1. […] 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 […]

    October 16th, 2009 at 06:33

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

    October 16th, 2009 at 17:17

  3. simon

    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.

    February 9th, 2010 at 15:24

Comments are closed for this article.