how to get rid of a rect with mouseClicked

I'm trying to get rid of a rect that displays when hovered over a text and I can't seem to figure it out.

This is the code I've got so far, and it's very clunky. By using mouseClicked to get rid of the rect that I want to display with hovering, I think it will make it smoother. Any ideas?

PImage image = loadImage("FACE.png");

void setup() { size(750,749); image = loadImage("FACE.png");

}

void draw() { background(image); println(mouseX,mouseY);

if(mouseX < 255 && mouseX > 167 && mouseY > 81 && mouseY < 204){ rect(186,248, 372,250); fill(0); text("Tuesday, 2pm, Male: You look like you need someone strong to help you. (Carrying camera equipment)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 444 && mouseX > 371 && mouseY > 58 && mouseY < 97){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 490 && mouseX > 280 && mouseY > 124 && mouseY < 158){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 555 && mouseX > 360 && mouseY > 192 && mouseY < 225){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 339 && mouseX > 183 && mouseY > 234 && mouseY < 259){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 157 && mouseX > 122 && mouseY > 252 && mouseY < 398){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 295 && mouseX > 226 && mouseY > 296 && mouseY < 328){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 381 && mouseX > 352 && mouseY > 264 && mouseY < 390){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 519 && mouseX > 454 && mouseY > 281 && mouseY < 312){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 328 && mouseX > 203 && mouseY > 391 && mouseY < 426){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 536 && mouseX > 410 && mouseY > 379 && mouseY < 410){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 624 && mouseX > 577 && mouseY > 382 && mouseY < 452){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 211 && mouseX > 142 && mouseY > 448 && mouseY < 482){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 411 && mouseX > 324 && mouseY > 462 && mouseY < 510){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 204 && mouseX > 165 && mouseY > 544 && mouseY < 635){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } else if(mouseX < 548 && mouseX > 508 && mouseY > 458 && mouseY < 678){ rect(186,248, 372,250); fill(0); text("TEXT)", width/2, height/2); textAlign(CENTER); stroke(0); fill(#E8BEB0); } }

void mouseClicked() { background(image); }

Answers

  • I don't think formatting the code is required here: it's obvious that a very basic approach has been taken. That's not a criticism. It's quite normal when you start coding to spend time duplicating the same code with different values...

    If you need to get rid of the rectangles you'll need a variable to store the state of each one and check against this by wrapping each rect() in an additional condition. That's a lot of extra code to add!!!

    Better to check the examples on processing.org for 'iteration', 'arrays' and the Objects tutorial... Rather than trying to apply these directly to this project create some separate sketches to test the different things you're trying to achieve. e.g. a sketch that draws rectangles across the whole screen automatically using nested for loops. An object that can store the property of each tile. Onyou figure these out separately you can work towards combining them into a single sketch ;)

Sign In or Register to comment.