Head Gestures in browser based game

Recently I stumbled upon WebRTC. I started looking into this and found some useful libraries on github .

I have been creating some games in Javascript so thought why not use one of these libraries to use some gestures to play a game .

I decided to go with headtrackr and thought it might be easy to add this to one of the existing games on Brainturk.com. Once I started I realized I needed a way to detect a collision between a rotated rectangle and a gradient on HTML5 Canvas .

I have recently started with game programming so did not know where to start . Google led me to Seperating axis theorem but later I stumbled upon this blog and implemented this in Javascript and came up with this initial version of a picture back game here and another variant of the same game . WebRTC is currently enabled in Google chrome and Opera .

Once you click the start button look at the images in the game and if the image on screen is the same as the previous one move your head over to the green circle and if the image is different move it to the red circle .


Nice demo, do you mind if I may use it in a small presentation about all the small wonders of the HTML5 world?

Maybe I'm wrong, but you aren't using much of WebRTC in that demo except the getUserMedia part, right?

Leave a comment

About Kiran

user-pic I blog about Perl.