Trying to use multiple instances of Mouse pressed - processing

Question

I’m trying to add a feature where you can click on different parts of the sketch and have an image randomly generated. It worked for the first time, but when I add another if mouse pressed function, it triggers all the mouse pressed code and all of the sets of images go off at the same time. I’m not sure how to isolate it so that just one goes off if it’s in the right spot.
Here is my code for the last attempt, I tried to isolate the mouse pressed function with a push and pop Matrix, which didn’t work.
PImage stage;
PImage model;
PImage [] hat = new PImage [5];
PImage [] pants = new PImage [4];
PImage [] shirt = new PImage [5];
int choice = 0;
int page = 0;
void setup() {
size (800, 800);
stage = loadImage("background.png");
background(255);
image(stage, 0, 0);
hat[0] = loadImage ("hat1.png");
hat[1] = loadImage ("hat2.png");
hat[2] = loadImage ("hat3.png");
hat[3] = loadImage ("hat4.png");
pants[0] = loadImage ("pant1.png");
pants[1] = loadImage ("pant2.png");
pants[2] = loadImage ("pant3.png");
pants[3] = loadImage ("pant4.png");
}
void draw() {
println(mouseX, mouseY); //398, 237 for hats.
image(stage, 0, 0);
pushMatrix();
if (dist(398, 237, mouseX, mouseY) <90 && mousePressed) choice = floor(random(4));
image(hat[choice], 349, 98);
popMatrix();
pushMatrix();
if (dist(404, 363, mouseX, mouseY) <90 && mousePressed) choice = floor(random(4));
image(pants[choice], 228, 263);
popMatrix();
}

Answer 1

The issue is that you're using the same variable for all the clothing items. So when you click on the hat button, it sets choice to a random number (let's say 2). Then you display hat[choice] and then you also display pants[choice]. One way around this is to have multiple different choice variables, hatChoice and pantsChoice. When you click on the hat button, it randomizes hatChoice, and when you click on the pants button, it randomizes pantsChoice. Something like this:
if (dist(398, 237, mouseX, mouseY) <90 && mousePressed) hatChoice = floor(random(4));
image(hat[hatChoice], 349, 98);
if (dist(404, 363, mouseX, mouseY) <90 && mousePressed) pantsChoice = floor(random(4));
image(pants[pantsChoice], 228, 263);
I also second #rjw1428's recommendation of using mouseClicked() instead of if (mousePressed). You can do something like this:
//your global variables...
int hatChoice = 0;
int pantsChoice = 0;
void setup() {
//your setup stuff...
}
void draw() {
image(stage, 0, 0);
image(hat[hatChoice], 349, 98);
image(pants[pantsChoice], 228, 263);
}
void mouseClicked() {
if (dist(mouseX, mouseY, 398, 237) < 90) {
hatChoice = floor(random(4));
}
if (dist(mouseX, mouseY, 404, 363) < 90) {
pantsChoice = floor(random(4));
}
}

Answer 2

This isn't a perfect solution, but to implement what you're trying to do, i might do this
PImage stage;
PImage model;
PImage [] hat = new PImage [5];
PImage [] pants = new PImage [4];
PImage [] shirt = new PImage [5];
int selectedHat = -1;
int selectedPants = -1;
int selectedShirt = -1;
int choice = 0;
int page = 0;
void setup(){
size (800,800);
stage = loadImage("background.png");
background(255);
image(stage,0,0);
initializeImages()
}
void draw(){
println(mouseX, mouseY); //398, 237 for hats.
image(stage,0,0);
if (selectedHat > 0) {
image(hat[selectedHat], 349,98);
}
if (selectedPants > 0) {
image(pants[choice], 228,263);
}
}
void mouseClicked() {
if(dist(404,363, mouseX, mouseY) <90 && mousePressed) {
selectedPants = floor(random(4));
}
if(dist(398,237, mouseX, mouseY) <90 && mousePressed) {
selectedHat = floor(random(4));
}
}
void initializeImages() {
hat[0] = loadImage ("hat1.png");
hat[1] = loadImage ("hat2.png");
hat[2] = loadImage ("hat3.png");
hat[3] = loadImage ("hat4.png");
pants[0] = loadImage ("pant1.png");
pants[1] = loadImage ("pant2.png");
pants[2] = loadImage ("pant3.png");
pants[3] = loadImage ("pant4.png");
}
Then if you wanted to clear, have an IF check for the location (button) that you want to select to clear, and your function could return all the 'selected' values back to -1