Making an Image Opaque, Deleting it, Stop drawing it when MousePressed

Programming Questions

kovaldb

Making an Image Opaque, Deleting it, Stop drawing it when MousePressed

in Programming Questions • 1 years ago

I want to layer .jpg images that I have loaded into my sketch and then when the mouse is pressed/clicked on one of those images it disappears or goes opaque or simply is not visible and only the images below it become visible. Please HELP!!!

Here is what I have so far:

PImage a;

PImage b;

PImage c;

boolean showimage = true;

void setup() {

size (700, 600);

background(0);

a = loadImage ("Family_4.jpg");

b = loadImage ("Family_2.jpg");

c = loadImage ("Family_3.jpg");

}

void draw() {

if(showimage){

image(a, 0, 0);

}

if(mousePressed)showimage = false;

}

Replies(7)

asimes

Re: Making an Image Opaque, Deleting it, Stop drawing it when MousePressed

1 years ago

Could you describe which images you want to become invisible more specifically? Right now your code only has one of the images in the draw loop. Would you be looking for something that would work like a slideshow where clicking makes the next image appear and not display the others?

kovaldb

Re: Making an Image Opaque, Deleting it, Stop drawing it when MousePressed

1 years ago

Oh, my bad, ideally I want all of the images to be 'drawn' and then yes somewhat like a slideshow when the image is clicked/pressed it disappears and the image below is shown.

asimes

Re: Making an Image Opaque, Deleting it, Stop drawing it when MousePressed

1 years ago

I'd recommend putting all of your images into an array first. I'm going to call that array "myImages" and have an integer named "numImages" stand for the number of images in that array:

int toggle = 0;

int numImages = 3; // Set this to however many images you want

PImage[] myImages = new PImage[numImages];

void setup() {

size(700, 600);

// Set these to the correct image names

myImages[0] = loadImage("A.jpg");

myImages[1] = loadImage("B.jpg");

myImages[2] = loadImage("C.jpg");

}

void draw() {

image(myImages[toggle%numImages], 0, 0);

//println(toggle%numImages); // I left this here so you can see what toggle%3 does if you are unfamiliar

}

void mousePressed() {

toggle++;

}

Please note: I did not include anything that draws or undraws your images because I don't know how you want to do that. You're probably going to need a drawing / undrawing function that only displays

image(myImages[toggle%numImages], 0, 0);

when it is finished its task.

kovaldb

Re: Making an Image Opaque, Deleting it, Stop drawing it when MousePressed

1 year ago

Thank you so much for your help!!!

One final question though, what if I don't want the image to be visible once clicked? So, if the images are different sizes and a larger image appears then when I click again and a smaller image appears, you don't see the larger image behind the smaller image? I appreciate your quick responses!!!

kovaldb

Re: Making an Image Opaque, Deleting it, Stop drawing it when MousePressed

1 year ago

Also, what would be the best way to go about centering the images, right now I have it so the top left corner is at the same coordinate, but the images are different widths so when clicked images become off centered? Thanks again!!!!!

kovaldb

Re: Making an Image Opaque, Deleting it, Stop drawing it when MousePressed

1 year ago

Okay nevermind, I have figured out the centered thing. Just curious on how to make the images non-visible if sizes are different?

asimes

Re: Making an Image Opaque, Deleting it, Stop drawing it when MousePressed

1 year ago

I would say that the easiest way would be to call background( some color ) before you call image(myImages[toggle%numImages], my x value, my y value). However this would cover up everything except the new image you are putting on top of a background of some color. Not sure if that would be a problem for you, I don't know how your drawing / undrawing is working visually.

Top Reply