Two lines, ten shapes

Challenge 7 of 12

A loop repeats everything between its curly brackets, not just the first line. There are two shapes in this body, so five turns of the loop leave ten shapes on the canvas.

Set the two steps.

Your code JavaScript

Set the two steps.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Doing It Again

Some drawings are the same thing several times over. You could write the line out five times, and for five you probably would. For fifty you would not.

A loop writes it once and says how many times to run it:

for (var i = 0; i < 5; i = i + 1) {
circle(200, 200, 100);
}

Three things sit in those round brackets, separated by semicolons, and they are always the same three.

var i = 0 makes a counter and starts it at nought.

i < 5 is the test. Before every turn the loop asks "is i still less than 5?", and the moment the answer is no it stops. So the loop runs with i as 0, 1, 2, 3 and 4 — five turns, and it never runs with i as 5.

i = i + 1 is what happens at the end of each turn. Without it the counter would never change, the test would never fail, and the loop would never finish.

Now look at what that loop actually draws: the same circle, in the same place, at the same size, five times over. You see one circle. A loop repeats the lines, not the picture — if nothing inside it changes from one turn to the next, you have drawn the same thing five times and wasted four of them.

What makes each turn different is i. It is an ordinary number and you can use it like one:

circle(200, 200, 100 + i * 30);

The first time round i is 0, so that is 100. Then 130, 160, 190, 220. One line, five different rings.

Everything in this topic uses i for the size, so you can see the loop counting without anything moving about. Rings are drawn with no fill and just an outline, which is why you can see all of them at once instead of the biggest one hiding the rest.

One warning. If the counter never reaches the value that ends the loop, the loop never finishes. Try a step of 0 and see: the sketch stops itself and tells you, rather than freezing. That message is worth meeting once on purpose.

Next topic the counter goes into a coordinate instead of a size, and the pile turns into a row.