The catch is your friend is not clearing the screen, but adding a transparent rectangle to get a trails effect in the easyFade() function:
void easyFade()
{
fill(bgColor,overlayAlpha);
noStroke();
rect(0,0,width,height);//fade background
}
The same can be done with images, but slightly different: simply use the tint() function to add transparency to your background video. Just for testing purposes, say you have an image to test this with (test.png), you can try something like this:
PImage bg;
void setup(){
size(240,240);noStroke();
bg = loadImage("test.png");
}
void draw(){
easyFade();
fill(255);
ellipse(mouseX,mouseY,10,10);
}
void easyFade()
{
tint(255,10);
image(bg,0,0);
}
In your case the video will either be a loaded Movie or a live Capture but the above would still work, since both extend PImage (and you render them to screen with the image()
call).
UPDATE
One issue with this approach though is the fade will affect the background video as well. To keep things separated, you can use another 'layer' using PGraphics:
import processing.video.*;
PGraphics gfx;
Capture video;
int w = 640;
int h = 480;
void setup() {
size(w, h);
video = new Capture(this, w, h,30);
video.start();
gfx = createGraphics(w, h);
gfx.beginDraw();
gfx.background(0);
gfx.endDraw();
// println(Capture.list());
}
void draw(){
image(video,0,0);
pushStyle();
tint(255,127);//tint just the rendered graphics as transparent to see the video beneath
image(gfx,0,0);
popStyle();
//draw your awesome optical flow graphics here
gfx.beginDraw();
gfx.fill(0,10);//same as easyFade() draw transparent bg
gfx.rect(0,0,width,height);
gfx.fill(255);
gfx.ellipse(mouseX,mouseY,10,10);
gfx.endDraw();
}
void captureEvent(Capture c) {
c.read();
}
Again, this would display the graphics faded. A variation of this would be blending the graphics layer, using the blend() function. Given that normally the graphics background is dark and you want to overlay the bright graphics, you can use a blend mode like ADD or SCREEN which would make 'background'/dark areas transparent:
import processing.video.*;
PGraphics gfx;
Capture video;
int w = 640;
int h = 480;
void setup() {
size(w, h);
video = new Capture(this, w, h,30);
video.start();
gfx = createGraphics(w, h);
gfx.beginDraw();
gfx.background(0);
gfx.endDraw();
// println(Capture.list());
}
void draw(){
image(video,0,0);
blend(gfx,0,0,w,h,0,0,w,h,SCREEN);//blend the rendered graphics on top of the video using SCREEN mode
//draw your awesome optical flow graphics here
gfx.beginDraw();
gfx.fill(0,10);//same as easyFade() draw transparent bg
gfx.rect(0,0,width,height);
gfx.fill(255);
gfx.ellipse(mouseX,mouseY,10,10);
gfx.endDraw();
}
void captureEvent(Capture c) {
c.read();
}
Have fun playing with these! :)