Two levels deep

Challenge 10 of 16

One call, twelve shapes. drawStreet calls drawHouse three times, and each of those calls four more functions, so everyFrame has a single line in it.

Set the three numbers so your street matches the target.

Your code JavaScript

Set the three numbers so your street matches the target.

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 Building a Scene

Last topic ended with nine lines to draw three houses. Every house needed a wall, a roof and two windows, and you wrote all four calls out every time.

A function body can call other functions. So write the house once:

function drawHouse(x, y, size) {
drawWall(x, y, size);
drawRoof(x, y, size);
drawWindow(x - size / 4, y - size / 2, size / 4);
drawWindow(x + size / 4, y - size / 2, size / 4);
}

and now one line of yours draws four shapes:

drawHouse(200, 330, 160);

Three houses is three lines. drawHouse knows how a house is put together; everyFrame only says where the houses go. That split is the whole idea of this topic.

Look at what the inner calls hand over. They are not plain numbers — they are worked out from the inputs drawHouse was given. A window at x - size / 4 sits a quarter of the way left of whatever x the house was told, and it is size / 4 across, so it moves and grows with its house. Write a plain number there instead and that window stays in one place and one size no matter which house it belongs to.

The calls still run top to bottom, and now that matters more than it did. Whatever is painted first can be painted over. Call drawWindow before drawWall and the wall covers the window completely — the window is still drawn, it is just underneath. A whole scene works the same way: the sky goes first, then the ground, then the things standing on it.

Some functions need nothing at all in their brackets. drawGround always draws the same grass, so there is nothing to tell it, and the brackets stay empty in both the definition and the call.

A function does not belong to whoever called it first. drawWindow can be called by drawHouse and by drawShop, and the colour of every window in the picture is written down in exactly one place. Change that one line and they all change.

Calls can go deeper than one level. drawStreet calls drawHouse three times, and each of those calls four more, so a single line in everyFrame ends up drawing twelve shapes. The number you hand drawStreet reaches all the way down to the windows.

Everything here is drawn once and then sits still. Next topic the numbers in the brackets start changing every frame, and the whole scene comes alive.