Let's say we want to tell the story of Winston as an illustrated story book with the user clicking to read the next "page" of the story. We'll start off with a main scene that just has a title:

background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("The Story of Winston", 10, height/2);

Next, we want to allow the user to click to see the next part of the story: Winston's epic birth. To do that, we can define a mouseClicked function that will be called whenever the user clicks the mouse, and we can put in code to draw our second scene there. Note that we have to call background() before drawing the second scene, otherwise we'll see both scenes on top of each other.

mouseClicked = function() {
    // Scene 2
    background(173, 239, 255);
    fill(7, 14, 145);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), width/2, height/2);
};

Try editing the code for the second scene below. Notice that it's annoying to edit because you have to click every time you want to see what your second scene looks like.

Let's solve that problem first. Yes, you and I can survive annoyance, but we want to all be more productive programmers. And won't we be more productive if we can edit scene two and see the results in real-time? In this case, an easy solution is to wrap all of the scene two code inside a function, call that function from mouseClicked, and then call that function when we're debugging.

var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), width/2, height/2);
};

mouseClicked = function() {
    drawScene2();
};

// Scene 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("The Story of Winston", 10, height/2);

drawScene2();

As long as we've made scene two into a function, we may as well make scene one into a function as well. Just wrap all the code up and call it. Now, try this one out below, and see how easy it is to comment out the drawScene2() call when you want to edit that code and see it immediately.

Great, so we have a main scene and a second scene. What if we want to display a third scene? Or go back to the first scene once we click on the third? We need to change the logic of mouseClicked so that it conditionally chooses which of the scenes to show instead of always calling scene two. That means we need an if statement that will check some sort of condition. Let's think about this in terms of pseudocode first:

// When the user clicks the mouse:
    // if the current scene is the first one, go to the second
    // if the current scene is the second one, go to the third
    // if the current scene is the third one, go back to the first

It looks like we need to keep track of the "current scene", and it would make the most sense to store it as a number. Let's declare a global variable currentScene and check it inside mouseClicked.

var currentScene;

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene1();
    }
};

The conditions look like our pseudocode, but there's one problem: we never actually setcurrentScene to a value, so those conditions will never be true. We could set it inside the if conditions, but it's probably better to set it inside the scene drawing functions themselves. That way the variable is set correctly no matter where we call scene drawing functions from.

var drawScene1 = function() {
    currentScene = 1;
    ...
};

var drawScene2 = function() {
    currentScene = 2;
    ...
};

var drawScene3 = function() {
    currentScene = 3;
    ...
};

It's all put together in the program below. Click through and see how the scenes cycle around to the beginning of the story. Try adding a scene four—Winston meeting Oh Noes? Winston meeting Winstonia and moving to Winstonsin?and spin it off!