Two loops, two headers

Challenge 10 of 16

One row counting up and another counting down, drawn one after the other. They are the same length because the two headers cover the same number of turns, which is worth checking rather than assuming.

Set the first stop and the second start and stop.

Your code JavaScript

Set the first stop and the second start and stop.

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.