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
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
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.
Hint: Increase number, draw number, etc. only if number is less than 10
Recap