Conditionals 2 – If else

Number growing with count up

In the previous lesson we coded the Number growing sketch as below.

                        Sketch – Number growing

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

19

20

var numberSize=20;

var number=1;

function setup() {

  createCanvas(600, 400);

  textAlign(CENTER, CENTER);

}

function draw() {

  background(220);

  fill(255, 0, 0);

  var x = width / 2;

  var y = height / 2;

  textSize(numberSize);

  text(number, x, y);

  numberSize++; 

  if (numberSize>=120) {

    numberSize=20;

  }

}

Now add 1 more line of code to the body of the if clause:

number++;

and run the sketch

                        Sketch – Number growing with number++

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

19

20

21

var numberSize=20;

var number=1;

function setup() {

  createCanvas(600, 400);

  textAlign(CENTER, CENTER);

}

function draw() {

  background(220);

  fill(255, 0, 0);

  var x = width / 2;

  var y = height / 2;

  textSize(numberSize);

  text(number, x, y);

  numberSize++; 

  if (numberSize>=120) {

    numberSize=20;

    number++;

  }

}

else clause

Sometimes we may want to do 1 thing if the condition is true and another thing if the condition is false.

To achieve this add an else clause immediately after the body of the if clause.  

See the sketch below, if marks is 40 or above, it will display ‘congrats you passed’ on the console otherwise it will display ‘sorry you failed’.

Go ahead - change the value of marks to above 40 or below 40 and run the sketch and see the output.

                        Sketch – if else

 1

 2

 3

 4

 5

 6

 7

 8

 9

function setup() {

  var marks=35;

  if (marks>=40) {

    print("congrats you passed");

  }

  else {

    print("sorry you have failed");

  }

}

Note: Every else has to be preceded by an if  but every if need not be followed by an else.

With the help of a variable and if else  we can control which direction the ball moves in the ball animation sketch.

Study the below code – when the value of the variable forward is true , the ball will move from left to right (x will increase) and when the value is false it will move from right to left (x will decrease). Go ahead run the below sketch. Then change the value of the variable forward and run it again.

                                        Sketch – control direction in which the ball moves

 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

var forward=true;

var x;

function setup() {

  createCanvas(600, 400);

  x=width / 2;

  rectMode(CENTER);

}

function draw() {

  background(1, 186, 240);

  var y = height / 2;

  var ballSize = 50;

  // draw ball

  fill(237, 34, 93);

  ellipse(x, y, ballSize, ballSize);

  // move ball

  if (forward == true) {

    x++;

  }else {

    x--;

  }

}

Exercise Bounce ball –  Code a sketch to move a ball from left to right. When the ball hits the right edge of the canvas change the direction and move the ball in the reverse direction ( i.e. from right to left).

 Hint - Create a global variable called forward and set its value to true. If the right side of the ball crosses the right edge of the canvas change the value of forward to false

To move the ball do the following

        if the value of forward is true move the ball forward by increasing the value of x

        if the value of forward is false move it backward by decreasing the value of x

                        Sketch – Bounce ball

 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

29

30

31

32

var forward=true;

var x;

function setup() {

  createCanvas(600, 400);

  x=width / 2;

  rectMode(CENTER);

}

function draw() {

  background(1, 186, 240);

  var y = height / 2;

  var ballSize = 50;

  // draw ball

  fill(237, 34, 93);

  ellipse(x, y, ballSize, ballSize);

  //change direction if ball hits right edge of canvas

  var ballRight=x+(ballSize / 2);

  //if ballRight is right of canvas right edge then set forward to false

  if (ballRight >= width ) {

    forward=false;

  }

  // move ball

  if (forward == true) {

    x++;

  }else {

    x--;

  }

}

Practice Questions

  1. Bounce ball in both directions – Code a sketch where ball moves from left to right. If the ball hits the rights edge reverse direction and if it hits the left edge again reverse direction

Hint: if right edge of the ball crosses the right edge of the canvas set the value of forward to false

 if the left edge of the ball crosses the left edge of the canvas set the value of forward to true

  1. In the number count up sketch display even numbers in yellow color

Hint - if number is even change the paintbrush color to yellow using the fill command

How to tell if a number is even? The remainder of an even number divided by 2 is always 0

Use the remainder '%' operator to check if a number is even or not.

  1. In the number count sketch  display numbers till 9. After 9 canvas should be blank.

Hint: Increase number, draw number, etc. only if number is less than 10

Recap