Hello, everyone! I've been given an assignment, and I've almost got it, but not quite. Here's the gist of it:

Write a program so that a mouse click within a shape changes said shape. A mouse click outside of any shape should also alter the image somehow.

I've gotten my shapes to change colors, but I'm having an issue getting my image to change when I click outside my shapes. Specifically, I'd like all three of my shapes to be filled with white, and then revert to their original color when I click again. Here's the code:

//Variables
boolean button1=false;
boolean button2=false;
boolean button3=false;
boolean button4=false;

//Rectangle variables
float rX=50;
float rY=50;
float rW=100;
float rH=100;

//Circle variables
float cX=245;
float cY=45;
float cW=110;
float cH=110;

//Triangle variables
float tA=125;
float tB=200;
float tC=150;
float tD=125;

void setup(){
 size(400,400);
 smooth();
}

void draw(){
 //Draw initial sketch
 background(180);
 stroke(0);
 strokeWeight(3);
 //Rect color change
 if(button1){
   fill(9,106,16);
 }
 else if (button4){
   fill(255);
 }
 else{
   fill(255,13,0);
 }
 rectMode(CENTER);
 rect(100,100,100,100);
 //circle color change
 if(button2){
   fill(10,48,193);
 }
 else if (button4){
   fill(255);
 }
 else{
   fill(9,106,16);
 }
 ellipse(300,100,110,110);
 //Triangle color change
 if(button3){
   fill(255,13,0);
 }
 else if (button4){
   fill(255);
 }
 else{
   fill(10,48,193);
 }
 triangle(200,200,275,325,125,325);
}
 
 //Rectangle
 void mousePressed(){
   //Change rect color on/off when mouse click inside rect
   if(mouseX > rX && mouseX < rX+rW && mouseY > rY && mouseY < rY+rH){
   button1=!button1;
 }
 //Change circle color on/off when mouse click inside circle
 if(mouseX> cX && mouseX < cX+cW && mouseY > cY && mouseY < cY+cH){
   button2=!button2;
 }
 //Change ellipse color on/off when mouse click inside triangle
 if(mouseX> tA && mouseX < tA+tC && mouseY > tB && mouseY < tB+tD){
   button3=!button3;
 }
 //Change all color when mouse click not inside shapes
 if(mouseX<rX && mouseX>rX+rW && mouseX<cX && mouseX >cX+cW && mouseX<tA && mouseX>tA+tC && mouseY<rY && mouseY>rY+rH && mouseY<cY && mouseY>cY+cH && mouseY<tB && mouseY>tB+tD){
   button4=!button4;
 }
 }

Thanks!  
 
P.S. I'm a little new to Processing, so please be as specific as possible. Simple explanations are also appreciated, since we've only covered basic commands so far (as in, we've only just scratched loops).

Thank you! This helped so much.