# Painting/revealing a layer

**URL:** <https://discourse.processing.org/t/painting-revealing-a-layer/38000>\
**Category:** Coding Questions\
**Created:** [July 17, 2022, 10:04am UTC](https://discourse.processing.org/t/painting-revealing-a-layer/38000 "2022-07-17T10:04:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![bringmeflowers](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bringmeflowers/32/15848_2.png) [@bringmeflowers](https://discourse.processing.org/u/bringmeflowers)\
**Post date:** [July 17, 2022, 10:04am UTC](https://discourse.processing.org/t/painting-revealing-a-layer/38000/1 "2022-07-17T10:04:36Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/b/6b4852368b6e911d076025686b45337c6aa414ce.jpeg)

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.

```auto
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);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 17, 2022, 11:32am UTC](https://discourse.processing.org/t/painting-revealing-a-layer/38000/2 "2022-07-17T11:32:46Z")

</div>

Hi @bringmeflowers,

better use [the mask function](https://processing.org/reference/PImage_mask_.html) for this … check out…

```auto
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