A loop inside a loop

Challenge 6 of 12

A loop inside a loop draws a grid: the outer one picks the row, the inner one runs along it. Naming them row and col is what stops you mixing them up.

Draw a 4 by 4 grid of WHITE squares 60 across on BLACK, the first at 50, 50, with 80 between.

Your code JavaScript

Draw a 4 by 4 grid of WHITE squares 60 across on BLACK, the first at 50, 50, with 80 between.

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 Code it yourself

Everything in this topic starts the same way: an empty editor. There is nothing to fill in, because there is nothing there — the loop, its three parts and its body are all yours.

The buttons above the editor do the fiddly part. Click for and you get a whole working header, curly brackets and all, counting i from 0 up to 4 with the cursor already inside. Click everyFrame and you get the block that runs every frame. Nothing a button gives you is the answer; how many times round, and what changes each time, are still your decisions.

The three parts of the header are where it starts, when it stops, and how far it steps. i is just a number, so it is the body's job to make each turn different. A body that never mentions i draws the same shape in the same place over and over, and the canvas will look like one shape — that is the commonest way a loop looks broken when it is running perfectly.

The counter almost never goes straight into a coordinate on its own. It goes through a sum: 60 + i * 70 spreads shapes 70 apart starting at 60, and 20 + i * 20 makes each one bigger than the last. Change the 70 and the whole row respreads.

A loop inside a loop draws a grid. Name the two counters row and col rather than i and j — with two of them, one letter each is exactly how they get mixed up, and the outer one is free to decide where the inner one stops.

Press Run early and often. Get one shape right first, then wrap the loop round it — a body you have already seen work is far easier to count than a loop and a blank canvas.