Reveal bg image with circle following mouse

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.

PVector theBallPosition;
PVector theBallVelocity;
PImage bg,front;

void setup(){
  bg = loadImage("3dfaces.png");
  theBallPosition = new PVector(width/5,height/5); 
  theBallVelocity = new PVector(0,0); 

void draw(){
  background(bg); // Background color
  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

1 Like

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.

1 Like

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.

1 Like

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.

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.ellipse(mouseX, mouseY, 200, 200);
  // draw background image
  image(bgImage, 0, 0, width, height);
  // apply mask to top image & draw top image
  image(topImage, 0, 0, width, height);



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.

1 Like

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