Fun with pixels and HTML5 video canvas

HTML5 video pixel manipulation

Original
Transformed
Mode:
(Example above tested in Chrome 17, Firefox 10 and Safari 5)

Recently, there has been a lot of hype about the HTML5 video. No wonder why - Google thinks the format is hot enough it is worth encoding thousads of the YouTube videos as webm and make them available through new HTML5 version of youtube: http://www.youtube.com/html5.

HTML5 Mohawk Generator

Note: Jump here to read full article or play with the Mohawk Generator below.

Mohawk Configurator

Size:
Number of spikes:
Number of colors:
Colors:

Share your creation!

Copy the link below:
Or post it directly on Twitter:

Excuse me, there's an (HTML5) elephant in the room!

Background

On September 27th I attended cool JavaScript meetup in Brighton called asyncjs. During two sessions (unfortunately I missed the first one so I had loads of catching-up to do) we built an amazing JavaScript Jungle / JavaScript environment.

We were asked to fill this environment with jungle creatures that respond to the occurring changes - sun, rain, time of the day and so on. Creatures could move around, eat grass or even eat each other.

Entire environment was created using jQuery and we were also allowed to use HTML5 canvas support libraries such as paper.js and raphael.js. In addition to that, we used fantastic little library called broadcast.js to create event-driven environment for our jungle.

Social/Code

profile for rochal on Stack Exchange, a network of free, community-driven Q&A sites