Clicking on one image and permanently hiding it

Processing Coding Questions
1

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

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
3

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

4

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