How to remove green background from video in processing 3 ?

geekself108

i want to remove green background to make my video transparent.

thanks for help.

Smit

Ater

As Movie class extends PImage, you can use PImage.pixels[] to access each pixel of current frame, check if it fits in some range of green shades and then set it's alpha to 0. You can read more on how to work with pixels, following this tutorial.

geekself108

Thanks! i tried that but did't work out..

Ater

Show your code, if it does not work, there should be a reason ;)

geekself108

right now I'm working on this two code :

code 1 :

in this code : i got transparency but due to frame rate or something else i can see the black background instead of showing through them on webcam.

import processing.video.*;

Movie movie;

//PImage mask01;

Capture cam;

void setup() {

size(1280, 720);

movie = new Movie(this, "Drift.mov");

cam = new Capture(this, 1280, 720);

movie.loop();

// mask01 = createImage(width, height, 128);

frameRate(30);

cam.start();

}

void draw() {

cam.mask(movie);

image(movie, 0, 0);

image(cam, 0, 0);

println("FrameRate : "+frameRate);

}

void movieEvent(Movie movie) {

movie.read();

}

void captureEvent(Capture cam) {

cam.read();

}

-------------------------------

code 2 :

tried to play RGB & alpha video on webcam but i got problems with syncing up the RGB with the ALPHA movie.

my code :

int car;

float elcar_timespot;

float moviespeed = 0.05;

import processing.video.*;

Movie elcar, elcar_mask;

Capture cam;

void setup() {

size(1280, 720, JAVA2D);

frameRate(24);

cam = new Capture(this, 1280, 720);

cam.start();

elcar = new Movie(this, "car.mov");

elcar_mask = new Movie(this, "car_alpha.mov");

//imageMode(CENTER);

int car; } void captureEvent(Capture c) {

c.read(); } void draw() {

image(cam, 0, 0);

if (car == 1) {

elcar_mask.read();

elcar.read();

elcar.loop();

elcar_mask.loop();

elcar.play();

elcar_mask.play();

elcar.mask(elcar_mask);

image(elcar, 0, 0);

} else {

elcar.stop();

elcar_mask.stop();

} }

/* // speed 0.05

if (car == 1) { elcar_mask.read(); elcar.read();

elcar.loop();
elcar_mask.loop();

if (elcar_timespot < elcar.duration()) {
  elcar_timespot += moviespeed;
} else {
  elcar_timespot = 0;
}
elcar.jump(elcar_timespot);
elcar_mask.jump(elcar_timespot);

elcar.mask(elcar_mask);
image(elcar, 0, 0);

} } */

void keyPressed() { if (key == 'a') { car = 1; } }

//void keyReleased() { // if (key == 'a') { // car = 0; // } //}

Ater

Well, I'm not so sure about these codes, cause I would do it differently. Maybe using video mask can improve performance, but I would go with the accessing pixels array, as I mentioned in my first answer. Maybe I'll try to download some footage with green screen and try to make an example, but a little later.

_vk

Please format your code for the forum.

https://forum.processing.org/two/discussion/8045/how-to-format-code-and-text#latest

_vk

maybe this can inspire you. It's working in a still image though, and removing red, but the idea to handle the pixels might be interesting.

PImage original, result;
float t = 0.9;


void setup() {
  //image linked from this question in processing forum
  //http://forum.processing.org/topic/help-random-distribution-of-non-overlapping-circles#25080000001787197

  original = loadImage("http://24.media.tumblr.com/tumblr_lzi0y7OpsC1r87izio1_1280.png");
  if (original != null) {
    size(original.width, original.height);
    result = createImage(original.width, original.height, RGB); 
    result = original.get(0, 0, original.width, original.height);
  } else
  {
    println("unable to load the image. Are you connected?");
    exit();
  }
}

void draw() {


  if (keyPressed) {
    image (original, 0, 0);
  } else {
    image(result, 0, 0);
  }
}

void mouseDragged() {
  t = map(mouseY, 0, height, 0, 1);
  findReds(original, t);
}


void findReds(PImage orig, float thresh) {
  result = orig.get(0, 0, orig.width, orig.height);
  result.loadPixels();
  for (int i = 0; i < result.pixels.length; i++) { 
    color c = result.pixels[i];
    float r = c >> 16 & 0xFF;
    float g = c >> 8 & 0xFF;
    float b = c & 0xFF;

    float limitR = r - r*thresh;
    if ( g < limitR && b < limitR) {
      result.pixels[i] = color(255);
    }
  }
  result.updatePixels();
}

geekself108

@Ater ok Thanks! i will try using PImage.pixels[] and if i got transparency will let you know . :)

geekself108

@ _vk Thanks ! for info. and ok will try with your code :)

and my formated code

code 1 :

in this code : i got transparency but due to frame rate or something else i can see the black background instead of showing through them on webcam.

  import processing.video.*;

Movie movie;

//PImage mask01;

Capture cam;

void setup() {

  size(1280, 720);

  movie = new Movie(this, "Drift.mov");

  cam = new Capture(this, 1280, 720);

  movie.loop();

  // mask01 = createImage(width, height, 128);

  frameRate(30);

  cam.start();
}

void draw() {

  cam.mask(movie);

  image(movie, 0, 0);

  image(cam, 0, 0);

  println("FrameRate : "+frameRate);
}

void movieEvent(Movie movie) {

  movie.read();
}

void captureEvent(Capture cam) {

  cam.read();
}

-------------------------- code 2 :

tried to play RGB & alpha video on webcam but i got problems with syncing up the RGB with the ALPHA movie.

int car;

float elcar_timespot;

float moviespeed = 0.05;

import processing.video.*;

