Kinect how can I reveal a full canvas image by painting over a blank background with the tracking point as the paintbrush? Revealing the whole artwork

Processing Libraries
1

Hi, I’ve been working on a processing sketch that tracks movement using a Kinect. I’ve got an image as the tracking point and a white image as the background.

I would like the tracking point to reveal more of the background image as it moves across the screen. E.g the background image is a piece of artwork that starts of blank, but the tracking point reveals this artwork by painting the artwork over the top, like painting a canvas.

I am new to processing so sorry if I haven’t described this well. Any help would be really appreciated! Thanks

This is my current code

import org.openkinect.freenect.*;
import org.openkinect.freenect2.*;
import org.openkinect.processing.*;
import org.openkinect.tests.*;

import org.openkinect.freenect.*;
import org.openkinect.freenect2.*;
import org.openkinect.processing.*;
import org.openkinect.tests.*;
import org.openkinect.freenect.*;
import org.openkinect.processing.*;

// The kinect stuff is happening in another class
KinectTracker tracker;
Kinect kinect;

int[] paint_x = new int[10000];
int[] paint_y = new int[10000];
int index =2;
PImage art;




PImage bg;
int y;


void setup() {
size(640, 520);
   
 kinect = new Kinect(this);
  tracker = new KinectTracker();
  art = loadImage("Desktop/Gamificationcode/SECONDTRACKPROTOTYPE/artone.jpg");
  bg = loadImage("Desktop/Gamificationcode/SECONDTRACKPROTOTYPE/canvas.jpg");
}

void draw() {
  background(bg);
  
  
  line (0, y, width, y);
  
  y ++;
  if (y>height) {
    y=0;
  }


  // Run the tracking analysis
  tracker.track();
  // Show the image
  //tracker.display();

  // Let's draw the raw location
  PVector v1 = tracker.getPos();
  fill(50, 100, 250, 200);
  noStroke();
  //ellipse(v1.x, v1.y, 20, 20);

  // Let's draw the "lerped" location
  PVector v2 = tracker.getLerpedPos();
  fill(50, 100, 250, 200);
  noStroke();
  //ellipse(v2.x, v2.y, 100, 100);
  paint_x[index]=int(v2.x);
  paint_y[index]=int(v2.y);
  index ++;
  // Display some info
  int t = tracker.getThreshold();
  fill(0);
  
    
    for(int i=2;i<paint_x.length; i++){
      image (art, paint_x[i], paint_y[i]);
     
    }
}

// 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
2

Look into mask().

1 Like
3

managed to do it like this using mask - thank you!

PImage img;
float x;
float y;
float easing = 0.1;

void setup() {
  img = loadImage("image.jpg");
  surface.setSize(img.width, img.height);
  background (0);
}

void draw() {
  
float targetX = mouseX;
  float dx = targetX -x;
  x += dx * easing;
  
 
  loadPixels();
  img.mask(pixels);
  image(img, 0, 0);
 
  noStroke();
 
  ellipse(x, y, 90, 90);
  
  float targetY = mouseY;
  float dy = targetY -y;
  y+= dy * easing;
}
1 Like