If you're seeing this message, it means we're having trouble loading external resources for Khan Academy.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

We've gotten away so far with just having the user click anywhere at all in order to change scenes. But we've realized there's a drawback to that approach: we can't use clicks within scenes for any sort of additional interaction. The way that many games and apps solve that is by adding specific UI elements, like menus and buttons, and only navigating scenes upon interaction with a specific UI element. Let's add a button in the top right to control the scenes in our program.

What is a "button"? It's two things really: 1) the visual indicator that an area is clickable and 2) the logic that makes that area respond to clicks. Let's start with the visual indicator, a rect() with some text(), and wrap it in a function, in case we want to call it multiple times:

var drawButton = function() {
    fill(81, 166, 31);
    rect(340, 10, 50, 25);
    fill(255, 255, 255);
    textSize(16);
    text("NEXT", 344, 29);
};

Now where should we call it? We definitely need to call it when we draw the first scene, so they have a way of getting to the next scene:

drawScene1();
drawButton();

We also need to display it on every subsequent scene. We could call it from inside every scene drawing function, but there's a simpler way: just stick it at the end of our mouseClicked function, to make sure it's called after we draw every scene:

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    }  else if (currentScene === 4) {
        drawScene5();
    } else if (currentScene === 5) {
        drawScene1();
    }
    drawButton();
};

Okay, I lied, it's not quite that simple. With the above code, we would see the button in every scene except one. Can you figure out which one? I'll give you a few seconds...stop reading this! Are you thinking about it? Okay, okay, it's the animated scene. That's because the code inside draw() will draw scene 4 on top of the button immediately, so we need to add it to the end of that function as well:

draw = function() {
    if (currentScene === 4) {
        drawScene4();
    }
    drawButton();
};

And hey, just in case some enterprising individual decides to drag babies all over the next button, let's call it at the end of mouseDragged as well:

mouseDragged = function() {
    if (currentScene === 5) {
        image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    }
    drawButton();
};

Woo! Now we've got a button in every scene, all the time. Check it out:

But, haha, you know what's hilarious? The button does nothing! I mean, the user might think it does something, if they decide to click only that area. But in fact, they could click anywhere, and it'd do the same thing. We need to change our mouseClicked logic so that we check the button location before we decide it's scene-a-changing time.

Like we did in the button challenges in Intro to JS, we need to come up with an if condition to check mouseX and mouseY. Usually, that means combining four conditions with the && operator, checking that the mouseX is greater than the left side, mouseX is less than the right side, mouseY is greater than the top edge, and mouseY is less than the bottom edge. But, our button is in the upper right corner, and I want to give the user some clicking leeway room anyway, so let's just simplify and only check two conditions - is mouseX greater than the left side, and is mouseY less than the bottom edge?

mouseClicked = function() {
    if (mouseX >= 340 && mouseY <= 45) {
        if (currentScene === 1) {
            drawScene2();
        } else if (currentScene === 2) {
            drawScene3();
        } else if (currentScene === 3) {
            drawScene4();
        }  else if (currentScene === 4) {
            drawScene5();
        } else if (currentScene === 5) {
            drawScene1();
        }
        drawButton();
    }
};

That's it! With that check, we now have a program where the user clicks a particular area of the screen to move to the next scene. Try out clicking the button and non-button parts:

Now that we have a way of knowing when a click is meant for changing scenes, we can use clicks for other interactions in our scenes, as long as they're not clicking on the button. That means we can let the user add the Winston babies on click instead of drag, like we originally wanted. We'll just add an else to our if, and move the code from mouseDragged into that else:

mouseClicked = function() {
    if (mouseX >= 340 && mouseY <= 45) {
        ...
    } else {
        if (currentScene === 5) {
            image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
        }
    }
};

Note that we need to keep the check for current scene, to make sure it only happens for that scene. But now, it's easy for us to add click interaction on any other scene too. What else could you let the user add? Drums? Facial hair? Play around with the program below: