A number that moves the drawing

Challenge 1 of 16

Last topic your scene sat still because nothing changed between frames. Now x grows a little every frame and the call hands the new value over each time, so the fish swims.

Set how far it moves each frame.

Your code JavaScript

Set how far it moves each frame.

Console print() output

0 / 50 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Functions that Move

Everything you have drawn in this course has sat perfectly still. Course 3 taught you why things move: a variable that keeps its value between frames, and a line that changes it.

Put the two together. The function does not change at all:

function drawFish(x, y) {
shapeColour(ORANGE);
oval(x, y, 100, 60);
triangle(x - 48, y, x - 70, y - 26, x - 70, y + 26);
shapeColour(BLACK);
circle(x + 28, y - 10, 12);
}

What changes is the number the call hands over:

var x = 60;

function everyFrame(){
backgroundColour(BLUE);
x = x + 6;
drawFish(x, 200);
}

x is 66 on the first frame, 72 on the next, and the same four lines draw the fish in a new place every time. drawFish has no idea it is part of an animation.

That is worth sitting with, because it is the whole topic. A function is just drawing lines with names for its numbers. Whether those numbers are typed out, worked out, or different on every frame is the caller's business, not the function's.

And it means two movers cost you almost nothing:

var topX = 40;
var lowX = 40;

topX = topX + 3;
lowX = lowX + 8;
drawFish(topX, 120);
drawFish(lowX, 250);

Two variables, two speeds, two fish — one set of drawing lines. Add a third and it is one more variable and one more call.

Three things to watch for. The call has to actually hand the changing number over: write drawFish(200, 200) and x can climb all it likes while the fish stands still. The moving number does not have to be a position — hand a growing number to a size input and the drawing swells instead of travelling. And a speed can be a minus number, which sends the same call the other way.

Every challenge here draws a line at the bottom showing your numbers as they change. Watch it alongside the picture: when something is not moving the way you expect, the numbers usually tell you why before the shapes do.

Notice where the working out in that last challenge happens: out here in everyFrame, not inside drawFish. Next topic a function can do that working out for you and hand the answer back, which is a different job from drawing something.