Two functions, one input each

Challenge 12 of 16

Two functions, each with its own input, and everyFrame places four things with four numbers. A cloud and a tree need nothing from each other — each one just needs to know how far across it goes.

Set the four numbers to match the target.

Your code JavaScript

Set the four numbers to match 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 Use It Again

Last topic ended on a problem. drawTree() drew a tree, but every call drew it in the same place, because nothing anywhere said where it should go. Saying it twice got you one tree.

The fix is a name in the definition's brackets:

function drawTree(x) {
shapeColour(BROWN);
rectangle(x - 10, 250, 20, 80);
shapeColour(GREEN);
circle(x, 200, 110);
}

That name — x here, though you can call it anything — is an empty box. It has no value of its own. The call fills it in:

drawTree(100);
drawTree(300);

The first call puts 100 into x and runs the body, so a tree is drawn at 100. The second puts 300 in and runs the same body again, so a tree is drawn at 300. One function, two trees, and the drawing lines written once.

The name is called an input, and the number a call hands over is called an argument.

Three things follow from that, and each one is worth watching for.

Everything in the body that should move has to mention the input. The trunk is written x - 10, not 190, or it stays where it is written while the leaves move off without it.

The names have to match. The body can only use the name the brackets introduce; use a different one and the sketch stops with that name is not defined.

The brackets have to be filled. A call that leaves them empty gives the input no value, and every shape that depends on it is drawn nowhere at all — with no error to tell you. If a shape has vanished, check what the call handed over.

An input does not have to be a position. It is just a number, so it can be a size instead, and one input can feed several parts of one drawing at once. The argument does not have to be typed out either: a variable works, a sum works, and width / 2 is the middle of the canvas whatever the canvas happens to be.

There is still something these functions cannot do. One input can only say one thing, so a row of trees is a row — everything ends up at the same height. The next topic adds a second input, and then you can put a drawing anywhere at all.