Nested If and Logical Operators

Detecting position of Mouse (mouseX and mouseY)

The mouseX global variable gives us the position of the mouse on the X axis and the mouseY variable gives us the position of the mouse on the Y axis.

The below sketch displays X,Y position of the mouse on the canvas

Sketch – display mouse position

function setup() {

createCanvas(600, 400);

textAlign(CENTER,CENTER);

textSize(20);

}

function draw(){

background(225);

fill(255,0,0);

var mesg=mouseX + "," + mouseY;

text(mesg,width/2,height/2);

}

Let us code a sketch to divide the canvas into 3 parts by drawing 2 vertical lines as below

Sketch – divide canvas

function setup(){

createCanvas(600,400);

stroke(0,0,0); // set color of the pen to black

}

function draw(){

background(225);

line(200,0,200,height); // vertical line at 200 X

line(400,0,400,height); // vertical line at 400 X

}

Nested if

The body of the if block or the else block can contain any code including another if.

In the above sketch if the mouse is in the first segment draw a red square. If the mouse is in the second segment draw a green square and if the mouse is in the third segment draw a blue square.

Sketch – nested if

function setup(){

createCanvas(600,400);

stroke(0); // set color of the pen to black

rectMode(CENTER);

}

function draw(){

background(225);

line(200,0,200,height); // vertical line at 200 X

line(400,0,400,height); // vertical line at 400 X

if(mouseX<200){

fill(255,0,0); // red color

}

else{

if(mouseX<400){

fill(0,255,0); // green color

}

else{

fill(0,0,255); //blue color

}

rect(width/2,height/2,50,50); // draw rect

}

Joining 2 Conditions – logical operators

Logical operators allow us to combine 2 conditions (tests) into a single condition. There are 2 logical operators:

And ‘&&’ - to check if both tests are true
Or ‘||’ - to check if either of the tests is true

Note the ‘&’ symbol is slightly above ‘7’ on the keyboard and ‘|’ is above ‘Enter’ key on the keyboard

Divide the canvas into 3 horizontal segments by drawing a 2 vertical lines as in figure below

When mouse pointer is in the middle segment change the background to yellow.

There are 2 conditions (tests) involved here

is mouseX > 200
is mouseX < 400

For mouse to be in the middle segment both the conditions need to be true. If only one of them is true then the mouse will not be in the middle segment

Lets verify the above statement.

Let’s say mouseX is 500 which places the mouse in the last segment.
Test 1 (is mouseX > 200 ) will be true but Test 2 ( is mouseX<400) will be false

Let’s say mouseX is 100 which places it in the first segment

Test 1 (is mouseX > 200 ) will be false but Test 2 ( is mouseX<400) will be false

Since both tests need to be true, we will use the && (And) operator to combine the 2 tests

Sketch – yellow background when mouse is in the middle segment

function setup(){

createCanvas(600,400);

stroke(0); // set color of the pen to black

}

function draw(){

background(225);

if(mouseX>200 && mouseX<400){

background(255,255,0); // yellow color

}

line(200,0,200,height); // line 1

line(400,0,400,height); // line 2

}

Exercise

In the number count sketch draw the numbers 3 and 6 in green colour. See figure below

Here too there are 2 tests

is number == 3
is number == 6

Now ask yourself do both the tests have to be true to change the color to green or just one is enough

Sketch – display 3 and 6 in green

var size=20;

var number=1;

function setup() {

createCanvas(600, 400);

textAlign(CENTER, CENTER);

}

function draw() {

background(1, 186, 240);

var x = width / 2;

var y = height / 2;

fill(255, 0, 0);

// if number is 3 or 6 change brush color to green

if (number==3 || number==6) {

fill(0, 255, 0);

}

textSize(size);

text(number, x, y);

size++;

if (size>=120) {

size=20;

number++;

}

Note: Using Logical operators we can combine not just 2 but even more than 2 tests.

For example say a driver is hired if any one of the following is true

Driver is a graduate
not a graduate, Male and age above 30
not a graduate, Female and age above 25

Lets us say we have stored the driver’s details in the variables isGraduate, gender and age - then our code would be as follows:

if( isGraduate==true || (gender=="Male" && age>30) || (gender=="Female" && age>25) ){

println("Congrats you are hired");

}

else{

println("Sorry you are rejected");

}

Practice Questions

In the number count up sketch display numbers between 4 and 7 (i.e. 4,5,6,7) in Blue.

Divide the canvas into 4 segments by drawing 3 vertical lines. When mouse is either in the first segment or in the third segment change the background color to yellow.

Recap

mouseX variable – position of the mouse on the X axis
mouseY variable – position of the mouse on the Y axis
Logical operators - allow us to combine 2 tests into 1 test
&& And logical operator – checks if both tests are true. Eg. (marks >=40 && marks<70)
|| Or logical operator – checks if either of the tests is true. Eg. (age<11 || age>=20)