Motion tracking with Javascript, HTML5 and a webcam

Why would you use the web for motion tracking? Simple. HTML5 Canvas is exciting. Javascript is (pretty) cool. Combined with a lazy afternoon, we can create an ultra simple hand motion tracking and colour recognition system.

This isn’t entirely true. It doesn’t track the hand, it tracks a bright blue bottle cap I found on the floor. Even more truthful is to say that it tracks anything bright blue. But enough chat, here’s a demonstration. Just click the small button with the dash in it to get started, grab something blueish and wave it in front of your camera. It won’t be as good as we got it since we adjusted it for specific lighting conditions, but it’s enough as a proof of concept.

We’ve also got pretty pictures to show. Here’s one of the quick n’ dirty strap we used to embed the bottle cap in.


And here is one of it in action.


You can see the (bad, hackish, thrown together) code for it in my playground repository on GitHub.


The web as an art medium

Almost three months ago, I had a course which got me thinking: what if the web was seen as yet another medium for artists? I’m referring specifically to artists, those who create without purpose and just for kicks to add life’s flavour, rather thanĀ designers, who have an objective or a problem they are trying to solve. This means I’m not talking about webdesign – I’m talking about Web Art.

I’m also not talking about plugins or embeddable content like Flash or 3D – I’m talking about pure HTML DOM and things which manipulate it.

This isn’t a new idea. Ever since Chrome reminded the market about the importance of script execution and rendering optimisation, there have been a lot of experiments out there. It’s probably unsurprising, then, that now is the perfect time for artists to invade and create a layer of class and “meaning” behind this eyecandy.

My feelings about stuck-up artists aside, I made a series of web toys. Two of these were appropriate for public viewing, and so here they are.


Named after its inspiration, Trauma is an experimental point and click environment. Nothing special scriptwise.


Also named after its inspiration, vector is a box that does stuff (click on it). Animation in Blender, exported as a single image of all the frames, and jQuery scrolls through it.

Note that these have not been optimised, cleaned, or browser tested in any way. It works in Firefox, but be sure to give it time to load fully as there is no preloader.

Enjoy! (or not – apparently you can’t tell people what to think with art)


The Euphemism Website – the failed idea.

One of the websites I always wanted to make was a Euphemism dictionary. It would be pretty similar to urbandictionary in terms of concept and allow user-defined euphemisms for common insulting phrases. This would thus prevent us racking our brains every single time we wanted to come up with another creative way of saying “my aunt’s maid’s son is better at computers than you“.

It’s also a great initiative to start putting literature to good use rather than the common application of analysing the themes and symbolic imagery behind fictional characters.

Another objective would be to disprove most of the web community do’s and don’ts through the context and artificially induced environment the website will create. For example, users will be insulted constantly, from the minute they enter the website, when they register, log in, or do anything that involves a mouse and a screen. Definitions and euphemisms will have a voting system, except it’s unidirectional – you are only allowed to vote down submissions. I don’t mean this in the rottentomatoes format where more tomatoes means its good, I mean this quite literally. You’re not allowed to say something is good, you say if something is crap, and then we’ll list the least crap and the most crap. Take your pick. User interaction will be minimal – you’re allowed submit and vote, nothing else, users with accounts will be given no option but to receive spam email from an entirely unrelated mailing list, all the time mocking you of your gullibility of registering to such a shady website.

We won’t only break community conventions, we’ll break design conventions too. There will be no clear header or footer. The title will be a randomly rotating insulting phrase (of your choice if you register an account). The content will be single column, left aligned, with a colourscheme worse than my dad’s tie, and a table will be used for everything. One huge table with colspans and rowspans that’ll make the folks in the #css channel choke.

With all that said, it’ll still be better than 95% of the websites on the internet.

Gosh the internet is so full of trash.