A click that changes the sky

Challenge 11 of 12

What a click changes can be the biggest thing on the canvas. The sky here is a rectangle covering nearly all of it, and the click repaints it while the sun stays where it is.

Set the colour the sky turns.

Your code JavaScript

Set the colour the sky turns.

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 Something Happens

Everything you have written up to now has been inside everyFrame, and everyFrame runs because time passes. It runs again, and again, about twelve times a second, whether anyone is there or not.

This topic is about a different kind of block.

function whenMouseClicked(){
lampColour = YELLOW;
}

That block does not run every frame. It does not run at all until somebody clicks on the picture, and then it runs once, top to bottom, and stops again. Click a second time and it runs a second time.

The name is the whole of it. A block called whenMouseClicked runs when the mouse is clicked, in the same way that a block called everyFrame runs every frame. You do not call it yourself and you never say its name anywhere else.

There is one rule that matters more than any other here, and it is easy to get wrong. Do not draw inside the handler. A shape drawn there is thrown away before anyone sees it. What the handler is for is changing a variable:

var lampColour = GREY;

function whenMouseClicked(){
lampColour = YELLOW;
}

function everyFrame(){
shapeColour(lampColour);
circle(200, 180, 160);
}

The click changes the box. everyFrame reads the box and draws. And because the box keeps its new value, the lamp stays yellow for the rest of the run — the click happened once, but you can see that it happened for as long as you like.

Two things about these pages. The picture is live from the moment it loads, so you can click on it yourself and watch; nothing is marked until you press Run. And along the scrub bar there is a small dot at each frame where a click is scripted to happen, with a label when it fires. Step one frame at a time across that dot and you will see the exact frame the picture changes.

A click also knows where it happened. That is the next topic.