Clicking on one image and permanently hiding it

(Hi, I’m relatively new to processing and I’ve searched around for an answer but haven’t found anything regarding this besides making the image disappear for a moment)

I’m trying to remove permanently (or hide) one image in front of another by clicking on it.

My current code CODE:

PImage bgImg;
PImage bgImg2;
PImage bgImg3;
PImage bgImg4;

void setup() {
noLoop();
size(1220,800, P2D);

// Images must be in the “data” directory to load correctly
bgImg = loadImage(“background.jpg”);

bgImg2 = loadImage(“background2.jpg”);

bgImg3 = loadImage(“background3.jpeg”);

bgImg4 = loadImage(“background4.jpg”);

}

void draw() {
image(bgImg, 0, 0, width/2, height/2);

image(bgImg2, 0, 0, width/2, height/2);

image(bgImg3, 600, 0, width/2, height/2);

image(bgImg4, 600, 0, width/2, height/2);
}

Great that you provided some code. Don’t forget to format your code. You can select the code and hit the icon </> and it will format the code for you. I have provided an example below. Related to hidden or destroying the image, I decided to hide it. Full implementation would be in your use case. This hopefully gets you started.

  • If you want to manage a stack of images, then you could use an array of objects or a list like ArrayList (More in the Processing reference webpage)
  • You could also implement a feature where the image is hidden only if click inside the image.
    *Notice you use noLoop() in setup. You need to use redraw() every time you need to update your canvas (by draw). I call this in mouseReleased().

Kf

ImageHolder frame1;
ImageHolder frame2;
ImageHolder frame3;
ImageHolder frame4;

void setup() {  
  size(1220, 800, P2D);

  frame1 = new ImageHolder("a.jpg", 0, 0, width/2, height/2);
  frame2 = new ImageHolder("b.jpg", 0, 0, width/2, height/2);
  frame3 = new ImageHolder("c.jpg", 600, 0, width/2, height/2);
  frame4 = new ImageHolder("d.jpg", 600, 0, width/2, height/2);

  noLoop();
}

void draw() {
  frame1.show();
  frame2.show();
  frame3.show();
  frame4.show();
}

void mouseReleased() {
  frame2.toggle();
  redraw();
}


class ImageHolder {

  PImage img;
  boolean showFlag;
  PVector location;
  PVector imageSize;

  ImageHolder(String name, int x, int y, float w, float h) {
    showFlag=true;
    img = loadImage(name);
    location=new PVector(x, y);
    imageSize=new PVector(w, h);
  }

  void show() {
    if (showFlag) { 
      image(img, location.x, location.y, imageSize.x, imageSize.y);
    }
  }

  void toggle() {
    showFlag =  !showFlag; // Toggles state
  }
}
2 Likes

Thanks for the help!
How would you go about having the code only remove the particular image clicked on? This is what I was originally searching for (my title wasn’t very specific).

You need to check this tutorial http://www.jeffreythompson.org/collision-detection/index.php if you want the image to disappear only if clicked inside the image. The code below, image2 disappears if you click anywhere within the canvas.

Kf

PImage bgImg1;
PImage bgImg2;
PImage bgImg3;
PImage bgImg4;

boolean showImg2;

void setup() {

  size(1220, 800, P2D);

  // Images must be in the “data” directory to load correctly
  bgImg1 = loadImage("a.jpg");
  bgImg2 = loadImage("b.jpg");
  bgImg3 = loadImage("c.jpg");
  bgImg4 = loadImage("d.jpg");
}

void draw() {

  image(bgImg1, 0, 0, width/2, height/2);
  if (showImg2) image(bgImg2, 0, 0, width/2, height/2);

  image(bgImg3, 600, 0, width/2, height/2);
  image(bgImg4, 600, 0, width/2, height/2);

  noLoop();
}

void mouseReleased() {
  showImg2 = !showImg2; //Toggle
  redraw();
}