Simple scene changes

Let’s say we want to tell the story of Winston as an illustrated story book, with the user clicking to read the next part 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(25);
text("The Story of Winston", 10, 200);

Now, we want it so the user can click to see the first 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 the 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);
    textSize(25);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

Now I want you to try editing the code for the second scene, like changing the text or the image placement. Do you notice that every time you want to see the results of your edited code, you have to click to see the second scene?Personally, I find that annoying, as it means it takes so long to edit scene 2 to be exactly how I like it.

Imagine if we had 10 scenes and wanted to edit scene 10 – we’d have to click 10 times for each edit. Yeesh!So let’s solve that problem. Yes, you and I can survive with annoyingness, but we all want to be more productive programmers, and won’t we be more productive if we can see the results of our coding in real time? In this case, an easy thing to do is to wrap all of the scene 2 code inside a function, call that function from mouseClicked, and then call that function when we’re debugging.