Make button disappear when clicked

Processing Coding Questions
#1

I know this is simple, probably. I just can’t figure it out on my own :frowning: I want to make an interactive character builder through asking questions and choosing options. I got the start menu up, with a button that changes as you hover, but I can’t figure out how to make the title image and the button disappear when the button is clicked. I want to keep the background image. After the button is clicked it will bring up another image that lists some info, and then a next button will make that image disappear, and then bring up some text, images, and other buttons.

I only have the menu part. How do I get rid of “title” “tButton” and “hButton” PImages on the screen when pressing the button, so the next transparent image can be displayed in the middle of the screen with just the forest background behind it?

I hope I am clear, and that I organized my sketch to be understandable! Code is below, it is not runnable until you // out the void mousePressed function.

Thank you so much!!

 boolean buttonOver = false;   //is the user hovering over the button
 int buttonX, buttonY;     //position of start button
 int buttonSize = 280;        //diameter of button

                      //images for the title screen and start button


void setup() {
  size(900, 700);                    //size

 PImage img;
 img = loadImage("forestBG.jpg");    //background image is by https://www.youtube.com/watch?v=Ic3ZdD5ko7k
 background(img);

 buttonX = 330;          //button location
 
 buttonY = 380;          //button location


}

void draw() {
  
 update(mouseX, mouseY);           //updating whether mouse is over button or not
  
 PImage title; 
  title = loadImage ("titleScreen.png");  //title Screen Image
   image(title, 0, 0);
  
 PImage tButton;
  tButton = loadImage ("StartButton.png");  //Button Image
   image(tButton, 330, 380);
  
 PImage hButton;
  hButton = loadImage ("hoversbutton.png");   //hovered button image
  
  if (buttonOver) {
    image(hButton, 330, 380);         //if button is hovered over, it changes images
    
  }  
}

void update(int x, int y) {               //my function, when the cursor is over the button, it changes images, then changes back when its not on it
  if (overButton(buttonX, buttonY, 280, 151) ) {
    buttonOver = true;
  } else {
    buttonOver = false;
  }
}

void mousePressed() {           //THIS is where I am trying to get a mouse click on the button to trigger the removal of images "title" and "tbutton" and "hbutton" from the screen? so that I can show the next image with info and start coding my interactive questionnairre... 
  if (buttonOver){
    hButton = null;
    tButton = null;
    title = null;
  }
}

boolean overButton (int x, int y, int width, int height) {           //if the mouse is in the button area, or not
  if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}
![menuscreen|615x500](upload://oHSsjm0d0bcUzm4UXImLO6oQbhG.jpeg) ```
1 Like
#2

***Updated

I have modified your code to sort of make it functional. This is just to demonstrate some concepts that you need to use that are fundamental to Processing:

Code below for your consideration.

Kf

boolean buttonOver = false;   //is the user hovering over the button
int buttonX, buttonY;     //position of start button
int buttonSize = 280;        //diameter of button

//images for the title screen and start button

PImage img;
PImage title; 
PImage tButton;
PImage hButton;


void setup() {
  size(900, 700);                    //size

  img = loadImage("b.jpg");    //background image is by https://www.youtube.com/watch?v=Ic3ZdD5ko7k
  title = loadImage ("a.jpg");  //title Screen Image
  tButton = loadImage ("c.jpg");  //Button Image
  hButton = loadImage ("d.jpg");

  buttonX = 330;          //button location
  buttonY = 380;          //button location
}

void draw() {
  image(img, 0, 0, width, height);
  update(mouseX, mouseY);           //updating whether mouse is over button or not

  image(title, 0, 0);
  image(tButton, 330, 380);

  //hovered button image
  if (buttonOver) {
    image(hButton, 330, 380);         //if button is hovered over, it changes images
  }
}

void update(int x, int y) {               //my function, when the cursor is over the button, it changes images, then changes back when its not on it
  if (overButton(buttonX, buttonY, 280, 151) ) {
    buttonOver = true;
  } else {
    buttonOver = false;
  }
}

void mousePressed() {           //THIS is where I am trying to get a mouse click on the button to trigger the removal of images "title" and "tbutton" and "hbutton" from the screen? so that I can show the next image with info and start coding my interactive questionnairre... 
  if (buttonOver) {
    //hButton = null;
    //tButton = null;
    //title = null;
  }
}

boolean overButton (int x, int y, int width, int height) {           //if the mouse is in the button area, or not

  return  (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) ;
}
1 Like
#3

@madsstella also in the future try to include a descriptive title for your post. This is an interesting project :slight_smile: