Mettons que nous voulons raconter l'histoire de Winston à la façon d'un conte illustré, l'utilisateur devant cliquer pour lire la section suivante. Nous allons commencer avec une scène principale contenant juste un titre :
background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("L'histoire de Winston", 10, height/2);
Maintenant, nous voulons que l'utilisateur puisse cliquer pour voir la première partie de l'histoire : la naissance épique de Winston. Pour faire cela, nous pouvons définir une fonction mouseClicked, appelée quand l'utilisateur clique avec la souris, et y placer le code qui dessine la seconde scène. Remarquez que nous devons utiliser background(), avant de dessiner la seconde scène, afin de ne pas voir les deux scènes se superposer :
mouseClicked = function() {
   // Scene 2
   background(173, 239, 255);
   fill(7, 14, 145);
   text("Bébé Winston est né !", 10, 100);
   image(getImage("creatures/BabyWinston"), width/2, height/2);
};
Essayez de l'utiliser ci-dessous. Modifiez le code de la seconde scène et remarquez à quel point il peut être fastidieux de faire des modifications, car vous devez cliquer à chaque fois pour voir à quoi cela ressemble.
Résolvons ce problème en premier. Oui, vous et moi pourrions nous arranger de ces petits désagréments, mais nous voulons aussi être des programmeurs productifs, et ne le serions-nous pas si nous pouvions modifier la scène 2 et voir le résultat en temps réel ? Dans cette situation, un moyen simple de procéder est d'intégrer tout le code de la scène 2 à l'intérieur d'une fonction, appeler cette fonction à partir de mouseClicked, puis appeler aussi cette fonction lors de la phase de débogage.
var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    text("Petit Winston est né !", 10, 100);
    image(getImage("creatures/BabyWinston"), width/2, height/2);
};

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

// Scène 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("L'histoire de Winston", 10, height/2);

drawScene2();
Étant donné que nous construisons la scène 2 dans une fonction, autant construire aussi la scène 1 dans une fonction, en enveloppant le code, puis en l'appelant. Essayez d'utiliser le programme ci-dessous, et remarquez à quel point il est facile de décommenter l'appel à drawScene2() quand on veut faire une modification et voir le résultat immédiatement.
Super, on possède donc une scène principale et une deuxième scène. Et si on veut afficher une troisième scène ? Ou retourner à la première scène dès qu'on clique sur la troisième ? Il nous faut modifier le déroulement logique à l'intérieur de mouseClicked pour que la scène à afficher y soit choisie conditionnellement , et non pas toujours afficher la scène 2. Cela veut dire que nous devons utiliser une instruction conditionnelle qui devra effectuer un test. Réfléchissons-y en terme de pseudo-code dans un premier temps.
// Quand l'utilisateur clique sur la souris :
    // si la scène actuelle est la première, aller sur la seconde
    // si la scène actuelle est la deuxième, aller sur la troisième
    // si la scène actuelle est la troisième, retourner à la première
Il semble que nous ayons besoin de conserver en mémoire la "scène actuelle" et le plus sensé est de le faire sous forme de valeur chiffrée. Déclarons une variable globale currentScene et testons-la à l'intérieur de mouseClicked.
var currentScene;

mouseClicked = function() {
   if (currentScene === 1) {
      drawScene2();
   } else if (currentScene === 2) {
      drawScene3();
   } else if (currentScene === 3) {
      drawScene1();
   }
};
Les conditions ressemblent à notre pseudo-code mais il y a un soucis : nous ne définissons currentScene nulle part. Ces conditions ne seront donc jamais vérifiées. Nous pourrions la définir à l'intérieur de l'instruction if mais cela serait probablement mieux de le faire à l'intérieur des fonctions de dessin des scènes elles-mêmes (drawScene1, drawScene2 et drawScene3). De cette façon, la variable est définie correctement, peu importe à quel endroit on fait un appel à une fonction de dessin de scène.
var drawScene1 = function() {
    currentScene = 1;
    ...
};

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

var drawScene3 = function() {
    currentScene = 3;
    ...
};
Nous avons tout regroupé dans le programme ci-dessous. Cliquez et regardez comment il circule à partir du début de l'histoire. Essayez d'ajouter une quatrième scène (Winston qui rencontre Oh Noes ? Winston qui rencontre Winstonia et va s'installer avec elle à Winstonsin ?) et dérivez le projet :
Chargement