Three shapes, five times

Challenge 4 of 16

Three shapes in the body and five turns in the loop puts fifteen shapes on the canvas out of three lines of drawing. Get the body right once and every flower in the row is right.

Set the stem's width and the two circle sizes.

Your code JavaScript

Set the stem's width and the two circle sizes.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Loops and Functions

You have been calling ready-made functions from inside loops for a while now. This topic is the other half of it: the function is yours, and the body is where you decide what one of the thing looks like.

That split is the whole idea. The body says what one tree looks like. The loop says how many trees and where. Neither one needs to know anything about the other:

function drawTree(x, y) {
shapeColour(BROWN);
rectangle(x - 6, y - 60, 12, 60);
shapeColour(GREEN);
circle(x, y - 60, 54);
}

for (var i = 0; i < 5; i = i + 1) {
drawTree(40 + i * 80, 320);
}

Five trees, and the drawing is written once. Change the head's size and all five change together, which is the real reason to put it in a function at all.

Now the part that catches everybody. The counter belongs to the loop. It does not exist inside the body, and if you reach for i in there you get "i is not defined" — the body's only knowledge of the outside world is the numbers it was handed. That is what the inputs are for, and one of the challenges here is built on exactly that mistake so you meet the message once on purpose.

Which means every number in the body has to be measured from an input. Write 200 where you meant x and every turn draws in the same place, one shape on top of the last, so a five-turn loop looks like it ran once.

A turn can do more than one thing. Two calls in the loop draw two things per turn; one function called from two loops draws two rows; and a function of yours can call another function of yours, so one line in the loop can put a whole pair of trees on the canvas.

And not everything belongs inside. A fence has one long rail and a row of posts: the rail is drawn once, before the loop, and only the posts repeat. Ask what there is one of and what there are many of.

Next topic a loop goes inside another loop, and a row becomes a grid.