Pixfinder NPM | npm.io

This project demonstrates how hull.js, img-bfs and disjoint-set libraries can be used.

Pixfinder detects objects in the image. It was developed for the demo purpose only, it's not meant to be used in production.

Demos

See live demos here:

How it works

Pixfinder analyzes image (in a quite naive way) and extracts coordinates of each object. It detects objects by several criterias, the most important criteria is color.

For example we have an aerial shot of planes and we want to know how many planes at the airport right now:

To solve this problem we need to write several lines of code and Pixfinder will find all planes on the image. So let's find all planes and draw them all on the canvas:

var img = document.getElementById('img');

pix.util.dom.onload(img, function() {
    var planes = pix.findAll({
        img: img,
        distance: 5,
        colors: ['eff1f0'],
        clearNoise: 50
    });
    document.getElementById('count').innerHTML = planes.length;
    planes.forEach(draw);
});

function draw(plane) {
    var ctx = document.getElementById("canv").getContext("2d");
    ctx.beginPath();
    plane.forEach(function(point) {
        ctx.arc(point.x, point.y, 1, 0, 2 * Math.PI);
    });
    ctx.stroke();
    ctx.closePath();
}

Result:

API

findAll

Search all objects on the image.

options

find

Starts searching from the start point and returns one object that belongs to this point. This method should be useful for example if you want to highlight object under the mouse cursor.

options

util.dom

Various DOM utility functions.

Point

Contains information about point.

To-do

write more demos;
improve performance;
make concavity param optional;
think about configurable color comparison function;
check and ensure that behaviour with distance 1px is correct;
write tests.

Development

npm install     # install dependencies
gulp build      # check the code with JSHint, run tests and build dist
gulp            # build and watch for the src changes