A bar from down to up

Challenge 10 of 16

Keep both places and you can draw the stretch between them, which is what dragging a selection looks like. The bar starts at the press and reaches as far as the release.

Complete the width and the release line.

Your code JavaScript

Complete the width and the release line.

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 Press and Let Go

A click is not one thing. Watch your own hand: the button goes down, and some time later it comes back up. Those are two separate moments, and there is a handler for each.

function whenMousePressed(){
}

function whenMouseReleased(){
}

whenMousePressed runs the instant the button goes down. whenMouseReleased runs the instant it comes back up. Nothing at all happens in between — no handler runs while you are holding.

But something is still true in between, and that is different from something happening:

mouseIsPressed

That is true for every frame the button is down and false for every frame it is up. It is a stretch, not a moment, so you ask about it in everyFrame:

if (mouseIsPressed == true) {
howBig = howBig + 8;
}

Hold the button and the ball grows for as long as you hold. Let go and it stops where it is. A handler could not do that, because a handler runs once and this has to happen on every frame.

The readout at the bottom of these pictures shows mouseIsPressed, so you can watch it flip on and off as the markers on the scrub bar go past.

Now the third handler, the one you already know:

function whenMouseClicked(){
}

A click means the button went down and came back up in the same place. So all three run, one after another, in this order: pressed, released, clicked. If all three change the same variable, the one that runs last is the one you see.

And the useful half of that: if the button goes down in one place and comes up somewhere else, that is a drag, not a click. whenMousePressed runs. whenMouseReleased runs. whenMouseClicked does not.

Both moments have a place, just as a click does. mouseX inside whenMousePressed is where the button went down; mouseX inside whenMouseReleased is where it came up. Keep both and you can draw the whole gesture — which is exactly how dragging a selection box works.

The last challenge here is a keyboard one. A key going down is the same shape of idea as a button going down, and the whole of the next topic is about it.