how to draw over a video in P3

c_borgs

I have been trying to emulate something like this sketch: with a few other features as well. i've been able to track the color but have not been successful at keeping the trial it creates as a drawing over the video. I've tried topLayer in P2 without success, and i am now thinking about how i might make the color track a separate object. Below is what I have so far

Any and all insight/ help would be greatly appreciated!!

` import processing.video.*;

// Variable for capture device
Capture video;

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

float threshold = 25;

void setup() {
  size(640, 360);
  String[] cameras = Capture.list();
  printArray(cameras);
  video = new Capture(this, cameras[3]);
  video.start();
  // Start off tracking for red
  trackColor = color(255, 0, 0);
}

void captureEvent(Capture video) {
  // Read image from the camera
  video.read();
}

void draw() {
  video.loadPixels();
  image(video, 0, 0);

  textSize(12);
  text("pick a tool, click the color, draw yourself a friend", 10, 30); 
  stroke(#FFFFFF);

  textSize(12);
  text("press space to save your sketch", 10, 330); 
  fill(#FFFFFF);  

  // XY coordinate of closest color
  float avgX = 0;
  float avgY = 0;

  int count = 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 (d < threshold) {
        avgX += x;
        avgY += y;
        count++;
      }
    }
  }

  // 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 (count > 0) { 
    avgX = avgX / count;
    avgY = avgY / count;

    // Draw a circle at the tracked pixel
    fill(trackColor);
    noStroke();
    ellipse(avgX, avgY, 8, 8);
  }
}

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

void keyPressed() {
  if (key == ' ') { //space bar
  saveFrame("picture-####.jpg");
  }
}

`

kfrajer

Please edit your post, select your code and hit ctrl+o to format your code. Make sure there is an empty line above and below your code.

You can do what you want by drawing on a side buffer using a PGrahics object: https://processing.org/reference/PGraphics.html

Start with a PGraphics as big as your video. The trick of the PGraphics is NOT to call background. The PGraphics object by default is transparent. You draw on it using ellipses or points for example. Then you draw your Pgraphics object right after you draw your video:

image(video, 0, 0);
image(pg, 0, 0);   //where pg is your PGraphics object

Kf