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
1 2 3 4 5 6 7 8 9 10 11 12 | 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
1 2 3 4 5 6 7 8 9 10 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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:
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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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
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
Recap