A row that falls

Challenge 11 of 12

A loop draws the shapes and a variable above everyFrame decides where they all are this frame.

Start y at 30, add 6 to it every frame, then draw five CYAN circles 40 across at that y, the first at 40 across and each one 80 further right, on BLACK.

Your code JavaScript

Start y at 30, add 6 to it every frame, then draw five CYAN circles 40 across at that y, the first at 40 across and each one 80 further right, on BLACK.

Console print() output

0 / 40 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.