While loop

Note: Most of the sketches in this lesson will be in static mode (i.e. no draw() function).

Many times we want the computer to execute the same  block of code repeatedly.

For example suppose we want to display “Hello” and “Hi” on the console 5 times.

We can tell the computer to execute print("Hello"); and print("Hi");  5 times. To achieve this we use the while statement.

 While is very similar to the if statement. The syntax of the while statement is as follows:-

 As long as the test is true, the computer will keep executing the body of the while statement.

Let us code a sketch to print “Hello” on the console 5 times

                        Sketch – print “hello” on the console 5 times

 1

 2

 3

 4

 5

 6

 7

 8

function setup() {

  var ctr=0;

  while(ctr<5){

    print("Hello");

    print("Hi");

    ctr++;

  }

}

What will happen if we delete line 6 (i.e. ctr++)  from the above sketch?

The statement will become infinite. Computer will never be able to exit the while statement because the condition/test will never become false

Note: Each execution of body of the loop is called an Iteration. In the above sketch the computer will iterate 5 times, i.e. execute the loop body 5 times.

Exercise: Code a sketch to print the first 5 even numbers on the console – i.e  2, 4, 6, 8, 10

                        Sketch –  first 5 even numbers

 1

 2

 3

 4

 5

 6

 7

function setup() {

  var ctr=2;

  while(ctr<=10){

    print(ctr);

    ctr+=2; // shortcut for ctr=ctr+2;

  }

}

Note: Here demonstrate to the students how to do a dry run of your code

Exercise: Print the first 6 odd numbers on the console in reverse order  – i.e  11, 9, 7, 5, 3, 1

                        Sketch –  odd numbers in reverse order

 1

 2

 3

 4

 5

 6

 7

function setup() {

  var ctr=11;

  while(ctr>0){

    print(ctr);

    ctr-=2; // shortcut for ctr=ctr-2;

  }

}

Exercise: Predict the output of the following sketch without executing it.

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

function setup() {

  var prev=0;

  var cur=1;

  var temp;

  while(cur<10){

    print(cur);

    temp=prev;

    prev=cur;

    cur=cur+temp;

  }

}

We can also use while loop in active mode inside the draw() function.

Let us code a sketch to move multiple circles from left to right as shown below.

                        Sketch –  move 4 balls from left to right

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

19

20

var x;

var ballSize=50;

function setup() {

  createCanvas(600, 400);

  x=ballSize/2;

}

function draw() {

  background(225);

  fill(200, 20, 100);

  // draw 4 balls one below other

  var y = ballSize/2;

  while (y < height) {

    ellipse(x, y, ballSize, ballSize);

    y+=(ballSize*2);

  }

  // move ball

  x++;

}

Practice Questions

  1. Code a sketch to count the number of even numbers from 1 to 19. Code in static mode without draw().

        Hint:  See sample code below

        Declare a variable called evenCount and set its initial value to 0

        Define a loop that will iterate from 1 to 19. For each iteration if the value is even then increment the value of evenCount by 1

        After the loop is over print evenCount on the console

     

function setup() {

  var ctr=1;

  var ctr=1;

  while (ctr<=19) {

    //if num is even increment evenCount by 1

 

    ctr++;

  }

  print(evenCount);

}

  1. Code a sketch of 5 balls moving from top to bottom and another 5 balls moving from bottom to top.

 

Recap