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

  1. is mouseX > 200
  2. 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

 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

  1. is number == 3
  2. 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

 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

  1. Driver is a graduate
  2. not a graduate, Male and age above 30
  3. 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

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

 

  1. 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