I'd like to achieve effect I can see here (Kinect Foggy Mirror).


Attempt # 1 (JAVA 2D)

1. PGraphics pg;
   PImage img, maskImg, imgBW;
   
   void setup() {
    
     size(800, 600, JAVA2D);
     pg = createGraphics(800, 600, JAVA2D);
     img = loadImage("Umbrellas1.jpg");
     imgBW = loadImage("Raindrops.jpg");
     maskImg = loadImage("test.jpg"); 
     background(imgBW);
    
   }
   
   void draw() {
    
     pg.beginDraw();
     pg.background(0);
     pg.tint(255, 220);
     pg.image(maskImg, mouseX-50, mouseY-50);
     pg.endDraw();
   
     img.mask(pg);
     image(img, 0, 0);
   
     println(frameRate);
   }
   

Attempt # 2 (GLGRAPHICS)

1. import processing.opengl.*;
   import codeanticode.glgraphics.*;
   
   PImage img;
   PImage wall;
   GLTexture srcTex, destTex;
   GLTextureFilter myFilter, cp;
   
   float mouseDist = 50.0;
   int w = 800;
   int h = 600;
   
   void setup()
   {
     size(800, 600, GLConstants.GLGRAPHICS);
     wall = loadImage("Umbrellas1.jpg");
     img = loadImage("Raindrops.jpg");
     cp = new GLTextureFilter(this, "copy.xml"); // copy source texture to destination texture
     myFilter = new GLTextureFilter(this, "MouseHole.xml"); // makes hole arround mouse
     srcTex = new GLTexture(this); 
     destTex = new GLTexture(this);
     srcTex.putPixelsIntoTexture(img);  
     //destTex.putPixelsIntoTexture(img);
    
   }
   
   void draw()
   {
     image(wall, 0, 0);
    
     float x = mouseX;
     float y = mouseY;
     myFilter.setParameterValue("mpos", new float[] {x, y} );
     myFilter.setParameterValue("mdist", mouseDist);
     myFilter.apply(srcTex, destTex);
     image(destTex, 0, 0, width, height);
    
     println(frameRate);
    
   }
   

TODO:

- blur mouse trail on the edge in first sketch
- add trails in second sketch
- for a few seconds Raindrops image returns to cover up the cleared spots (time-dependent alpha value??)

Put your ideas and suggestions here..


data for sketches