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
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.
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.
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);
}
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.
That’s exactly what I was searching for. Thank you very much! 
