A face that follows

Challenge 14 of 16

A whole picture can hang off the pointer if every part is measured from it. The head sits on the pointer and the eyes a little up and to each side. Once it works, wave your mouse about and the whole face follows.

Set how far up the eyes go.

Your code JavaScript

Set how far up the eyes go.

Console print() output

0 / 60 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Follow the Mouse

Topic 1's numbers all came from the clock. These two come from you.

mouseX is how far across the pointer is, mouseY how far down — the same pair of numbers any shape takes for its position. So circle(mouseX, mouseY, 40); draws a circle wherever the pointer is, and that is a finished animation: no variable, no sum, nothing to set up.

They are values you read, never ones you set. You can take the number out of mouseX and use it, but you cannot put a number into it — the mouse decides, not your code.

Everything Course 2 and Topic 1 taught about sums works on them. mouseX + 80 is a fixed distance to the right of the pointer. 400 - mouseX is its mirror image, because the canvas is 400 across. And mouseX / 2 need not be a position at all — feed it to a size and the shape swells as you move right.

These challenges open in Try mode, and that is worth knowing about. Try mode means the picture is already live: the pointer is yours, so move it about and watch what happens. Nothing is being marked while you do, and changing the code updates the picture straight away — you never have to switch anything on.

Pressing Run is different. Then the pointer follows a path that was recorded for you, the same one every time, so your sketch and the target can be compared fairly — the dots on the playbar mark where it moves along that path.

So: play in Try mode until you understand what the challenge is asking, then press Run to be marked.