Get Motion Media

A "Dancepad Kinect"-like mashup webcam motion game powered only by JavaScript!

Built using JavaScript, HTML5, Canvas, Audio, Video,


More About This Demo From The Author

How to play:

You need to be on a desktop version of Firefox17+, Chrome21+ or Opera12+ to use getUserMedia. You also need a web cam of course, and at least 2-3 meters away from the camera or far enough that your arms can still reach all buttons on the game screen.

Similar to how you would on a dance pad, indicators will tell you what buttons to hit next. When the buttons turn blue, use any form of motion to hit them. When the button turns green, it's a hit. If the button turns red, it's a miss.


The concept of the game revolves around the use of motion. This is done by and checking for differences between frames in the video stream. If a difference is found, then there's motion. Map the occurrences of the motion to sections, we have a motion map. Map these sections to some UI elements, add in some timers and event handling and voila! Instant motion controller!


Most of the code is powered by motion tracking code that I was experimenting months ago.

The following libraries and snippets are used as well:

- KineticJS
- jQuery
- jQueryUI
- RequireJS
- requestAnimationFrame polyfill by Erik Möller

Other Resources:

The music is called "Ether Disco" by Kevin McLeod ( licensed under Creative Commons: By Attribution 3.0

Off-Site Demo:

A mirror demo is currently hosted at

Known Issues:

Due to varying lighting conditions, motion detection isn't that accurate. The settings are currently set to "extra sensitive" to detect the smallest of motion. which also causes false detections. Sometimes it's too sensitive especially in dynamic lighting conditions. You must be in a well lit area so the camera can "see" motion properly.

About this Demo

Download the Source 3372.68 KB · ZIP File

Browse the Source

This demo is released under the BSD license.

More by fskreuz