How do I create an erasing effect with Kinect?

I am trying to create an erasing effect of where the top image will be erased away to reveal another image below. I am using Kinect to control the erasing effect, however it is currently just drawing an ellipse on the top image as seen in this screenshot.

How should I modify the ellipse path as seen in green into an erasing effect to reveal the hidden image? Should ellipse be replaced or is there a way to make ellipse reveal the other image (moonSurface.png)

I am using OpenKinect AveragePointTracking source code.

This is my first time playing around with Processing so I apologies if the code is messy.

import org.openkinect.freenect.*;
import org.openkinect.processing.*;
// The kinect stuff is happening in another class
KinectTracker tracker;
Kinect kinect;

PImage moonDirt, moonSurface;

void setup() {
  size(640, 520);
  kinect = new Kinect(this);
  tracker = new KinectTracker();
  moonDirt = loadImage("moonDirt.png");
  moonSurface = loadImage("moonSurface.png");
  image(moonDirt,0,0);
  

}

void draw() {

  tracker.track();

  PVector v1 = tracker.getPos();
  fill(50, 100, 50, 200);
  noStroke();
  ellipse(v1.x, v1.y, 50, 50);

  

  PVector v2 = tracker.getLerpedPos();
  fill(50, 100, 50, 200);
  noStroke();
  ellipse(v2.x, v2.y, 50, 50);
  
  

  int t = tracker.getThreshold();
  fill(0);
  text("threshold: " + t + "    " +  "framerate: " + int(frameRate) + "    " + 
  "UP increase threshold, DOWN decrease threshold", 10, 500);
}





// Adjust the threshold with key presses
void keyPressed() {
  int t = tracker.getThreshold();
  if (key == CODED) {
    if (keyCode == UP) {
      t+=5;
      tracker.setThreshold(t);
    } else if (keyCode == DOWN) {
      t-=5;
      tracker.setThreshold(t);
    }
  }
}
1 Like

Welcome to the forums!

Why don’t you check out PGraphic.
With these, you can create two separate layers - perhaps an “erasable” layer and an image layer.

Let me know how it goes

2 Likes