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.
bg = loadImage("3dfaces.png");
theBallPosition = new PVector(width/5,height/5);
theBallVelocity = new PVector(0,0);
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
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.
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.
PImage bgImage, topImage;
// create pgraphics canvas to draw into
mask = createGraphics(width, height);
// load images
bgImage = loadImage("background.png");
topImage = loadImage("foreground.png");
// 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.
That’s exactly what I was searching for. Thank you very much!