Reveal bg image with circle following mouse

[harkusch]

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(){
  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

[paulgoux]

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.

[paulgoux]

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.

[rapatski]

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.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);

}

[rapatski]

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.

[harkusch]

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