Iteration

We are going to introduce to new concepts: iteration and variables.

Iteration is required to perform a similar operation multiple times. Iteration requires variables for values that change for each iteration.

Iteration is performed using loops. Most programming languages have several styles of loops. The most common is the for loop.

For loop

Here is a typical for loop:

for (var i = 0; i < 10; i++) {
    ellipse(56, 46, 55, 55);
}

The above loop executes the ellipse() function 10 times.

For loops consist of 4 sections, shown here:

for (initialisation; comparison; increment) {
    body
}

Initialisation

A loop requires a variable to keep track of how many times we have executed the loop. Let's quickly talk about variables...

Variables

When programs run they often need to store data temporarily and access it again later. For example, on shopping website, the website needs to store your username so that it is displayed on every page. It doesn't store it permanently on the hard drive, it is stored in RAM, short term memory. When a program stores things in RAM it uses variables to do so. Variables are so common they have many uses and are used prolifically in programming.

To store some data we need to indicate that we want to create a variable and give it a name.

In JavaScript the syntax for creating a variable is the var keyword followed by the variable name. Some examples of variables we can create:

var name;
var i;
var time;
var sum;
var creditCard;

Variable names must conform to a specific syntax. There are same basic rules to follow:

• Variable names can't start with a number
• They can't contain spaces
• They can contain an underscore _ or a $ but no other punctuation

Since spaces are not permitted in names we can use an underscore or capitalisation. For example:

var creditCard;
var credit_card;

Names in JavaScript typically begin with a lowercase character. Uppercase characters are permitted, however this is the common style and it is best to remain consistent.

Assigning values to a variable

Now that we have a named variable we can put a value in it. To assign a value we use the = operator. The variable name goes on the left and the value goes on the right, e.g.:

age = 5;
i = 0;
creditCard = 5552555255525552;

Note that we can assign a value at the same time as we declare the variable:

var age = 5;

Back to Initialisation

In our loop we need a counter variable. You can call it whatever you like. Often the letter i is used. However you could also use the variable name count.

Typically the counter variable is initialised to zero, however it may start at other numbers.

Hence in the example above the initialisation is var i = 0.

Comparison

A loop requires a way to end. The second part of the loop is the comparison, it compares the counter variable's value to another number to see if the loop should end. In the example above the variable i was compared with the value 10. It is written as i < 10. The loop will continue if the result of the expression is true. i starts with the value 0. We know that 0 < 10, it is true, therefore the loop will continue to execute.

The counter variable will increment once each time through the loop. Therefore it will have the values:

0, 1, 2, 3, 4, 5, ...

When will the loop stop? When the comparison becomes false.

When i is 9 the comparison is still true 9 < 10 however when i becomes 10, the comparison is no longer true. 10 < 10 is false. The loop will no execute when i is 10. Therefore the loop will execute for the following values of i:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Because i starts at 0, the total number of times the loop executes is 10, even though the last value is only 9.

Increment

Each time through the loop we need to increment the counter. In the example above the value of i is increment by one using the following expression: i++. The ++ means add 1 to the variable.

Another longer way to write the same thing is: i = i + 1. The right hand side of the = is always executed first. Initially i has the value 0, so 0 + 1 is 1 which is then assigned to i. So if i is zero, then after the increment it becomes 1. However, we can have larger increments. i = i + 2 adds 2 to the value of i each time through the loop.

Where to use loops?

Loops are used extensively in computer programs. One thing that computers are good at is automation. Computers don't mind doing hundreds, thousands, even millions of the same thing over and over again! Computers do this using loops.

In this course we will use loops to automatically position shapes for visualisations and automatically generate colour gradients, as well as animations.