Second Window to Display Coordinates

edited October 2013 in How To...


I'm not sure if I have posted to the wrong board so please move if incorrect.

So basically I am very new to Processing and have been doing a lot of searching to try and solve my problem but to no avail.

I have found an example piece of code to track a selected colour via a webcam, great it works.

// Learning Processing
// Daniel Shiffman

// Example 16-11: Simple color tracking


// Variable for capture device
Capture video;

// A variable for the color we are searching for.
color trackColor; 

void setup() {
  video = new Capture(this,width,height);
  // Start off tracking for red
  trackColor = color(255,0,0);

void draw() {
  // Capture and display the video
  if (video.available()) {;

  // Before we begin searching, the "world record" for closest color is set to a high number that is easy for the first pixel to beat.
  float worldRecord = 500; 

  // XY coordinate of closest color
  int closestX = 0;
  int closestY = 0;

  // Begin loop to walk through every pixel
  for (int x = 0; x < video.width; x ++ ) {
    for (int y = 0; y < video.height; y ++ ) {
      int loc = x + y*video.width;
      // What is current color
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);

      // Using euclidean distance to compare colors
      float d = dist(r1,g1,b1,r2,g2,b2); // We are using the dist( ) function to compare the current color with the color we are tracking.

      // If current color is more similar to tracked color than
      // closest color, save current location and current difference
      if (d < worldRecord) {
        worldRecord = d;
        closestX = x;
        closestY = y;

  // We only consider the color found if its color distance is less than 10. 
  // This threshold of 10 is arbitrary and you can adjust this number depending on how accurate you require the tracking to be.
  if (worldRecord < 10) { 
    // Draw a circle at the tracked pixel

void mousePressed() {
  // Save color where the mouse is clicked in trackColor variable
  int loc = mouseX + mouseY*video.width;
  trackColor = video.pixels[loc];

What I want to ultimately do is take the tacked pixel coordinates (closestX,closestY) and display them in a separate window.

Any tips would be greatly appreciated.


  • In order to paint into another window you can use ControlP5 library, this example shows how to do it.

    Also, I asked a similar question here and tfguy44's answer worked for me, although I haven't tried it in Processing 2.

  • Thanks for the reply, I have since realised I don't really need a window to display the coordinates, but thank you all the same.

Sign In or Register to comment.