How can I show the image on my silhouette when I appear on the screen?

rja

I want to show this sea image that I attached (only)when I (or some people) appear on the screen. (I mean, the image should appear in my silhouette.)

I tried to make the code by using the example 16_06(green screen) and 16_12(background remove).

But I can't do it. I don't know A to Z...

How can I make this code? I'll thank you to make the complete code or teach any part of the code...

I will attach some picture that help you to understand what I want to do.. it named "what I want to do.jpg"

please help me...

kfrajer

Challenge #1: In your incoming video, what do you have in the background? Are you going to have a green screen?

Check this: https://forum.processing.org/two/discussion/22054/chroma-key#latest

Kf

rja

Actually, I want to place this city image in the background..! I will comeback after see the link that you attacted. please don't go until then :((

rja

I'm so sorry but I can't understand the code at all .. Isn't the code place some picture instead of the greenscreen? I tried to put the ciry image ("0.png") on the code that you linked. I successed to place the city image on the background. but, on the screen, my silhouette don't appear.. I want to be shown on the screen..

how can I place the picture (city or sea image) + to be shown on the screen..?

what I know about processing is almost nothig... please teach me..

kfrajer

There is some effort to get this working. Do you know how Chroma key works? It is the same effect they use to present the weather forecast in the news. However, I am not sure if it applies to your case since you didn't provide enough details of exactly what you have (in code and in your setup) and how it will be combined at the end. Also, it is important to know if the silhouette is constant or if it dynamically changing. The challenge here is to discriminate the silhouette. Even if the silhouette is from a static snapshot, there is not easy way to differentiate between the silhouette or the background if you don't follow some strict rules.

(only)when I (or some people) appear on the screen.

So your image is from video? What have you done so far? Show your code.

I tried to make the code by using the example 16_06(green screen) and 16_12(background remove).

This is exactly implied from your part that people here in the forum knows what you are talking about. But we don't know anything about these examples. This is where you need to provide proper references and details.

The link I provided above will only work if you have a green screen in your video.

Kf

rja

this is the code that I made

import processing.video.*;

Capture video;

//int numFrames = 12; //프레임개수
//PImage[] backgroundImage = new PImage[numFrames]; //원래백그라운드(도시)
//int currentFrame = 0;

//int numFrames = 12; //프레임개수
//PImage[] backgroundReplace = new PImage[numFrames]; //바뀔백그라운드(바다)
//int currentFrame = 0;

float threshold = 20; //민감도

