The header inside a function

Challenge 11 of 16

A loop in a body can be handed its own start and stop, so the caller decides how much of the row gets drawn. Two calls, two lengths, one loop written once — count the circles in each row of the target.

Set the two stops.

Your code JavaScript

Set the two stops.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Start, Stop, Step

Every loop you have written has had the same header:

for (var i = 0; i < 5; i = i + 1) {

You have changed what the body does with i, and that is most of what loops are for. But those three numbers were only ever a choice, and this topic is about choosing them.

var i = 0 is the start. Nothing says nought. Start at 2 and the first two turns simply never happen, so a row of six becomes a row of four and it begins further along.

i < 5 is the test, and the important word is "before". It is checked before every turn, so the loop runs with i as 0, 1, 2, 3 and 4 and never with i as 5. That is why from 0 up to 5 is five turns, and why from 3 up to 9 is six.

i = i + 1 is the step. Add two and the counter takes every other value, so half as many shapes are drawn and the ones that are drawn sit twice as far apart. Add three and you get a dashed line.

A counter can also count down, and then the test has to look the other way round:

for (var i = 5; i > 0; i = i - 1) {

That runs with i as 5, 4, 3, 2 and 1. Written with a less-than test it would stop before it began, because 5 is not less than 0.

Which brings up the one thing that can go wrong here. The loop only ends when the test fails, so something in the header has to be carrying the counter towards that. Take nothing away — a step of 0 — and i stays where it is for ever. The sketch will not freeze; it stops itself and tells you the loop never finished. One of the challenges here is built on exactly that, and it is worth reading the message once on purpose.

Two numbers are easy to mix up, so keep them apart in your head. The step is in the header and decides which values i takes. The gap is in your drawing and decides how far apart those values put the shapes. A step of 3 with a gap of 25 puts shapes 75 apart.

Next topic the counter goes through a sum on its way to the picture, and the gaps stop having to be even.