Two buttons — visuco

Challenge 8 of 16

Two boxes and two tests, and the marker slides one way or the other depending on which one was hit. This is a whole control panel in a dozen lines.

Set how far each button carries the marker, across and down.

Your code JavaScript

Set how far each button carries the marker, across and down.

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 Clicking on Things

Every click so far has counted, wherever it landed. This topic asks a harder question: did the click land on that particular thing.

For anything round, distance answers it:

if (distance(mouseX, mouseY, 200, 180) < 70) {
ballColour = YELLOW;
}

distance measures between two points — here, from the click to the middle of the ball. If it is less than the ball's radius, the click was inside.

Watch the number you compare against. A circle is drawn with its width:

circle(200, 180, 140);

so the distance from the middle to the edge is half of that, 70. Comparing against 140 makes a ball that lights up when you click a whole radius outside it, which looks like a bug and is really arithmetic. When the size is in a variable, write it out:

if (distance(mouseX, mouseY, 200, 180) < howBig / 2) {

A box is a different question, because a box is not round. Being inside it means four things are all true at once, and && joins them:

if (mouseX > 100 && mouseX < 300 && mouseY > 120 && mouseY < 260) {

Right of the left edge, left of the right edge, below the top, above the bottom. Use the same numbers the rectangle is drawn with and the test cannot drift away from the picture.

That is a button. Everything a button does, it does with those four comparisons.

Now the thing all of this was for. Dragging is three moments and one variable:

function whenMousePressed(){
if (distance(mouseX, mouseY, x, y) < 50) {
held = 1;
}
}

function whenMouseDragged(){
if (held == 1) {
x = mouseX;
y = mouseY;
}
}

function whenMouseReleased(){
held = 0;
}

The press asks whether you grabbed it. The drag follows the pointer, but only if you did. The release lets go. Take the held question out of the middle one and dragging anywhere on the canvas teleports the ball, which is worth trying once to see.

Some of the clicks scripted into these challenges are aimed to miss on purpose. The label on the scrub bar says so when one fires, and a hit test that is too generous will light up when it should not.