Draw object on new canvas to hide motion detection

selmabrd

Hello guys. I'm trying to achieve a program where ellipse spirals are drawn based on a motion tracking.

I need to use the createGraphics() function in order to hide the result of the captureEvent function and draw my spirals on the top of it, all the previous spirals should be visible. I can't make createGraphics work properly. Do I need two different objects?

Here's my code :

import processing.video.*;

Capture video;
PImage prev;

float threshold = 25;

float motionX = 0;
float motionY = 0;

float lerpX = 0;
float lerpY = 0;

int cnt = 0;

PGraphics p1;

Spiral spi = new Spiral();

void setup(){
  size(640, 480);

  p1 = createGraphics(width, height);
  p1.beginDraw();
  p1.colorMode(HSB, 360, 100, 100);
  p1.background(255);
  p1.noStroke();
  p1.endDraw();

  String[] cameras = Capture.list();
  printArray(cameras);
  video = new Capture(this, cameras[13]);
  video.start();
  prev = createImage(640, 480, RGB);

}

void draw(){
  video.loadPixels();
  prev.loadPixels();

  threshold = 50;
  int count = 0;
  float avgX = 0;
  float avgY = 0;

   loadPixels();
  // 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);
      color prevColor = prev.pixels[loc];
      float r2 = red(prevColor);
      float g2 = green(prevColor);
      float b2 = blue(prevColor);

      float d = distSq(r1, g1, b1, r2, g2, b2); 

      if (d > threshold*threshold) {
        avgX += x;
        avgY += y;
        count++;
        pixels[loc] = color(255);
      } else {
        pixels[loc] = color(0);
      }
    }
  }
  updatePixels();

  if (count > 200) { 
    motionX = avgX / count;
    motionY = avgY / count;
  }

  lerpX = lerp(lerpX, motionX, 0.1); 
  lerpY = lerp(lerpY, motionY, 0.1); 


  spi.update();
  spi.display();

  if (cnt == 50 || cnt == 100) spi.reset();
  cnt += random(5);
  if (cnt >= 200) cnt=0;
}

void captureEvent(Capture video) {
  prev.copy(video, 0, 0, video.width, video.height, 0, 0, prev.width, prev.height);
  prev.updatePixels();
  video.read();
}

float distSq(float x1, float y1, float z1, float x2, float y2, float z2) {
  float d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) +(z2-z1)*(z2-z1);
  return d;
}

and my class :

class Spiral {
  float ang, radians;
  float x;
  float y;
  float size;
  PVector origin;
  float alpha, hue, sat;

  Spiral(){
    ang=0;
    radians=2;
    size = 10;
    origin = new PVector(width/2, height/2);
    alpha = 255.;
    hue = random(330);
    sat = random(30, 100);
 }

 void reset(){
  ang =0;
  radians =2;
  size = 10;
  alpha = 255;
  hue = random(330);
  sat = random(30, 100);
  origin = new PVector(lerpX, lerpY);
}

 void update(){
   x = origin.x + radians *sin(ang);
   y = origin.y + radians *cos(ang);
   ang += .4;
   alpha -= 1.3;
   radians += 0.5;

   size += 0.08;
   hue += 0.2;
}

  void display(){
    p1.beginDraw();
    p1.fill(hue, sat, 255, alpha);  
    p1.ellipse(x,y,size,size); 
    p1.endDraw();
  }
}