Windows in a wall

Challenge 13 of 16

A grid needn't fill the canvas. This one fits inside a wall that was drawn once, before either loop started, the way the fence rail was — the loops simply do not reach it.

Set the two gaps and the window's width.

Your code JavaScript

Set the two gaps and the window's width.

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 Loops inside Loops

A loop can hold another loop. That is all a nest is, and the whole of the difficulty is in one sentence: the inner loop runs all the way through, from its start to its stop, for every single turn of the outer one.

for (var row = 0; row < 3; row = row + 1) {
for (var col = 0; col < 5; col = col + 1) {
circle(50 + col * 76, 90 + row * 110, 44);
}
}

Three turns of five is fifteen circles, out of four lines. The counters go 0-0, 0-1, 0-2, 0-3, 0-4, then 1-0, 1-1 and on. Notice what col does when row moves on: it starts over. It always starts over, which is exactly why this draws a grid and not a diagonal.

The names matter more than they did. With one counter, i was fine. With two, row and col tell you which is which at a glance, and mixing them up is the mistake to expect: put the row counter in the across sum and you get a picture that is nothing like the one you wanted.

Which counter goes where is the whole design. The one that changes every turn, col, spaces things out along a row. The one that only moves when a whole row has finished, row, moves you down to the next one. Put a counter in a size instead and it is the same choice again: a size from row makes every row a different size, and a size from col makes every column one.

Both counters can go into the same sum. Add a little of row into the across sum and each row starts further along than the one above, so the grid leans.

The inner loop's stop can read the outer counter. Write col < row + 1 and the first row draws one shape, the second two, and you have a triangle instead of a rectangle.

And a nest needn't look like a nest. Put the inner loop in a function of its own and the outer loop just calls it once per row — same fifteen shapes, and often easier to read.

Next topic these grids start moving. The frame number joins the two counters, and everything you have built here can drift, grow or spin.