Motion Detection in Javascript

Making computers see

There are a bunch of techniques and libraries out there for to detect and play with your camera’s motion data. But most often a simple solution is more than you need. And I’ve found that rolling my own motion detection code gives me better performance, flexibility and understanding. 95% of the time, this simple method is all you’re gonna need. So let’s get going…

The technique we going to use is simple. We compare the previous frame‘s colours with the colours of the current frame. If they are above a certain threshold, we can assume there’s motion.

(Actually could draw it at a smaller size, then scale up our calculations, and get a further performance boost, and I’ll show you this in a bit. But let’s keep things simple for now).

To draw the video to the screen we just reference the video and use the canvas drawImage() function:

Now we want to loop through the pixels and get their colour values…

Testing for motion:

To test if there’s motion in the video all we now need to do is store in an array our previous frame’s pixel values and compare these to the current values… if the difference is above a certain threshold then there is motion.

We could do a formula for the sum of the RGB values or look atthe brightness, but in most cases really need only to compare the red values…

And there you have it. That’s pretty much the basics of motion detection. Pretty neat and simple.

To my our code easier to read and deal with, let’s quickly put the motion detection code into a function. There’s not much we need to change, except add a motion array to store all the motion points and their colour values, and then return those:

And then in our draw loop we can just loop through the motion array and do something with the resulting values:

Now let’s work on that performance. As is, it’s pretty fast. But we can make it faster. If you think about it, drawing the video to the whole screen and then reading every 10 or 20 pixels is a bit silly, when we could just make a smaller video input and read those pixels… So let’s do that…

Firstly let’s make our video even smaller… We’ll use a setup() function which will ensure the video is loaded before we manipulate it… and then we just set the video to a scale of our screen size…

We’d then just need to loop over out video instead of the whole screen, and seeing our video is tiny, we’ll get a nice bump in performance. And because we’re looking over every pixel of the video now, there’s also a tiny reduction in noise. We’d also need to multiply the x and y positions back up by the scalefactor…

And there you have it. A simple chunk of re-usable motion reactive code. Once you have your motion array, try attaching particles.

Watch out for ambient light, which could add noise and adjust your threshold up and down accordingly.

And easy way for us to make tweaking easier is to add some sliders to adjust our threshold …

Once you’ve included the library, you instantiate it like so:

And that’s pretty much all you need for motion detection. Happy coding.

You can see previous all my previous creative coding tutorials here.

And follow me here if you so desire:

Related posts:

Rolling into the third week as an intern at the Peggy Guggenheim Collection, I was preparing materials for the upcoming talk on the Picasso exhibition (Picasso On the Beach). It was a point during my…

India needs to boost its poverty threshold from the current level of extreme poverty ($1.90 per person, per day) to the lower-middle income (LMI) poverty threshold ($3.20), which is 68 percent…

It is okay to have a dilemma regarding the laptop selection, you are not alone. Almost everyone faces the situation. Here is a guide to best laptop buy.