Three parts, three names

Challenge 7 of 12

Three names, one seascape, and everyFrame has turned into a summary of the scene. The sea is already running, and the two comments say which name goes where.

Write the two lines that run the sun and the boat.

Your code JavaScript

Write the two lines that run the sun and the boat.

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 Your First Function

You have been using functions since your very first sketch. circle(200, 200, 60) is a function — somebody wrote the lines that turn three numbers into a circle, gave them a name, and now you say the name instead of doing the work. everyFrame is one too.

This topic is where you write your own. It takes two parts, and they are easy to mix up.

The definition says what the name means. It goes at the top level of your sketch, outside everyFrame, and on its own it draws nothing at all:

function drawTree() {
shapeColour(BROWN);
rectangle(190, 250, 20, 80);
shapeColour(GREEN);
circle(200, 200, 130);
}

The call is the name with brackets after it, and that is what makes those lines run:

drawTree();

A definition with no call is the most common thing to get wrong, and it is completely silent — no error, no shape, just an empty picture. If something has vanished, look for the call first.

The two names have to match letter for letter. When they do not, the sketch stops and the Results panel tells you the name it could not find: drawHous is not defined. That is a helpful message rather than a telling-off, because it names the exact thing to fix.

Once you have a few names, everyFrame stops being a wall of numbers and starts reading like a list of what is in the picture:

function everyFrame(){
backgroundColour(CYAN);
drawSea();
drawSun();
drawBoat();
}

Those calls run top to bottom, just as your drawing lines always have, so the sea is painted before the boat that floats on it. It makes no difference what order the definitions sit in further up the file — only the order of the calls.

One thing to watch: a function is not a sealed box. If it sets shapeColour inside itself, the pen is still that colour after the call has finished. And if it sets no colour at all, it draws with whatever pen you were holding when you called it.

There is one thing this topic cannot do. Every call to drawTree() draws in exactly the same place, because nothing in drawTree() or in the call says where. Saying it twice gets you one tree. The next topic fixes that, and it is where writing your own functions starts to pay.