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

rjarja
edited June 2017 in Library Questions

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...1 what I want to do

Answers

  • 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

  • 0 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 :((

  • 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..

  • 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

  • rjarja
    edited June 2017

    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();
    
  • rjarja
    edited June 2017

    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();
    }
    
  • Also, it is important to know if the silhouette is constant or if it dynamically changing

    and the silhouette is dynamically changing..!

  • 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

  • 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?

  • 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

  • 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.........

  • frame-0002 frame-0003

    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

  • Answer ✓

    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
    }
    
  • Wow.. Thank you so much!!!!! thank you!!

  • edited June 2017

    @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:

Sign In or Register to comment.