MotionDetector.js : JS library for motion detection

#MotionDetector.js

##Demos and examples

Colormotion
Sensitive particles(Refactored now)

##Important note! Before calling the update function in the first time, set some delay, it prevents NS_ERROR_NOT_AVAILABLE in Firefox.

var animate = function(){ 	motionDetector.update(); 	requestAnimFrame(animate); };  setTimeout(function () { 	animate(); }, 3000);

##Using

###Creating an object

To start working you need to create a motion detector object:

var md = new MotionDetector(document.getElementById('video'), document.getElementById('output'));

Here you are calling the constructor with 2 parameters: HTML5VideoObject for an input stream and HTML5 Canvas Object for drawing processed data. Second parameter is not required.

###Update

On each frame you need to update a motion detector, which captures current picture of a frame, compares with a last and draws a motion data into output canvas element.

md.update();

By default picture of motions will be black and white. White pixel - motion was, black pixel - no motion.

###setColor method

You can easily add a color to a motion picture with a help of a setColor method, which takes 2 parameteres. First parameter is a color of pixel, where motion was. Second parameter is a color of pixel, where motion wasn't.
Example:

//color of pixel where motion was var differenceRGBA = { 	r: 255, 	g: 0, 	b: 0, 	a: 0.5 }  //color of pixel where motion wasn't var similarityRGBA = { 	r: 0, 	g: 0, 	b: 0, 	a: 1 }  md.setColor(differenceRGBA, similarityRGBA);

If you want to set more than just a color, use onDifference and onSimilarity handlers, you can read about it below.

###onDifference handler

Handle a motion in each pixel. Motion detector calls this handler with two parameters: first - context of output canvas element, second - coordinates of the pixel.
Example:

md.onDifference = function(blendedCtx, e){ 	blendedCtx.save(); 	blendedCtx.fillStyle = '#ff0000'; 	blendedCtx.beginPath(); 	blendedCtx.arc(e.x, e.y, 10, 2 * Math.PI, false); 	blendedCtx.closePath(); 	blendedCtx.fill(); 	blendedCtx.restore(); };

###onSimilarity handler

Handle an inaction in each pixel. Motion detector calls this handler with two parameters: first - context of output canvas element, second - coordinates of the pixel.
Example:

md.onSimilarity = function(blendedCtx, e){ 	blendedCtx.save(); 	blendedCtx.fillStyle = '#000000'; 	blendedCtx.fillRect(e.x, e.y, 1, 1); 	blendedCtx.restore(); };

###onUpdate handler

By default motion detector on each update clears a canvas by calling a clearRect method. You can set a motion detector behavior on each update to your notice.
Example:

md.onUpdate = function(ctx){ 	ctx.fillStyle = 'rgba(180, 180, 180, 0.1)'; 	ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); };

###checkArea method

Check a rectangle area for a motion.

md.checkArea(x, y, width, height [, step of checking]);

Example:

if(md.checkArea(0, 0, 50, 50)){ 	alert('Motion!'); }

###getMotionAverage method

Return a motion average of a rectangle area.
Example(same as example of a checkArea method):

if(md.getMotionAverage(0, 0, 50, 50) > 100){ 	alert('Motion!'); }

###getBlended method

To get an image object of a non-colored motion data, call 'getBlended' method.

md.getBlended();