Motion Detection and Three.js

This post was inspired by and based upon the work of Romuald Quantin: he has written an excellent demo (play a xylophone using your webcam!) at http://www.soundstep.com/blog/2012/03/22/javascript-motion-detection/ and an in-depth article at http://www.adobe.com/devnet/html5/articles/javascript-motion-detection.html. Basically, I re-implemented his code with a few minor tweaks:

• The jQuery code was removed.
• There are two canvases: one containing the video image (flipped horizontally for easier interaction by the viewer), the second canvas containing the superimposed graphics
• For code readability, there is an array (called "buttons") that contains x/y/width/height information for all the superimposed graphics, used for both the drawImage calls and the getImageData calls when checking regions for sufficient motion to trigger an action.

The first demo is a minimal example which just displays a message when motion is detected in certain regions; no Three.js code appears here.

http://stemkoski.github.io/Three.js/Webcam-Motion-Detection.html

The second demo incorporates motion detection in a Three.js scene.  When motion is detected over one of three displayed textures, the texture of the spinning cube in the Three.js scene changes to match.

http://stemkoski.github.io/Three.js/Webcam-Motion-Detection-Texture.html

Here is a YouTube video of these demos in action:

Happy coding!