Remote Image Processing In JavaScript

[youtube=http://www.youtube.com/watch?v=u3_cFel26J8]

[Tom] wrote in to tell us about his JavaScript project for motion detection. It ties together two ideas we’ve talked about recently. The first is doing image processing in-browser using Canvas(), which we’ve seen employed in captcha breaking. The second is offloading heavy processing to browsers, which we saw recently in the MapReduce implementation. [Tom] is using JavaScript to compare consecutive images to determine if there’s any motion. He did this as part of MJPG-Streamer, a program for streaming images from webcams. It can run on very limited hardware, but image processing can be very intensive. Doing the image processing in-browser makes up for this limitation and means that a custom client program doesn’t have to be written. You can find the code here and a PDF about the proof of concept.

Simulated Annealing

annealing

Here’s an update on our earlier post about genetic programming. Altered Qualia has posted a new implementation of [Ron Alsing]’s idea. It starts with 50 polygons and then randomly changes one parameter with each optimization step. If the the change results in fewer differences from the target image, it’s kept as the new best DNA. This search method is similar to simulated annealing. The image above is the result of 1500 good mutations out of 35900 possible. The implementation lets you choose any image, but smaller means the fitness calculation is faster. It’s written in JavaScript using the <canvas> environment. You’ll definitely get better performance using newer browser builds.

[Original image by R Stevens]

[via Waxy]