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.


  1. Jigar Shah

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

    June 27th, 2009 at 02:14
  2. […] is the original: creating pop art with html5 video at Connect and […]

    June 27th, 2009 at 13:49
  3. dave

    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.

    June 30th, 2009 at 04:05
  4. […] can easily add videos to your website by using the <video> tag and you can do cool things with […]

    June 30th, 2009 at 23:24
  5. […] can easily add videos to your website by using the <video> tag and you can do cool things with […]

    September 1st, 2009 at 23:01

Comments are closed for this article.