The mouse and the clock

Challenge 12 of 16

Two kinds of change in one sketch: the white circle is driven by the pointer, the orange one by frameNumber, and neither knows about the other. One waits for you; the other never stops.

Set the clock circle's multiplier.

Your code JavaScript

Set the clock circle's multiplier.

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.