A "Dancepad Kinect"-like mashup webcam motion game powered only by JavaScript!
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
media
scripts
styles
README.md
app.js
gruntfile.js
index.html
package.json
rampbuilder.html

README.md

#Get Motion Media

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

It's my entry for Mozilla's Dev Derby May 2013, which requires the use of getUserMedia. This allows JavaScript to tap into your microphone and webcam. Along with some <video> and <canvas> magic, JavaScript can extract video frames as raw pixel data... And do whatever you like with them!

The concept of the game revolves around the use of motion. This is done by dumping video frames into a canvas, take 2 of them (current and previous) and checking for differences. If a difference is found, then there's motion! If you map the occurrences of the motion to sections of the screen, presto! We have a motion map! Map these sections to some UI elements like buttons, add in some timers and event handling and instant motion controller!

Most of the code is powered by my own MiniEvent microlibrary and some motion tracking code that I was experimenting months ago. It also has a custom "ramp builder" which generates button timings for the "ramp dots".

The following libraries and snippets are used as well:

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

A demo is currently hosted here.