Loops

Loops are a handy way to do something over and over for as few or as many times as you like. Let's say we wanted to draw a row of small circles across our sketch, like so:

Yes, you could type the ellipse command many times over, but it's just easier to let the computer do the repetitive work for you. This is where loops come into play.

while loops

The first kind of loop we'll use is a while loop:

There are three critical parts to every loop:

• initialization - where you set things up before you start looping. In the above example, this is the line that initializes things:

Note that we are both declaring and initializing the variable num.

• loop test - this is where you test to see if the code inside the loop should run. In the example, this is:

The test happens inside the parenthesis: num < 20. This is a boolean statement, that allows the loop to run when it is true, and stops the loop when it is false. In this case, the test is true whenever num is less than 20.

• value change - this is where you increment, or change the value of a variable that will eventually cause the loop to stop:

Here we're setting the value of num to be the current value of num plus 1 - or in other words, we're adding one to num (note that there's a shortcut for just adding one to a variable: num++;). This will eventually cause the loop test to be false, and the loop to stop.

The final, and more interesting part of a loop is the rest of the code that you want to run, in the example, it's just a single drawing command:

This draws a circle at num * 30, 50 - so, across the canvas, one every 30 pixels.

• Where will the first one be drawn?
• Where will the last one be drawn?
• How many times does the loop run? Why?

for loops

Another kind of loop is a for loop. for loops have the same three critical elements as while loops, just expressed in a different way. Here's the same example as above, but written as a for loop:

In for loops, the initialization, test and change all happen within the parenthesis - separated by semi-colons. You could rewrite the above for loop like this, just to separate the three parts (it's silly, but will actually run):

Common practices

In general, even though for loops and while loops are functionally interchangeable (i.e. they do the same thing), you'll use for loops for counting things, like "draw 10 squares", and while loops for gradually changing something, like "draw squares until I reach the edge of the canvas." A lot of programmers use the variable i or n as a counter in while loops. You can change multiple variables as you progress through a loop, but you'll usually just test one. For example - can you figure out what this draws:

Try it Yourself

Here are some ideas for you to try on your own:

• Use a loop to draw a bunch of circles that go down the canvas
• Use a loop to draw a diagonal line of circles
  • from the top left corner to the bottom right corner
  • from the top right corner to the bottom left corner
• use a loop to draw a compound shape (e.g. the three circles at the beginning of this post) in an interesting way
• Change something else besides the position of what you're drawing in the loop

How would you draw something like this?