A garden from two loops

Challenge 14 of 16

A garden out of two functions and two loops: three trees along the back and six flowers across the front. Neither loop knows the other is there.

Set the flower stems' height, the trees' size and the gap between flowers.

Your code JavaScript

Set the flower stems' height, the trees' size and the gap between flowers.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

0%

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.