eduardolundgren / tracking.js

A modern approach for Computer Vision on the web
http://trackingjs.com
Other
9.43k stars 1.44k forks source link

combine FAST and color tracking.. #222

Open koraysels opened 7 years ago

koraysels commented 7 years ago

Can I do a color FAST feature detection on objects that are color tracked with the color tracker? is this possible ?

eduardolundgren commented 7 years ago

It's possible. On the colored area found you can extract the pixel window and use FAST feature:

var corners = tracking.Fast.findCorners(pixels, width, height);

To find the corners in the desired area.

koraysels commented 7 years ago

how would you extract the pixels? the only parameters are width and height? plus pixels and i have no idea how to extract only part of a canvas image.

EDIT: wait i can just do pixels = ctx.getImageData(x,y,width,height); ? but how do i get it from a video stream ?

newsbubbles commented 6 years ago

I have done this.... Here is an example of how I've done it...

http://webdombot.com/perceptoid/demos/blobpet.html

There is a modification you can do to the Image.grayscale function...

    //Modified from tracking.js library's /util/Image.js file
    //set up to use a kdtree for the original RGBA pixels and returns gray data along with pixel tree
    tracking.Image.grayscale = function(pixels, width, height, fillRGBA) {
        var gray = new Uint8ClampedArray(fillRGBA ? pixels.length : pixels.length >> 2);
        var p = 0;
        var c = 0;
        var w = 0;
        var color = new kdTree([], distance, ['x','y']);
        for (var i = 0; i < height; i++) {
            for (var j = 0; j < width; j++) {
                var r = pixels[w], g = pixels[w + 1], b = pixels[w + 2];
                var value = r * 0.299 + g * 0.587 + b * 0.114;
                gray[p++] = value;
                if (fillRGBA) {
                    gray[p++] = value;
                    gray[p++] = value;
                    gray[p++] = pixels[w + 3];
                }
                w += 4;
            }
        }
        return gray;
    };

Then you use this function when setting up and prototyping your fast tracker...

    var FastTracker = function() {
        FastTracker.base(this, 'constructor');
    };
    tracking.inherits(FastTracker, tracking.Tracker);

    tracking.Fast.THRESHOLD = 20;
    FastTracker.prototype.threshold = tracking.Fast.THRESHOLD;

    FastTracker.prototype.track = function(pixels, width, height) {
        if (trackStats) stats.begin();
        var gray = tracking.Image.grayscale(pixels, width, height);
        var corners = tracking.Fast.findCorners(gray, width, height);
        if (trackStats) stats.end();

        this.emit('track', {
            data: corners,
            pixels: pixels
        });
    };

    var tracker = new FastTracker();

I am however noticing that this is creating a lot of Uint8ClampedArray garbage to be cleaned on an ongoing basis... so I am working on figuring out the right place to dispose of these after I get the info out of them. Though I must say, it pretty much performs the same as regular greyscale fast...

Also, I'm using a kdTree in this... I'm using kdTree.js from ubilabs. This really helps for speed, as you're not using a list to store all that pixel data. https://github.com/ubilabs/kd-tree-javascript

tetreault commented 6 years ago

+1 for this, a quick demo would be cool if possible but am taking a crack at this myself to detect redness in eyes (e.g. allergies, bloodshot eyes)

newsbubbles commented 6 years ago

The blobpet link in my previous comment is the demo @tetreault ... The code for both of these is inside of lightning.js file ;) enjoy!