Digamos que queremos contar la historia de Winston como un libro ilustrado de cuentos, y que el usuario haga clic para leer la siguiente parte de la historia. Empezaremos con una escena principal que solo tiene un título:
background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("La Historia de Winston", 10, height/2);
Ahora bien, queremos que el usuario pueda dar clic para ver la primera parte de la historia, el épico nacimiento de Winston. Para hacer eso, podemos definir una función mouseClicked que será llamada cuando el usuario haga clic con el ratón, y podemos poner ahí el código que dibuje nuestra segunda escena. Observa que tenemos que llamar a la función background() antes de dibujar la segunda escena, o de lo contrario veremos ambas escenas, una encima de la otra:
mouseClicked = function() {
    // Escena 2
    background(173, 239, 255);
    fill(7, 14, 145);
    text("¡Nace el pequeño Winston!", 10, 100);
    image(getImage("creatures/BabyWinston"), width/2, height/2);
};
Inténtalo a continuación: edita el código para la segunda escena y date cuenta que es molesto editarlo, porque tienes que hacer clic cada vez que quieres ver cómo se ve tu segunda escena.
Primero resolvamos ese problema. Sí, tú y yo podemos sobrevivir a las cosas molestas, pero queremos ser programadores más productivos, y ¿no seremos más productivos si podemos editar la escena 2 y ver los resultados en tiempo real? En este caso, una cosa fácil de hacer es incluir todo el código de la escena 2 dentro de una función, llamar a esa función desde mouseClicked y luego llamar esa función cuando estemos depurando.
var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    text("¡Nace el pequeño Winston!", 10, 100);
    image(getImage("creatures/BabyWinston"), width/2, height/2);
};

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

// Escena 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("La historia de Winston", 10, height/2);

drawScene2();
Si ya hemos convertido la escena 2 en una función, también podemos convertir la escena 1 en una función; basta juntar todo ese código y llamarlo. Ahora prueba esto a continuación, y ve qué tan fácil es poner como comentario la llamada a la función drawScene2() cuando quieras editar el código y verlo inmediatamente.
Genial, así que ya tenemos una escena principal y una segunda escena. ¿Qué pasa si queremos mostrar una tercera escena? ¿O volver a la primera escena al hacer clic en la tercera? Tenemos que cambiar la lógica dentro de mouseClicked de manera que se elija condicionalmente cuál de las escenas mostrar, en lugar de llamar siempre a la escena 2. Eso significa que necesitamos una instrucción if que revisará algún tipo de condición. Primero pensemos en términos de pseudocódigo:
// Cuando el usuario haga clic con el ratón:
    // si la escena actual es la primera, pasa a la segunda
    // si la escena actual es la segunda, pasa a la tercera
    // si la escena actual es la tercera, regresa a la primera
Parece que necesitamos llevar un seguimiento de la "escena actual", y tendría más sentido llevarlo con un número. Vamos a declarar una variable global currentScene para la escena actual, y a revisar su valor dentro de mouseClicked.
var currentScene;

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene1();
    }
};
Las condiciones se parecen a nuestro pseudocódigo, pero hay un problema: nunca asignamos el valor de currentScene, así que esas condiciones nunca serán verdaderas. Podríamos asignarlo dentro de las condiciones del if, pero probablemente sea mejor asignarlo dentro de las funciones que dibujan las escenas, para que la variable esté definida correctamente sin importar donde llamemos las funciones que dibujan escenas.
var drawScene1 = function() {
    currentScene = 1;
    ...
};

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

var drawScene3 = function() {
    currentScene = 3;
    ...
};
Hemos reunido todo en el siguiente programa. Haz clic y observa cómo hace ciclos hasta el inicio de la historia. Intenta agregar una escena cuatro (¿Winston conoce a Fulanos? ¿Winston conoce a Winstonia y se muda a Winstonsin?), y haz un derivado:
Cargando