Movie elcar, elcar_mask;

Capture cam;

void setup() {

  size(1280, 720, JAVA2D);

  frameRate(24);

  cam = new Capture(this, 1280, 720);

  cam.start();

  elcar = new Movie(this, "car.mov");

  elcar_mask = new Movie(this, "car_alpha.mov");

  //imageMode(CENTER);

  int car;
} 
void captureEvent(Capture c) {

  c.read();
} 
void draw() {

  image(cam, 0, 0);

  if (car == 1) {

    elcar_mask.read();

    elcar.read();

    elcar.loop();

    elcar_mask.loop();

    elcar.play();

    elcar_mask.play();

    elcar.mask(elcar_mask);

    image(elcar, 0, 0);
  } else {
    elcar.stop();

    elcar_mask.stop();
  }
}

/* // speed 0.05
 
 if (car == 1) { elcar_mask.read(); elcar.read();
 
 
 elcar.loop();
 elcar_mask.loop();
 
 if (elcar_timespot < elcar.duration()) {
 elcar_timespot += moviespeed;
 } else {
 elcar_timespot = 0;
 }
 elcar.jump(elcar_timespot);
 elcar_mask.jump(elcar_timespot);
 
 elcar.mask(elcar_mask);
 image(elcar, 0, 0);
 } } */

void keyPressed() { 
  if (key == 'a') { 
    car = 1;
  }
}

void keyReleased() {  
  if (key == 'a') {  
    car = 0;
  }
}

GoToLoop

Dunno whether it's gonna be of any help, but here's something I did some months ago w/ Movie + PImage + mask() + arrayCopy() + pixels[]: >-)

https://forum.Processing.org/two/discussion/12609/random-videos-displaying-in-different-masks

// forum.Processing.org/two/discussion/12609/
// random-videos-displaying-in-different-masks

// 2015-Sep-21

import ddf.minim.Minim;
import processing.video.Movie;
import java.util.Map;

static final String FILM_EXT = ".mov", PIC_EXT = ".jpg", MASK_FILES[] = {
  "center", "left", "right"
};

static final int MOVIES = MASK_FILES.length;
final Map<Movie, MaskedFrame> movies = new HashMap<Movie, MaskedFrame>(MOVIES, 1);

void setup() {
  size(640, 480, JAVA2D);
  smooth(4);
  frameRate(30);
  imageMode(CORNER);

  new Minim(this).loadFile("cocoon.mp3", 2048).loop();

  for (int i = 0; i != MOVIES; ++i) {
    MaskedFrame mf = new MaskedFrame();
    (mf.mask = loadImage(MASK_FILES[i] + PIC_EXT)).resize(width, height);

    Movie movie = new Movie(this, i + FILM_EXT);
    movies.put(movie, mf);
    movie.loop();
  }

  for (boolean stillNull = true; stillNull; delay(100))
    for (MaskedFrame mf: movies.values())  if (stillNull = mf.frame == null) break;
}

void draw() {
  for (MaskedFrame mf: movies.values()) mf.script();
}

void movieEvent(Movie movie) {
  movie.read();
  MaskedFrame mf = movies.get(movie);

  if (mf.frame != null) mf.updateFrame(movie);
  else                  mf.frame = movie.get();
}

class MaskedFrame {
  PImage frame, mask;

  synchronized void script() {
    maskFrame();
    displayFrame();
  }

  void maskFrame() {
    if (frame.width == mask.width & frame.height == mask.height) frame.mask(mask);
  }

  void displayFrame() {
    image(frame, 0, 0);
  }

  void displayFrame(int x, int y) {
    image(frame, x, y);
  }

  synchronized void updateFrame(PImage img) {
    img.loadPixels();
    arrayCopy(img.pixels, frame.pixels);
    frame.updatePixels();
  }
}

geekself108

sorry for too late reply ...

as you move mouse it remove green pixel's but don't know why its not removing all green pixel's..

PImage img1, img2;
int threshold = 127;

void setup() {
  //size(640, 480);
  //img1 = loadImage("2.jpg");
  //img2 = loadImage("4.jpg");

  size(1280, 720);

  String url = "https://farm5.staticflickr.com/4067/5149410930_5454131b0a_o_d.jpg";

  String url2 = "http://hdwallpaperspretty.com/wp-content/gallery/nature-wallpaper-free-download-hd/Nature-Wallpaper-Free-Download.jpg";

  img1 = loadImage(url, "jpg");
  img2 = loadImage(url2, "jpg");
}

void draw() {
  background(0, 0, 255);

  img1.loadPixels();

  PImage screenImg = createImage(width, height, RGB);
  int mousePixel = mouseY*screenImg.width+mouseX;

  color mouseColor = img1.pixels[mousePixel];
  float screenImgRed = red(mouseColor);
  float screenImgGreen = green(mouseColor);
  float screenImgBlue = blue(mouseColor);

  for (int i = 0; i < img1.pixels.length; i++) {
    color pixelColor = img1.pixels[i];
    float r = red(pixelColor);
    float g = green(pixelColor);
    float b = blue(pixelColor);

    float colorDifference = abs(screenImgRed - r) + abs(screenImgGreen - g) + abs(screenImgBlue - b);

    if (colorDifference < threshold) {    
      screenImg.pixels[i] = img2.pixels[i];
    } else {
      screenImg.pixels[i] = img1.pixels[i];
    }
  }
  screenImg.updatePixels();

  image(screenImg, 0, 0);

  println(mouseX +" y: " + mouseY + " th: " + threshold);
}


void keyPressed() {
  int th = 10;
  if (key == 'a') {
    threshold +=th;
  }
  if (key == 's') {
    threshold -=th;
  }
}