I know this is simple, probably. I just can’t figure it out on my own 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;
}
}
 ```