void setup() {
  size(640, 360);


  video = new Capture(this, width, height, 30);
  video.start();            


void draw() 

{

threshold = map(mouseX, 0, width, 5, 50);
loadPixels();
  video.loadPixels(); 
  backgroundImage.loadPixels();

 for (int x = 0; x < video.width; x ++ ) {
    for (int y = 0; y < video.height; y ++ ) {
      int loc = x + y*video.width; // Step 1, what is the 1D pixel location
      color fgColor = video.pixels[loc]; // Step 2, what is the foreground color     //안비칠때 컬러(도시) 

      // Step 3, what is the background color
      color bgColor = backgroundImage.pixels[loc]; //비칠때컬러(바다)를 정해주는거야

float r1 = red(fgColor);
      float g1 = green(fgColor);
      float b1 = blue(fgColor);
      float r2 = red(bgColor);
      float g2 = green(bgColor);
      float b2 = blue(bgColor);
      float diff = dist(r1, g1, b1, r2, g2, b2);

if (diff > threshold) {    //여기에서 포어그라운드에는 바다를 백그라운드에는 도시를 이런걸를 다 여기에
        // If so, display the foreground color
        PImage = loadImage("1.png");
      } else {
        // If not, display the beach scene
        PImage = loadImage("0.png");
      }


  updatePixels();

rja

and the example 16-06 is,

    import processing.video.*;

    // Variable for capture device
    Capture video;

    // Saved background
    PImage backgroundImage;

    PImage backgroundReplace;

    // How different must a pixel be to be a foreground pixel
    float threshold = 20;

    void setup() {
      size(320, 240);
      video = new Capture(this, width, height, 30);
      video.start();

      // Create an empty image the same size as the video
      backgroundImage = createImage(video.width, video.height, RGB);
      backgroundReplace = loadImage("beach.jpg");
    }

    // New frame available from camera
    void captureEvent(Capture video) {
      video.read();
    }


    void draw() {
      // Map the threshold to mouse location
      threshold = map(mouseX, 0, width, 5, 50);

      // We are looking at the video's pixels, the memorized backgroundImage's pixels, as well as accessing the display pixels. 
      // So we must loadPixels() for all!
      loadPixels();
      video.loadPixels(); 
      backgroundImage.loadPixels();

      // Begin loop to walk through every pixel
      for (int x = 0; x < video.width; x ++ ) {
        for (int y = 0; y < video.height; y ++ ) {
          int loc = x + y*video.width; // Step 1, what is the 1D pixel location
          color fgColor = video.pixels[loc]; // Step 2, what is the foreground color

          // Step 3, what is the background color
          color bgColor = backgroundImage.pixels[loc];

          // Step 4, compare the foreground and background color
          float r1 = red(fgColor);
          float g1 = green(fgColor);
          float b1 = blue(fgColor);
          float r2 = red(bgColor);
          float g2 = green(bgColor);
          float b2 = blue(bgColor);
          float diff = dist(r1, g1, b1, r2, g2, b2);

          // Step 5, Is the foreground color different from the background color
          if (diff > threshold) {
            // If so, display the foreground color
            pixels[loc] = fgColor;
          } else {
            // If not, display the beach scene
            pixels[loc] = backgroundReplace.pixels[loc];
          }
        }
      }
      updatePixels();
    }

    void mousePressed() {
      // Copying the current frame of video into the backgroundImage object
      // Note copy takes 5 arguments:
      // The source image
      // x,y,width, and height of region to be copied from the source
      // x,y,width, and height of copy destination
      backgroundImage.copy(video, 0, 0, video.width, video.height, 0, 0, video.width, video.height);
      backgroundImage.updatePixels();
    }

and the example 16-12 is,

import processing.video.*;

// Variable for capture device
Capture video;

// Saved background
PImage backgroundImage;

// How different must a pixel be to be a foreground pixel
float threshold = 20;

void setup() {
  size(320, 240);
  video = new Capture(this, width, height);
  video.start();
  // Create an empty image the same size as the video
  backgroundImage = createImage(video.width, video.height, RGB);
}

void captureEvent(Capture video) {
  // Read image from the camera
  video.read();
}

void draw() {
  // We are looking at the video's pixels, the memorized backgroundImage's pixels, as well as accessing the display pixels. 
  // So we must loadPixels() for all!
  loadPixels();
  video.loadPixels(); 
  backgroundImage.loadPixels();

  // Begin loop to walk through every pixel
  for (int x = 0; x < video.width; x ++ ) {
    for (int y = 0; y < video.height; y ++ ) {
      int loc = x + y*video.width; // Step 1, what is the 1D pixel location
      color fgColor = video.pixels[loc]; // Step 2, what is the foreground color

      // Step 3, what is the background color
      color bgColor = backgroundImage.pixels[loc];

      // Step 4, compare the foreground and background color
      float r1 = red(fgColor);
      float g1 = green(fgColor);
      float b1 = blue(fgColor);
      float r2 = red(bgColor);
      float g2 = green(bgColor);
      float b2 = blue(bgColor);
      float diff = dist(r1, g1, b1, r2, g2, b2);

      // Step 5, Is the foreground color different from the background color
      if (diff > threshold) {
        // If so, display the foreground color
        pixels[loc] = fgColor;
      } else {
        // If not, display green
        pixels[loc] = color(0, 255, 0); // We could choose to replace the background pixels with something other than the color green!
      }
    }
  }
  updatePixels();
}

void mousePressed() {
  // Copying the current frame of video into the backgroundImage object
  // Note copy takes 5 arguments:
  // The source image
  // x, y, width, and height of region to be copied from the source
  // x, y, width, and height of copy destination
  backgroundImage.copy(video, 0, 0, video.width, video.height, 0, 0, video.width, video.height);
  backgroundImage.updatePixels();
}

rja

Also, it is important to know if the silhouette is constant or if it dynamically changing

and the silhouette is dynamically changing..!

kfrajer

Thank you for sharing the code. In these two samples, you are discriminating against a threshold value. Using a single value to discriminate is very challenging unless you follow a setup similar to the chroma key where your background does not change AND it has a single well define color.

There is another approach. Assuming your background is the same, you can start your sketch by capturing your initial image (image at time zero) with no people on it. Then, for every new image you get, you subtract this image to the initial image. The resulting operation will provide you an image with values either close to zero OR values larger than zero. Values close to zero means that those pixels in the new image and the background image are very similar. This should be zero in theory but in practice there is also some deviation from zero. In contrast, values away from zero in your operation means that those regions in the new image differ substantially from the first image. Those pixels are your silhouette... in essence.

Let's call diff image the resultant image [step 1] of the operation {init-current} image. What you need to do[step 2] is traverse the diff image and set to zero if the pixel position is close to zero Otherwise, set that pixel to 255.

Then [step3] you use your city image, you ocean image and this processed diff image using the mask() function as described here: https://processing.org/reference/PImage_mask_.html

Kf

rja

Thank you for help. I understood the first paragraph but.. How can I capture my first image? by pressing the mouse on the empty screen?

or are there some code to make it?

kfrajer

One way to do it is shown in the backgroundSubtraction example that comes with the video library. In your processing IDE, go to File >> Examples and then go to Libraries>>Video>>Capture>>backgroundSubtraction

I just wrote an example using the mask function. You need to focus only on the draw function of the demo as the other parts of that code will change in your case: https://forum.processing.org/two/discussion/23093/brightness-pixel-doesnt-work

In your case, the tiny non-filled circles will be your ocean theme. The big white circle will be your "inferred" silhouette. The background image (not used here directly) will be your city theme.

Kf

rja

I understood your explain but I can't apply it to my code.. :(( :(( :(( I can't understand what code make the big white circle, what code make the background image, what code make the tiny non-filled circles ........... please..... please help me.........

rja

it's the image what I want to put on my code.. it's okay instead of real my silhouette, put the big white circle.... at least, I just want to make the different image between background and indoor of some shape.... anyone help me....... please

kfrajer

This is the modified version. No silhouette but the mixing part.

Kf

//REFERENCES: https:// forum.processing.org/two/discussion/23118/how-can-i-show-the-image-on-my-silhouette-when-i-appear-on-the-screen#latest

//INSTRUCTIONS:
//         *--   Click to enable or disable the masking effect


//===========================================================================
// FINAL FIELDS:

final String REN=P2D;


//===========================================================================
// GLOBAL VARIABLES:


PGraphics pg;
PGraphics gg;
boolean maskImageNow=true;

PImage city;
PImage ocean;

//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  city=loadImage("city.png");
  size(city.width, city.height, REN);
  smooth(8);
}

void setup() {

  textAlign(CENTER, CENTER);
  rectMode(CENTER);
  ellipseMode(RADIUS);

  fill(255);
  strokeWeight(2);

  ocean=loadImage("ocean.png");

  pg = createGraphics(width, height, REN);

  gg=createGraphics(width, height, REN);
  gg.beginDraw();  
  gg.noFill();
  gg.stroke(255);
  gg.strokeWeight(2);
  gg.clear();
  gg.image(ocean, 0, 0);
  gg.endDraw();
}



void draw() {
  //background(0);
  image(city, 0, 0);

  pg.beginDraw();
  pg.clear();
  pg.ellipse(mouseX, mouseY, 100, 100);
  pg.endDraw();

  if (maskImageNow) {
    gg.mask(pg);
    image(gg, 0, 0);
  }
}

void keyReleased() {
}

void mouseReleased() {
  maskImageNow=!maskImageNow;  //Toggle action
}

rja

Wow.. Thank you so much!!!!! thank you!!

jeremydouglass

@rja -- one key to understanding @kfrajer's image masking demo above is that you are combining the mask() reference example with the PGraphics reference example.

For another very simple example of this concept. see:

• https://forum.processing.org/two/discussion/18819/how-to-copy-a-triangle-out-of-an-image