How to overlap images with interaction

Katniss3961

I'd like to create a program that has one image on top of the other and then when I move the cursor, the top image is erased to reveal the bottom one. But I'm a total beginner and have no clue where to start. Does anyone have advice on how I could achieve something like this? I've managed to code so that one image loads but I can't figure out how to overlay a second one or to do the interaction bit.

koogs

You can just call image () twice with the same coordinates and the second image will obscure the first.

But in your case I think the second image should be a pgraphic. You can then modify this, draw things on it, change the transparency of parts of it so that the first picture shows through.

https://processing.org/reference/PGraphics.html

Katniss3961

Thank you so much for your response. In order to make the second image a Pgraphic, do I have to tell it to to load the image somehow?

koogs

please don't post duplicates

your code from the (now deleted) duplicate:

I've currently written this code and have two images loaded. I want the first one (the female computers one) to be at half opacity and the male computers image to be at full opacity. How would I change this code to tell it to use the different images? Right now it only uses one image for both.

PImage img; 
float offset = 0;
float easing = 0.05;

void setup() {
  size(638,385);
  img = loadImage("Female computers.jpeg");
  img = loadImage("post war male computers.jpg");
}
void draw() {
  background(0);
  image(img,0,0);
   image(img, 0, 0);  // Display at full opacity
  float dx = (mouseX-img.width/2) - offset;
  offset += dx * easing; 
  tint(255, 127);  // Display at half opacity
  image(img, offset, 0);
}

koogs

you've assigned both images to img, it's no wonder it won't work. define a second image and use that instead.

Katniss3961

I apologize for the double posting. I didn't think I was supposed to post code in the "How To" section - sorry! Thank you for your help.

koogs

(you can edit the category using the cog at the top there)