Two followers — visuco

Challenge 13 of 16

Any number of shapes can read the same pointer, each with its own offset. These three make a short tail behind it — move the mouse over the picture and the whole tail follows.

Set the two gaps so the spacing is even.

Your code JavaScript

Set the two gaps so the spacing is even.

Console print() output

0 / 60 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from 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.