Skip to content

Instantly share code, notes, and snippets.

@bmoren
Last active June 25, 2020 19:13
Show Gist options
  • Save bmoren/3ff2cbc1f254092b82f12ab039fa5da2 to your computer and use it in GitHub Desktop.
Save bmoren/3ff2cbc1f254092b82f12ab039fa5da2 to your computer and use it in GitHub Desktop.
getting started with color tracking in tracking.js + p5.js
var colors;
var capture;
var trackingData;
function setup() {
createCanvas(windowWidth,windowHeight)
capture = createCapture(VIDEO); //capture the webcam
capture.position(0,0) //move the capture to the top left
capture.style('opacity',0.5)// use this to hide the capture later on (change to 0 to hide)...
capture.id("myVideo"); //give the capture an ID so we can use it in the tracker below.
colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
tracking.track('#myVideo', colors); // start the tracking of the colors above on the camera in p5
//start detecting the tracking
colors.on('track', function(event) { //this happens each time the tracking happens
trackingData = event.data // break the trackingjs data into a global so we can access it with p5
});
}
function draw() {
// console.log(trackingData);
if(trackingData){ //if there is tracking data to look at, then...
for (var i = 0; i < trackingData.length; i++) { //loop through each of the detected colors
// console.log( trackingData[i] )
rect(trackingData[i].x,trackingData[i].y,trackingData[i].width,trackingData[i].height)
}
}
}
@quadrochave
Copy link

Great !! Thanks for share !!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment