hacks.mozilla.org

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.

The developers over at 9elements have done a mesmerizing experiment with Canvas and the audio support in HTML5.

HTML5 Canvas and Audio Experiment

Please comment on their cool experiment at their blog: HTML5 Canvas Experiment.

Recently Arun Ranganathan, one of the members of the Mozilla Evangelism team, created a video for MozCamp Mumbai. It’s about 20 minutes long and he covers a huge number of topics: the new @font-face CSS property and how it affects the ability for people to receive properly localized content, the differences between the various standards efforts (there’s more than just HTML5) and gives some demos that show what’s possible when you combine video with the web.

This post is by Felipe Gomez, a long-time Mozilla contributor and really awesome dude. Felipe attends school in Brazil.

This demo contains another interesting effect that can be done with the HTML5 elements present in Firefox 3.5. What better way to create a cool effect than mixing the open web with pop art? This demo uses only JavaScript, <video> and <canvas>. We’ll use them to create an effect similar to the famous Andy Warhol style art on a live video.

View the Demo in Firefox 3.5

The effect is quite simple. What we want to do is to create a stamp effect based on the brightness of the image. We calculate the brightness of each pixel and separate them into 3 groups, from darkest to brightest. Them, for each of our four frames we use a different color palette to convert the original pixels into our desired colors for the best effect.

With that, we already have a cool effect, but it lacks a bit of detail:

So we mix our colors with 30% of the original image, and now we have the final version, with more shades of color while preserving the nice colorization in Andy Warhol style.

We can access the pixels of each frame of the video using <video> and <canvas>, creating a live effect while the video plays.

This is a screencast of a demo that I gave at the open video conference in NYC on June 19th, 2009. The demo itself was created by the ever wonderful Paul Rouget.