# Reveal bg image with circle following mouse

**URL:** <https://discourse.processing.org/t/reveal-bg-image-with-circle-following-mouse/13102>\
**Category:** Coding Questions\
**Created:** [July 31, 2019, 5:33pm UTC](https://discourse.processing.org/t/reveal-bg-image-with-circle-following-mouse/13102 "2019-07-31T17:33:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![harkusch](https://avatars.discourse-cdn.com/v4/letter/h/a4c791/32.png) [@harkusch](https://discourse.processing.org/u/harkusch)\
**Post date:** [July 31, 2019, 5:33pm UTC](https://discourse.processing.org/t/reveal-bg-image-with-circle-following-mouse/13102/1 "2019-07-31T17:33:28Z")

</div>

i have two layers, both are flat pictures. i want to uncover the lower picture with the mouse pointer. an circle has to follow the mouse. \>\>\>\> that’s what I´ve got right now.

```auto
PVector theBallPosition;
PVector theBallVelocity;
PImage bg,front;

 
void setup(){
  smooth();
  frameRate(60);
  size(1366,768);
  bg = loadImage("3dfaces.png");
 
 
  theBallPosition = new PVector(width/5,height/5); 
  theBallVelocity = new PVector(0,0); 
  loadImage("3dfaces.png");
}

 
void draw(){
  noStroke();
  fill(255);
  background(bg); // Background color
  ellipseMode(CENTER);
  ellipse(mouseX,mouseY,300,300); // Placing the circle

```

Question: how can i subtract my “mouse circle” with the picture on the top so I only see the background image

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 31, 2019, 6:00pm UTC](https://discourse.processing.org/t/reveal-bg-image-with-circle-following-mouse/13102/2 "2019-07-31T18:00:38Z")

</div>

Im not sure how its accessed in p5 but i know there is a function native to javascript that allows you to fill with holes. As opposed to filling with a shape the shape is converted to a hole, will track down when at my desk.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 31, 2019, 11:42pm UTC](https://discourse.processing.org/t/reveal-bg-image-with-circle-following-mouse/13102/3 "2019-07-31T23:42:55Z")

</div>

![wp_ss_20190801_0001](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f6651ef4693b1c61016f801e312add38713a9186.png)

Check out bitmap collision on coding math channel, it does exactly what you’re looking for. It uses the image data to do this, and “destination-out” is the way to set the fill style to cookie cutter.

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [August 1, 2019, 10:12am UTC](https://discourse.processing.org/t/reveal-bg-image-with-circle-following-mouse/13102/4 "2019-08-01T10:12:00Z")

</div>

Use mask()?

If I understand correctly, you want to mask one image using a circle, to reveal the layer on top / below, right? See the example below to learn how to draw into a separate ‘masking canvas’ that you can then apply to your image.

```auto
PGraphics mask;
PImage bgImage, topImage;

void setup()
{
  size(600, 600);

  // create pgraphics canvas to draw into
  mask = createGraphics(width, height);
  
  // load images
  bgImage = loadImage("background.png");
  bgImage.resize(width, height);
  topImage = loadImage("foreground.png");
  topImage.resize(width, height);
}

void draw()
{
  // update - draw into mask (no actual drawing takes place yet)
  mask.beginDraw();
  mask.background(0);
  mask.ellipseMode(CENTER);
  mask.fill(255);
  mask.noStroke();
  mask.ellipse(mouseX, mouseY, 200, 200);
  mask.endDraw();
  
  // draw background image
  image(bgImage, 0, 0, width, height);
  
  // apply mask to top image & draw top image
  topImage.mask(mask);
  image(topImage, 0, 0, width, height);

}

```

 ![22](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/ac756659c56fa7d5d9746ea0ff811b0cfbeb2403.jpeg)

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [August 1, 2019, 10:17am UTC](https://discourse.processing.org/t/reveal-bg-image-with-circle-following-mouse/13102/5 "2019-08-01T10:17:21Z")

</div>

Oh and if you want to invert the effect, ‘revealing the background’, you’d simply draw the circle in black and the masks background in white.

---

<div class="post-metadata">

**Author:** ![harkusch](https://avatars.discourse-cdn.com/v4/letter/h/a4c791/32.png) [@harkusch](https://discourse.processing.org/u/harkusch)\
**Post date:** [August 1, 2019, 2:26pm UTC](https://discourse.processing.org/t/reveal-bg-image-with-circle-following-mouse/13102/6 "2019-08-01T14:26:57Z")

</div>

That’s exactly what I was searching for. Thank you very much! 🙂