How far away — visuco

Challenge 11 of 16

distance() measures the gap between two points, and it is a number like any other — so it can be a size. Move your mouse in and out from the middle and watch the circle swell and shrink.

Set the point it measures from: the middle of the window.

Your code JavaScript

Set the point it measures from: the middle of the window.

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.