Preface A Model A Medium A History Variables Functions Control Loops Classes
Source Overview


“2 or more, use a for.”

Edsger W. Dijkstra

Say Hello World Then Repeat

In the last chapter we looked at selection and how we can change the flow of a program by writing conditional statements. These statements, as we saw, could be totally deterministic or they could use a strategy of randomness. Either way, the idea is of changing the flow of data and eventually the processes that we perform on these datas. This gives us great flexibility in the way we want our program to run and is especially important for developing programs that interact with the user.

In this chapter we will look at iteration and our fourth fundamental programming concept. Iteration is a powerful means for getting the machine to do tasks over and over again. It is essentially a process of repetition and this is essential for many ideas we may want to implement; drawing many shapes to the screen, grabbing data from a data set, analysing words in a text, creating thousands of particles... indeed, any process that needs repeating will almost always need some form of iteration.

Imagine what a program would look like if we had no way of repeating instructions. Say for example you wanted to draw five crosses to the screen. You would quite logically write the cross function and then copy and paste the same command five times with a few parameter variations to display them in different positions and perhaps with different sizes. We’ve already proceeded in this manner but the fact remains that we have written five lines of code when in fact we could get away with only two, if not one and get the same results.

The way to do this, is in using an iterative control structure. With such a structure we can easily draw five or five thousand crosses and we can do this smply by changing one value in the structure. This is a powerful and very efficient means for performing repetitive tasks and it is one that you will use all the time. Let’s have a closer look at one of these iterative structures, called the for loop.

There are a few different types of iterative structures but the for loop is by far the most common.

There are four main parts to a for loop control structure:
1). An initial variable value.
2). A condition and final variable value.
3). A step value - increment.
4). A body for adding the statements to repeat.

keyword:for   ‹init; condition; step› ‹statement[s];›

Eg 1. js.
for (var i = 0; i < 5; i++) {
  println("Hello World");

Eg 2. java
for (int i = 0; i < 5; i++) {
  println("Hello World");


This first example of the for loop demonstrates a concept called iteration. An iterative process is one whose state can be summarized by a fixed number of state variables, together with a fixed rule that describes how the state variables should be updated as the process moves from state to state and an (optional) end test that specifies conditions under which the process should terminate.* Within our for loop we have all those elements. If that definition seems a little too technical for you, then iteration is basically a fancy word for repetition.

In the above sketch, we use this iterative process to display 5000 randomly positioned dots of varying size. The logic is the following: We use our for loop to determine the number of repetitions and then within the main body of the loop structure we determine what to repeat. In this case it is not just the repetition of a geometric shape. We are also reapeating instructions for its position and size.

Source Code
Sketch: Loops_01

I've also started to add sketches to P5js's online editor
Eg 3. java
for (int i = 0; i < 5000; i++) {
  float x = random(width);
  float y = random(height);
  float dia = random(1, 9);
  ellipse(x, y, dia, dia);

It's important to understand that we are in a looping structure and that on each iteration of the loop, we calculate a new postion, a new size and a new dot to draw. Press any key to redraw the above sketch. Now explore some more with the example written on Observable. Play with the various values of the loop and also the variables for x, y, and dia. In the next chapter we'll look at another use of the for loop to create repeating patterns on a grid.

A Little History of the Loop’s Legacy

The Dutch computer scientist, Edsger W. Dijkstra is claimed to have once said, that “the teaching of BASIC should be rated as a criminal offense: it mutilates the mind beyond recovery.” (Source : 10 PRINT. pg 96). He was referring to the GOTO command used in the BASIC language, that he criticised vehemently. Dijkstra was pushing for the development of a structured programming paradigm and BASIC’s GOTO just didn’t fit into the bill. In 1968 he wrote a famous article, A Case against the GOTO Statement regarded as a major step towards the widespread deprecation of the GOTO statement and its effective replacement by control structures such as the for loop.



Wikipedia contributors. For loop
Wikipedia, retrieved 11 May 2019 14:55 UTC

Reas Casey, Fry Ben. The FOR loop in Processing

WebDevEtc et al. Loops and Iteration in JavaScript
MDN Web Docs

Tutorial. Read more about loops in other languages

Dijkstra E.W. A Case against the GOTO Statement