# Clicking on one image and permanently hiding it

**URL:** <https://discourse.processing.org/t/clicking-on-one-image-and-permanently-hiding-it/7918>\
**Category:** Coding Questions\
**Created:** [January 29, 2019, 12:05am UTC](https://discourse.processing.org/t/clicking-on-one-image-and-permanently-hiding-it/7918 "2019-01-29T00:05:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![1schroeteeri](https://avatars.discourse-cdn.com/v4/letter/1/439d5e/32.png) [@1schroeteeri](https://discourse.processing.org/u/1schroeteeri)\
**Post date:** [January 29, 2019, 12:05am UTC](https://discourse.processing.org/t/clicking-on-one-image-and-permanently-hiding-it/7918/1 "2019-01-29T00:05:07Z")

</div>

(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);  
}

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [January 29, 2019, 1:23am UTC](https://discourse.processing.org/t/clicking-on-one-image-and-permanently-hiding-it/7918/2 "2019-01-29T01:23:53Z")

</div>

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

```java
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
  }
}

```

---

<div class="post-metadata">

**Author:** ![1schroeteeri](https://avatars.discourse-cdn.com/v4/letter/1/439d5e/32.png) [@1schroeteeri](https://discourse.processing.org/u/1schroeteeri)\
**Post date:** [January 30, 2019, 1:18am UTC](https://discourse.processing.org/t/clicking-on-one-image-and-permanently-hiding-it/7918/3 "2019-01-30T01:18:28Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [January 30, 2019, 3:47am UTC](https://discourse.processing.org/t/clicking-on-one-image-and-permanently-hiding-it/7918/4 "2019-01-30T03:47:46Z")

</div>

You need to check this tutorial [http://www.jeffreythompson.org/collision-detection/index.php](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

```java
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();
}

```