Sagen wir, dass wir die Geschichte von Winston in einem illustrierten Buch darstellen wollen, bei dem der Nutzer klicken muss, um den nächsten Teil der Geschichte zu lesen. Wir fangen mit der Hauptszene an, die nur einen Titel zeigt:
background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("The Story of Winston", 10, height/2);
Nun wollen wir es dem Nutzer ermöglichen, den nächsten Teil der Geschichte aufzurufen: Winstons dramatische Geburt. Dazu können wir eine Funktion mouseClicked definieren, die immer dann aufgerufen wird, wenn der Nutzer mit der Maus klickt, und wir können dort Code zum Zeichnen unserer zweiten Szene einfügen. Achte darauf, dass wir vor dem Zeichnen der zweiten Szene background() aufrufen müssen. Ansonsten liegen beide Szenen direkt übereinander:
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);
};
Versuche, den untenstehenden Code für die zweite Szene zu ändern. Du wirst sehen, dass er anstrengend zu ändern ist, da du jedes Mal klicken musst, wenn du deine zweite Szene anschauen möchtest.
Wir lösen dieses Problem zuerst. Wir beiden könne diese Umstände vielleicht ganz gut ignorieren, aber wir wollen auch effiziente Programmierer werden. Und wäre es nicht effizienter, wenn wir die zweite Szene ändern und die Ergebnisse direkt in Echtzeit sehen könnten? Dafür wäre es eine einfache Lösung, den gesamten Code der zweiten Szene in eine Funktion zu packen, diese Funktion durch mouseClicked aufrufbar zu machen und die Funktion dann aufzurufen, wenn wir debuggen.
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();
Wenn wir aus der zweiten Szene eine Funktion gemacht haben, können wir auch aus der ersten Szene eine Funktion machen. Packe einfach den gesamten Code in eine Funktion und rufe ihn auf. Probiere jetzt den folgenden Code aus, und du wirst feststellen, wie einfach der Aufruf drawScene2() auszukommentieren ist, wenn du diesen Code bearbeiten und direkt überprüfen möchtest.
Sehr gut, jetzt haben wir eine Hauptszene und eine zweite Szene. Was machen wir, wenn wir eine dritte Szene anzeigen wollen? Oder zurück zur ersten Szene gehen wollen, wenn wir auf die dritte klicken? Dafür müssen wir die Logik von mouseClicked so ändern, dass eine bedingte Auswahl für die angezeigten Szenen getroffen wird, anstatt immer die zweite Szene aufzurufen. Dies bedeutet, dass wir eine if-Anweisung benötigen, in der eine bestimmte Bedingung geprüft wird. Wir können dafür zunächst Pseudocode verwenden:
// Wenn der Nutzer einen Mausklick ausführt:
    // wenn die aktuelle Szene die erste ist, geh zur zweiten
    // wenn die aktuelle Szene die zweite ist, geh zur dritten
    // wenn die aktuelle Szene die dritte ist, geh zurück zur ersten
Es scheint so, als müssten wir die aktuelle Szene als "current scene" aufzeichnen, was in Form einer Zahl am meisten Sinn ergibt. Wir deklarieren eine globale Variable currentScene und überprüfen sie innerhalb von mouseClicked.
var currentScene;

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene1();
    }
};
Die Bedingungen sehen wie unser Pseudocode aus, es gibt jedoch ein Problem: Wir haben für currentScene bisher keinen Wert gesetzt, weshalb diese Bedingung niemals wahr sein wird. Wir könnten ihn innerhalb der if-Bedingungen festlegen, allerdings ist es wahrscheinlich günstiger, dies direkt innerhalb der Funktion "drawScene" zu machen. So ist die Variable richtig gesetzt, egal woher die Szenenzeichenfunktion aufgerufen wird.
var drawScene1 = function() {
    currentScene = 1;
    ...
};

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

var drawScene3 = function() {
    currentScene = 3;
    ...
};
Im untenstehenden Programm ist alles zusammengefügt. Klicke dich einfach durch und schau dir an, wie die Szenen bis zum Anfang der Geschichte durchwechseln. Versuche, eine vierte Szene hinzuzufügen (Winston trifft Oh Noes? Winston trifft Winstonia und zieht nach Winstonsin?), und lass die neue Programmversion laufen: