Erase Effect

edited April 2014 in How To...

Hi, guys,

I'm totally new to processing...I would like to do the erase effect, with PICTURE overlaying a VIDEO. Clicking left mouse to erase the upper picture.

I have tried the copy(); but it seems only work with picture overlaying picture.

The attached pictures are the effect I would like to achieve. Is there any methods to solve achieve this effect with a video and a picture?

Thank you guys in advance.!

Tagged:

Answers

  • edited April 2014

    2

  • edited April 2014 Answer ✓

    Dunno if that's enough. But here's my attempt. 8-}
    My pixelsRect() is very similar to eraseCanvas() from "Drawing & Erasing" in the thread below:

    http://forum.processing.org/two/discussion/598/mousewheel-syntax-question-solved

    /**
     * Pixels-Based Rect (v1.1)
     * by GoToLoop (2014/Apr)
     *
     * forum.processing.org/two/discussion/4696/erase-effect
     */
    
    static final int DIAM = 0100, FPS = 10;
    PImage bgMask;
    
    void setup() {
      size(800, 600, JAVA2D);
      frameRate(FPS);
      smooth(4);
      imageMode(CORNER);
    
      bgMask = createImage(width, height, ALPHA);
    
      // fill bg w/ #000000, which is 100% opaque black:
      java.util.Arrays.fill(bgMask.pixels, #000000);
    }
    
    void draw() {
      // Replace background() w/ your video feed:
      background((color) random(#000000));
    
      // bgMask is the overlay mask:
      image(bgMask, 0, 0);
    }
    
    void mousePressed() {
      // Color 0 is 100% transparent black:
      pixelsRect(bgMask, mouseButton == LEFT? 0:#000000, DIAM);
    }
    
    void pixelsRect(PImage img, color c, int dim) {
      dim >>= 1; // diameter to radius.
    
      final color[] p = img.pixels;
      final int w = img.width, h = img.height;
    
      final int minX = max(mouseX - dim, 0);
      final int maxX = min(mouseX + dim, w);
    
      final int minY = max(mouseY - dim, 0);
      final int maxY = min(mouseY + dim, h);
    
      for (int row = minY; row != maxY;)
        for (int col = minX, rw = w*row++; col != maxX;
          p[rw + col++] = c);
    
      img.updatePixels();
    }
    
  • Thanks buddy.

    My fault not say it right.

    It should be CLICK and DRAG to erase.

    Any more suggestions? :)

  • You already got my custom made pixelsRect() snippet! You just need to invoke it when dragging!
    The example in the thread I've linked above, it uses dragging to both draw and erase.
    Peruse the code to find out how it does! :D

    Here's the link again:
    http://forum.processing.org/two/discussion/598/mousewheel-syntax-question-solved

  • Thanks @GoToLoop!! Will work on it! You are awesome!!!! :)>-

Sign In or Register to comment.