Using HTML5 and getMediaDevice to make a live Andy Warhol's Marilyn

Recently there has been a lot of talk about getUserMedia() functionality which has recently been moved from Google Chrome's Canary build over to Google Chrome, and is soon to be merging out in Firefox too. Why is this amazing? Because we can now mess around with live video/audio data or even touch motion data from devices such as Leap Motion in the future.

So, what has this new technology got to do with Andy Warhol?

Well, recently at work we had a creative exhibition in-house where everyone gets a chance to show off any hidden creativity they might have wether it be singing or typography, most people had a go. The problem is I wanted to enter but my logical side tends to break my creative side and anything I design ends up looking like a sysadmin panel.

I chose Andy Warhol's Mariylns as a basis as I've always had a bit of a soft-spot for some of the Andy Warhol on quite a basic level since I found out when I was around 16/17 that this guy managed to make millions from drawing pictures of Marilyn Munroe in 8-bit colours and drawing a tin of Campbell's Soup.

Yes, creatives I'm sure you're stabbing pins in your legs at the moment whilst reading through this rather idiots approach to why I like his work, in short, I'm logically ignorant to artistic depth. Finding a hidden meaning behind a drawing is something that doesn't interest my brain and therefore it makes it effort to perform such a task.

Artistic lack aside based on me liking Andy Warhol for the above reasons I thought it would be a great opportunity to utilise getUserMedia and manipulate the colours to that I had 4 canvas's drawing different interpretations of what the video camera was seeing.

Screenshot and Demo


Click here to check out the live getUserMedia Live Andy Warhol's Marilyns Demo (requires a recent version of the moment), the code is incredibly simple for the effect it presents and I encourage people to play with the code for their own experiments.







Buy me a beer or a book?

amazon PayPal - The safer, easier way to donate online!

Free Downloads