Painting/revealing a layer

Processing Coding Questions
1

I want to create this effect in processing - where the mouse goes, the bottom painting layer is revealed.

Screenshot 2022-07-17 at 11.04.58
Screenshot 2022-07-17 at 11.04.581758×1028 31.4 KB

I try to loop through the pixels to the right of the mouseX to get the pixels for an area, but it does not work.

PImage painting;

void setup() {
  size(750, 562);
  painting = loadImage("image.jpg");
  background(0);
}

void draw() {

  int x = mouseX;
  int y = mouseY;
    for (int i = 0; i <20; i++) {
    for (int j = 0; j< 20; j++) {
      float loc = x+y*i;
      color c = painting.get(int(loc), int(loc));
      //    color c = painting.get(int(x), int(y));
      fill(c);
      noStroke();
      ellipse(x, y, 30, 30);
    }
  }
}
1 Like
2

Hi @bringmeflowers,

better use the mask function for this … check out…

PGraphics maskimg;
PImage underlyingimg;

void setup() {
  size(800,800,P2D);
  underlyingimg = loadImage("image.jpg");

  // create mask (should be same as the underlying image size)
  maskimg = createGraphics(underlyingimg.width,underlyingimg.height,P2D);

  // initialize the whole mask with black (everything hidden)
  maskimg.beginDraw();
  maskimg.background(0);
  maskimg.noStroke();
  maskimg.fill(255);
  maskimg.endDraw();
}

void draw() {
  background(0);

  if (mousePressed) {
    // if mousePressed draw the area with white pixels (revealed)
    // just for example using a circle brush (ie ellipse) 
    maskimg.beginDraw();
    maskimg.ellipse(mouseX,mouseY,50,50);
    maskimg.endDraw();     
  }  
  // apply the mask to the underlying image and paint it
  underlyingimg.mask(maskimg);
  image(underlyingimg, 0, 0);
}

Cheers
— mnse

2 Likes