The same loop, downwards

Challenge 2 of 12

Swap which number the counter feeds and a row becomes a column, with the across the same for every one.

Draw four CYAN squares 80 across on BLACK, all at 160 across, the first at 40 down and each one 90 further down.

Your code JavaScript

Draw four CYAN squares 80 across on BLACK, all at 160 across, the first at 40 down and each one 90 further down.

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.