A loop that calls your function

Challenge 5 of 12

A loop can call a function of your own, so one line draws a whole tree. Write drawTree (a BROWN square 30 across at 15 before its number, 250 down, then a GREEN circle 90 across at its number, 230 down).

Call it four times from 70, 90 apart, on CYAN.

Your code JavaScript

Call it four times from 70, 90 apart, on CYAN.

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.