Moving and clicking

Challenge 15 of 16

Both handlers can live in one sketch and they run at different moments. The ring follows the pointer the whole time, and the cross stays where the last click put it.

Set the click handler's two lines.

Your code JavaScript

Set the click handler's two lines.

Console print() output

0 / 48 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 Following the Mouse

A click is a moment. The mouse is somewhere all the time.

That is the whole of this topic. mouseX and mouseY are not only readable inside a click handler — they can be read anywhere, and read from inside everyFrame they mean where the pointer is right now:

function everyFrame(){
circle(mouseX, mouseY, 70);
}

No handler, no click, and the shape follows the pointer around the canvas. Move your mouse over the picture and watch.

There is also a handler for movement:

function whenMouseMoved(){
x = mouseX;
y = mouseY;
}

whenMouseMoved runs every time the pointer moves, whether a button is down or not. It can end up drawing the same picture as reading mouseX every frame — the difference is when the line runs, not what it draws. Reading every frame keeps working even when the mouse is perfectly still; the handler only runs when something actually moved.

Two more values arrive here:

lastMouseX is where the pointer was one move ago
lastMouseY is the same for down

They let you talk about movement rather than position. A ghost drawn at lastMouseX lags behind the real one. A line from lastMouseX, lastMouseY to mouseX, mouseY shows the hop the mouse just made. And distance(mouseX, mouseY, lastMouseX, lastMouseY) is how far that hop was, which is a number you can make a shape out of.

One thing to watch with that last one. If the mouse is not moving, the distance is 0, and a shape with a size of 0 is nothing at all. Add a base to it:

circle(200, 180, 30 + distance(mouseX, mouseY, lastMouseX, lastMouseY));

Following does not have to be exact. This line moves a fifth of the way towards the pointer each frame, and the result glides rather than jumps:

x = x + (mouseX - x) / 5;

Divide by a bigger number and it gets lazier. Two shapes with different numbers spread out when the mouse moves and gather again when it stops.

The last challenge is about the button rather than the pointer. mouseIsPressed is true while it is held down and false the rest of the time, so a question about it can turn the following on and off. Taking the button apart — the moment it goes down, the moment it comes up, and the whole click — is the next topic.