Evenly spaced, every time

Challenge 16 of 16

Everything the header can do, in one picture. Notice what it cannot do, though: however you set the three numbers the gaps all come out the same, because the counter only ever climbs in even steps.

Set the three numbers.

Your code JavaScript

Set the three numbers.

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 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.