Click on the box

Challenge 11 of 16

The clicks scripted into this one are aimed at the grey box rather than at a spot, so the marker on the scrub bar says which shape is being hit. A click on a shape lands on its middle, which the readout shows.

Set the two lines that move the ring.

Your code JavaScript

Set the two lines that move the ring.

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 Where Did I Click?

A click happens somewhere. The sketch can find out where, because two values are waiting to be read:

mouseX is how far across the click was
mouseY is how far down it was

Both are ordinary numbers, so they can go anywhere a number can go.

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

That is the whole idea. Read them inside the handler, keep them in your own variables, and let everyFrame draw from those variables as it always has.

They are numbers, which means you can do arithmetic on them. All of these are fine:

x = mouseX + 60;
y = mouseY - 90;
x = width - mouseX;
howBig = mouseY;

The last one is worth a second look. mouseY is a number somewhere between 0 and 400, and so is a size, so a click low down can make a big shape and a click high up a small one. Nothing says the click has to move anything.

There is one thing to be careful about, and it catches people. When two lines both run on the same click, the order matters:

oldX = x;
x = mouseX;

Keep the old value first, then take the new one. Write those two the other way round and the old value is gone before you saved it, so both variables end up holding the same number and the two shapes land on top of each other.

The readout along the bottom of every picture in this course shows mouseX and mouseY the whole time, so you can always check a number you have worked out against the one it came from. And the little dot on the scrub bar marks the frame each scripted click happens on — step across it one frame at a time.

In the last challenge there are no clicks at all. That is because mouseX can be read from inside everyFrame too, and there it means something slightly different: where the mouse is right now. Following the mouse without clicking is the next topic.