Each one its own speed

Challenge 12 of 12

The last one, and the counter does two jobs: it picks the row and it decides how fast that row goes.

Draw five ORANGE circles 50 across on BLACK, the first row 60 down and each one 70 lower, each at 20 plus frameNumber times i times 3 across.

Your code JavaScript

Draw five ORANGE circles 50 across on BLACK, the first row 60 down and each one 70 lower, each at 20 plus frameNumber times i times 3 across.

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.