Mozilla

creating pop art with html5 video

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.

5 comments

Comments are now closed.

  1. Jigar Shah wrote on June 27th, 2009 at 02:14:

    Cool…Only concern is performance…Eats 50% of my cpu on nightly

  2. Pingback from creating pop art with html5 video at hacks.mozilla.org | Museum And Art on June 27th, 2009 at 13:49:

    […] is the original: creating pop art with html5 video at hacks.mozilla.org Connect and […]

  3. dave wrote on June 30th, 2009 at 04:05:

    I’d never noticed that you could extract png images from a canvas so easily. Just right-click and “view image”, or save or copy. Very webby, I like it.

  4. Pingback from Firefox 3.5 is out | Blog of Jaap A. Haitsma on June 30th, 2009 at 23:24:

    […] can easily add videos to your website by using the <video> tag and you can do cool things with […]

  5. Pingback from Jaap A. Haitsma: Firefox 3.5 is out | Full-Linux.com on September 1st, 2009 at 23:01:

    […] can easily add videos to your website by using the <video> tag and you can do cool things with […]

Comments are closed for this article.