Transparent background in NoiseInk (Java)

Question

A friend is making an art piece using NoiseInk https://github.com/trentbrooks/Noise-Ink and would like the background to be transparent instead of black. Ideally he would have this Java app running over a video (hence the transparency). So how could he play a video as the background, or at the very least make the background transparent? I have tried everything I could think of!

Answer 1

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! :)