In the following app, the user's goal is to manipulate brightness (vertical mouse movement) and saturation (horizontal mouse movement) to attempt to have the center rectangle equal in value to the background. The center rect is always the complementary hue of the background.

My first question is super simple. I want the user to be able to move the mouse off the screen and have the saturation and brightness default back to 100. I am new to coding and tried to use the or logic with || but I got errors so I commented it out (see towards the end).

It would also be amazing if there was a way to code this so that when the user got the value of the rect and the background equal, there was a clue-- or flag that came up to confirm. When I say value I am refering to color value-- if a black and white conversion were made, equal value would leave the rect and the background equal gray-- we'd no longer see the rectangle.

(when value matches up with color, serious luminosity happens for the eyes)

any suggestions appreciated.
**

void setup()
{
 size(800, 600);
 stroke(255);
 frameRate(40);
}

float a = 0;      
float b = 400;  

//elements for rectangle in middle
float rx1;
float rw2;
float ry1;
float rh2;

//initial values (these probably get overridden by mouse)
float sat = 100;
float brite = 100;

void draw()
{
 colorMode(HSB, 360, 100, 100);
 background(a*360/width,sat,brite);

//create rectangle of complementary color
 rx1 = (width/2)-(width*0.15);
 ry1 = (height/2)-(0.15*height);
 rw2 = (0.3*width);
 rh2 = (0.3*height);

 fill(b*360/width, (200-sat), (200-brite));
 noStroke ();
 rect (rx1, ry1, rw2, rh2);


 a = a + 0.5;
 b = b + 0.5;
 stroke(255);
 line(a, 0, a, 0.02*height);
 line(b, 0.98*height, b, height);
 
 if(a > width) {
   a = 0;
 }
 if(b > width) {
   b = 0;
 }
 
//  if ((mouseX = width) || (mouseX = 0)) {
//    sat=100;
//    brite=100;
//  }
 
 
 sat = (mouseX*200/width);
 brite = (mouseY*200/height);
}