1

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!

Rabbid76
  • 202,892
  • 27
  • 131
  • 174
  • Take a look at what you are pushing into the target array. target.push(TargetColor(color(255,127,80))); You are just calling TargetColor. Are you really wanting to use new an push a TargetColor object into the array? – Charlie Wallace May 08 '19 at 21:34
  • Also double check this line: fill(target.rgb); target is an array so it won't have an rgb attribute. Are you looking at your web console for errors? – Charlie Wallace May 08 '19 at 21:36
  • target = new TargetColor(video.get(mouseX, mouseY)); should be target.push( new TargetColor(video.get(mouseX, mouseY))); – Charlie Wallace May 08 '19 at 21:50

0 Answers0