Loading...
Logo
Processing Forum

Keying out background colour

in General Discussion  •  Other  •  1 year ago  
I know its possible to draw images from a webcam in Processing. However, is it possible it key out a background colour from the webcam feed to reveal a still image?

Replies(5)

Sure that's possible. You could just compare every pixel from your webcam to the key-color and set it to transparent if the difference is less than a choosen threshold.

You might want to have a look into the BackgroundSubtraction-Example, it's not exactly what you were asking for, but it's pretty close.
It's in Libraries->Video->BackgroundSubtraction.


BackgroundSubtraction is going in the right direction. I'll have a play and see what I can do. Thanks
I've had a play around with the  BackgroundSubtraction example, but i'm having issues wrapping it around what I'm after. Searching around, there doesn't seem to be many examples of colour-keying or  BackgroundSubtraction  on Processing. Has anyone got any example willing to share?
Hey,

i changed the example to do color-keying instead of background-subtraction.
Just click somewhere inside of the image to pick a color.
If you want an image instead of that solid red-background just replace the background() with a call of image() or something. And adjust the value of 'thresh' to fit your needs.

Copy code
  1. import processing.video.*;

    int numPixels;
    Capture video;
    int keyColor = 0xff000000;
    int keyR = (keyColor >> 16) & 0xFF;
    int keyG = (keyColor >> 8) & 0xFF;
    int keyB = keyColor & 0xFF;

    int thresh = 20; // tolerance of
    void setup() {
      size(640, 480, P2D);
     
      video = new Capture(this, width, height, 24);
      numPixels = video.width * video.height;
    }

    void draw() {
      if (video.available()) {
        background(0xffff0000);
        loadPixels();   
        video.read(); // Read a new video frame
        video.loadPixels(); // Make the pixels of video available

        for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame...
          // Fetch the current color in that location
          color currColor = video.pixels[i];
          int currR = (currColor >> 16) & 0xFF;
          int currG = (currColor >> 8) & 0xFF;
          int currB = currColor & 0xFF;

          // Compute the difference of the red, green, and blue values
          int diffR = abs(currR - keyR);
          int diffG = abs(currG - keyG);
          int diffB = abs(currB - keyB);

          // Render the pixels wich are not the close to the keyColor to the screen

          if((diffR + diffG + diffB)> thresh){
            pixels[i] = video.pixels[i];     
          }
        }
        updatePixels(); // Notify that the pixels[] array has changed
      }
    }


    void mousePressed() {
      keyColor = get(mouseX, mouseY);
      keyR = (keyColor >> 16) & 0xFF;
      keyG = (keyColor >> 8) & 0xFF;
      keyB = keyColor & 0xFF;
    }
Hop this helps understanding the principle.
Thats awesome, thanks!