Skip to content

Instantly share code, notes, and snippets.

@Stahlneckr

Stahlneckr/photo_tracker.js

Created August 10, 2016 14:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Stahlneckr/8d0c6b3db5f69ed6d736517584d7f995 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Stahlneckr/8d0c6b3db5f69ed6d736517584d7f995 to your computer and use it in GitHub Desktop.
Download ZIP
Photo Tracker to send event when a collection of colors are in view (trackingjs)
Raw
photo_tracker.js
var PhotoTracker = (function() {
var _PT = {};
_PT.colorTracker = null;
_PT.color_tracker_task = null;
_PT.motionTracker = null;
_PT.motion_tracker_task = null;
_PT.color_visible = false;
_PT.saw_color_pink = false;
_PT.saw_color_red = false;
_PT.saw_color_yellow = false;
_PT.saw_color_green = false;
_PT.saw_color_blue = false;
_PT.saw_all = false;
_PT.taking_photo = false;
_PT.events = $({});
_PT.startCustomTracking = function() {
// initialize everything
_PT.initRedColorTracker();
_PT.initYellowColorTracker();
_PT.initGreenColorTracker();
_PT.initBlueColorTracker();
_PT.initMotionTracker();
_PT.startColorTracking(['red', 'yellow', 'green', 'blue']);
_PT.startMotionTracking();
return _PT.events;
};
_PT.initPinkColorTracker = function() {
// custom color tracker (pink)
tracking.ColorTracker.registerColor('pink', function(r, g, b) {
var threshold = 50,
dx = r - 255,
dy = g - 0,
dz = b - 255;
if ((r - g) >= threshold && (b - g) >= threshold) {
return true;
}
return dx * dx + dy * dy + dz * dz < 19600;
});
};
_PT.initRedColorTracker = function() {
// custom color tracker (red)
tracking.ColorTracker.registerColor('red', function(r, g, b) {
var threshold = 50,
dx = r - 255,
dy = g - 0,
dz = b - 0;
if ((r - g) >= threshold && (r - b) >= threshold) {
return true;
}
return dx * dx + dy * dy + dz * dz < 19600;
});
};
_PT.initYellowColorTracker = function() {
// custom color tracker (yellow)
tracking.ColorTracker.registerColor('yellow', function(r, g, b) {
var threshold = 50,
dx = r - 255,
dy = g - 255,
dz = b - 0;
if ((r - b) >= threshold && (g - b) >= threshold) {
return true;
}
return dx * dx + dy * dy + dz * dz < 19600;
});
};
_PT.initGreenColorTracker = function() {
// custom color tracker (green)
tracking.ColorTracker.registerColor('green', function(r, g, b) {;
var threshold = 50,
dx = r - 0,
dy = g - 150,
dz = b - 0;
if ((g - r) >= threshold && (g - b) >= threshold) {
return true;
}
return dx * dx + dy * dy + dz * dz < 19600;
});
};
_PT.initBlueColorTracker = function() {
// custom color tracker (blue)
tracking.ColorTracker.registerColor('blue', function(r, g, b) {
var threshold = 50,
dx = r - 0,
dy = g - 0,
dz = b - 200;
if ((b - r) >= threshold && (b - g) >= threshold) {
return true;
}
return dx * dx + dy * dy + dz * dz < 19600;
});
};
_PT.initMotionTracker = function() {
//custom tracker (motion)
var MotionTracker = function() {
MotionTracker.base(this, 'constructor');
}
tracking.inherits(MotionTracker, tracking.Tracker);
var current_pixels = null;
var motion_detected = true;
MotionTracker.prototype.track = function(pixels, width, height) {
var sensitivity = 80;
if(!current_pixels) {
current_pixels = pixels;
} else {
var loop = 0;
var current_matches = 0;
while(loop<pixels.length) {
var px1 = [pixels[loop], pixels[loop+1], pixels[loop+2], pixels[loop+3]];
var px2 = [current_pixels[loop], current_pixels[loop+1], current_pixels[loop+2], current_pixels[loop+3]];
for(var i = 0; i < px1.length; i++) {
current_matches++;
var t1 = Math.round(px1[i]/10)*10;
var t2 = Math.round(px2[i]/10)*10;
if(t1 != t2) {
if((t1+sensitivity < t2 || t1-sensitivity > t2)) {
current_matches--;
}
}
}
loop = loop+4;
}
}
this.emit('track', {
total_pixels: pixels.length,
matches: current_matches
});
}
};
_PT.monitorColorTracking = function() {
_PT.colorTracker.on('track', function(event) {
if(!_PT.color_visible) {
// no color
if(!_PT.taking_photo && _PT.saw_all ) {
_PT.taking_photo = true;
_PT.events.trigger('take-photo');
// _PT.stopTracking();
}
} else {
_PT.saw_color_red = false;
_PT.saw_color_yellow = false;
_PT.saw_color_green = false;
_PT.saw_color_blue = false;
}
// context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function(rect) {
// found color
if(rect.color == 'red') {
_PT.saw_color_red = true;
} else if(rect.color == 'yellow') {
_PT.saw_color_yellow = true;
} else if(rect.color == 'green') {
_PT.saw_color_green = true;
} else if(rect.color == 'blue') {
_PT.saw_color_blue = true;
}
});
if(_PT.saw_color_red && _PT.saw_color_yellow && _PT.saw_color_green && _PT.saw_color_blue) {
_PT.color_visible = true;
_PT.saw_all = true;
} else {
_PT.color_visible = false;
}
});
};
_PT.monitorMotionTracking = function() {
_PT.motionTracker.on('track', function(event) {
var match_percentage = ((event.matches/event.total_pixels)*100);
if(_PT.color_visible && match_percentage > _PT.match_threshold) {
if(!_PT.taking_photo) {
_PT.taking_photo = true;
_PT.events.triggerHandler('take-photo');
}
}
});
};
_PT.startColorTracking = function(colors) {
_PT.taking_photo = false;
_PT.saw_color_pink = false;
if(_PT.color_tracker_task) {
_PT.color_tracker_task.run();
} else {
_PT.colorTracker = new tracking.ColorTracker(colors);
_PT.monitorColorTracking();
_PT.color_tracker_task = tracking.track('#video', _PT.colorTracker, { camera: true });
}
};
_PT.startMotionTracking = function(colors) {
_PT.taking_photo = false;
_PT.saw_color_pink = false;
if(_PT.motion_tracker_task) {
_PT.color_tracker_task.run();
} else {
_PT.motionTracker = new MotionTracker();
_PT.monitorColorTracking();
_PT.motion_tracker_task = tracking.track('#video', motionTracker, { camera:true });
}
};
_PT.stopTracking = function() {
if(_PT.color_tracker_task) {
_PT.color_tracker_task.stop();
_PT.color_tracker_task = null;
}
if(_PT.motion_tracker_task) {
_PT.motion_tracker_task.stop();
_PT.motion_tracker_task = null;
}
}
return _PT;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment