p5.js Draw a box when the conditions are not met using an if statement

Question

i have been pulling my hair out with this for few hours.I have to create shapes when the cursor is in a certain place using if statements, which i have completed. I also need to draw a shape if neither of the conditions are met, this i have only managed to half complete. IS anybody able to give some guidance on what i need to think about to complete the task? enter image description here

function draw()
{
    // draw the image
    image(img,0,0);

    //Write your code below here ...

//91m distance dark circle  
if(dist(mouseX, mouseY,1491, 585)<= 91)
{
    fill(0,139,139);
    ellipse(1491, 585,91 * 2, 91 * 2);

}
//Fish wholsalers   
if(mouseX > 1590 && mouseX < 1691
    && mouseY > 614 && mouseY < 691)
{
    fill(25, 25, 112)
    rect(1590,614,104,77) 

}
//neither position
if(dist(mouseX, mouseY,1491, 585)>= 91 && (mouseX > 1690 && mouseX < 1590 && mouseY < 614 && mouseY > 691) )
{
    fill(124, 252, 0)
    rect(1564, 183, 322, 173 )  
}

Answer 1

I think you have to do something like:

//91m dist dark circle
if( yourCondition )
{

    yourCode;

}

// Fish wholsalers
else if( yourOtherCondition )
{

    yourOtherCode;

}

// neither position
else
{

    yourOtherOtherCode;

}

Answer 2

The easiest solution is to use 2 variables.

Evaluate if the mouse is in_range :

var in_range = dist(mouseX, mouseY,1491, 585)<= 91;

Evaluate if the mouse is in bounds:

var in_bounds = mouseX > 1590 && mouseX < 1691 && mouseY > 614 && mouseY < 691; 

Draw the rectangles dependent on the conditions in_range , in_bounds respectively !in_range && !in_bounds .

var in_range = dist(mouseX, mouseY,1491, 585)<= 91;
var in_bounds = mouseX > 1590 && mouseX < 1691 && mouseY > 614 && mouseY < 691; 

if (in_range)
{
    fill(0,139,139);
    ellipse(1491, 585,91 * 2, 91 * 2);
}

if (in_bounds)
{
    fill(25, 25, 112)
    rect(1590,614,104,77) 
}

if(!in_range && !in_bounds)
{
    fill(124, 252, 0)
    rect(1564, 183, 322, 173 )  
}

---

If you are not allowed to use variables:

The opposite of < is >= and the opposite of > is <= .
The opposite of A && B is !(A && B) respectively !A || !B !A || !B .
The opposite of x > A && x < B is x >= A || x <= B x >= A || x <= B .

In your case that is:

if (!(dist(mouseX, mouseY,1491, 585) <= 91) &&
    !(mouseX > 1590 && mouseX < 1691 && mouseY > 614 && mouseY < 691))
{
    fill(124, 252, 0)
    rect(1564, 183, 322, 173 )  
}

Or

if (dist(mouseX, mouseY,1491, 585) > 91 &&
    (mouseX <= 1590 || mouseX >= 1691 || mouseY <= 614 || mouseY >= 691))
{
    fill(124, 252, 0)
    rect(1564, 183, 322, 173 )  
}