Firstly, this is my first ever post on stack, so I'm sorry for being a noob and bad code formatting!
My project is based on tracking 3D printed refresh icons - one coloured orange and one coloured blue. I want both to be tracked (ellipse will show). I am using p5.js (even though I would like to use openCV in the future).
I have already been successful at tracking the orange icon! From my understanding, when I look through the array of pixels to identify the colours, I also need to traverse the target array (so that it can hold more than one colour).
//code that tracks the orange
var video;
var target;
// XY coordinate of closest color
var closestX = 0;
var closestY = 0;
var threshold = 25;
function setup() {
createCanvas(640, 480);
pixelDensity(1);
video = createCapture(VIDEO);
video.hide();
noStroke();
target = new TargetColor(color(255,127,80));
}
function draw() {
background(0);
image(video, 0, 0);
video.loadPixels();
var worldRecord = 500;
for (var x = 0; x < video.width; x += 1){
for (var y = 0; y < video.height; y += 1) {
var index = (x + (y * video.width)) * 4;
var redSource = video.pixels[index + 0];
var greenSource = video.pixels[index + 1];
var blueSource = video.pixels[index + 2];
var d = dist(redSource, greenSource, blueSource, target.red,
target.green, target.blue);
if (d < worldRecord) {
worldRecord = d;
closestX = x;
closestY = y;
}
}
}
if (worldRecord < 10) {
//draw ellipse
fill(target.rgb);
strokeWeight(4);
stroke(0);
ellipse(closestX, closestY, 16, 16);
}
}
//snippet of code that should allow multiple color tracking
//TWO - COLOR TRACKING
var video;
var target = [] // Empty array for targets so we can have more than 1
"object-colors"
var particles = [] //empty array of particles
// XY coordinate of closest color
var closestX = 0;
var closestY = 0;
var threshold = 25;
function setup() {
createCanvas(640, 480);
pixelDensity(1);
video = createCapture(VIDEO);
video.hide();
noStroke();
//pushing an object of type Target Color on the target array
target.push(TargetColor(color(255,127,80)));
}
function draw() {
background(0);
image(video, 0, 0);
video.loadPixels();
var worldRecord = 500;
//For loop - Access each individual pixel in video by iterating
through array
//for loop that allows us to loop over the contents of the array - targets
for (var i = 0; i < target.length; i++){
for (var x = 0; x < video.width; x += 1){
for (var y = 0; y < video.height; y += 1) {
var index = (x + (y * video.width)) * 4;
var redSource = video.pixels[index + 0];
var greenSource = video.pixels[index + 1];
var blueSource = video.pixels[index + 2];
var d = dist(redSource, greenSource, blueSource, target[i].red,
target[i].green, target[i].blue);
if (d < worldRecord) {
worldRecord = d;
closestX = x;
closestY = y;
}
}
}
}
if (worldRecord < 10) {
//draw ellipse
fill(target.rgb);
strokeWeight(4);
stroke(0);
ellipse(closestX, closestY, 16, 16);
}
}
function mousePressed() {
// Save color where the mouse is clicked in target variable
target = new TargetColor(video.get(mouseX, mouseY));
}
function TargetColor(_color){
this.rgb = _color;
this.red = red(_color);
this.green = green(_color);
this.blue = blue(_color);
}
I have put the for loop for the targets in several different places in the nested loop but I still can't figure it out. The result I get is a black screen stating 'Uncaught Type Error: Cannot read property 'red' of undefined.'
However, isn't it already defined? What am I missing?
I will really appreciate any tips and ways to move forward!