If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

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);
};
Try it out in the program below - click to see the scene change, and little Winston get born!
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. Here's what I mean:
var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

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

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

drawScene2();
As long as we've made scene 2 into a function, we may as well make scene 1 into a function as well, just wrapping all that code up and calling it.
var drawScene1 = function() {
    background(235, 247, 255);
    fill(0, 85, 255);
    textSize(25);
    text("The Story of Winston", 10, 200);
};
Now, try out the program below. This time, if you want to make edits to scene 2, you can simply uncomment the drawScene2() call and see your edits rendered 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 inside mouseClicked so that it conditionally chooses which of the scenes to show, instead of always calling scene 2. That means we need an if statement that will check some sort of condition. Let's think about this in terms of pseudo-code first:
// When the user clicks the mouse:
    // if the current scene is #1, go to #2
    // if the current scene is #2, go to #3
    // if the current scene is #3, go back to #1
It looks like we need to keep track of the "current scene", and it'd 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 pseudo-code, but there's one problem: we never actually set currentScene 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 themself, so that 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;
    ...
};
We've put it all together in the program below. Click through it and see how it cycles 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:

Want to join the conversation?

  • duskpin ultimate style avatar for user Joseph
    I need help with what needs to go into:

    mouseClicked = function() {

    }

    in the "Story Teller" Challenge
    (70 votes)
    Default Khan Academy avatar avatar for user
    • leaf green style avatar for user Lucie le Blanc
      Using the mouseClicked function is basically saying: Every time I click the mouse, do this. So what do you need to do when you click the mouse? You have a variable that represents the scene number, right? When you click, you want the scene to advance, meaning you want the scene number to increase by 1, right? Use the scene variable in some way. It's probably simpler than you think!

      I hope this helps!
      (69 votes)
  • leafers ultimate style avatar for user I ProgramYouNot
    I feel stupid for asking this, but I still don't get how these scenes work, I tried to understand them through reading the code, but it is still just a blur to me. Can anyone else give me a more clear understanding of how this works?
    (32 votes)
    Default Khan Academy avatar avatar for user
    • leaf blue style avatar for user Kruxe
      "There are no stupid questions, there are only stupid answers."

      Scenes work like so:

      // create a variable to control the scene
      var scene = 0;

      Next we use if statements to draw different scenes for each value of scene:

      if (scene === 0) {
      drawScene1();
      }
      else if (scene === 1) {
      drawScene2();
      }

      Hope you find this helpful! If you have any further questions, feel free to ask me and I'll try my best to help you figure it out. ;)
      (45 votes)
  • hopper cool style avatar for user Damian S.
    "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."
    Whoever made this article probably intended to say "uncomment".
    (13 votes)
    Default Khan Academy avatar avatar for user
  • starky ultimate style avatar for user Nagini🐍Snaketail (INACTIVE)
    Can variables always be used without values, as in
    var currentScene; (not var currentScene = 1;)?
    Also, can they used without the var as in
    currentScene = 1; or draw = funtion(){};?
    (7 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Giao Nguyen
    fill(0, 0, 0);
    textSize(20);
    textAlign(CENTER);

    //images of Leafers
    var seed= getImage("avatars/leafers-seed");
    var seedling= getImage("avatars/leafers-seedling");
    var sapling= getImage("avatars/leafers-sapling");
    var tree= getImage("avatars/leafers-tree");
    var ultimate = getImage("avatars/leafers-ultimate");

    var currentScene;

    var drawScene1 =function(){
    currentScene = 1;
    background(200, 175, 175);
    image(seed, 50,200);
    text("Leafers started out as a seed",200,50);
    };

    var drawScene5 =function(){
    currentScene = 5;
    background(150, 150, 175);
    image(ultimate, 200,200);
    text("In the end, Leafers became Ultimate Leafers",200,50);
    };

    drawScene1();
    var drawScene2 = function() {
    currentScene = 2;
    background(36, 191, 212);
    image(seedling,130,120);
    text("Time flies.........",200,50);

    };

    drawScene2();
    var drawScene3 = function() {
    currentScene = 3;
    background(15, 189, 55);
    image(sapling,120,150,150,100);
    text("It's getting bigger",200,50);
    };

    var drawScene4 = function() {
    currentScene = 4;
    background(240, 65, 22);
    image(tree,100,95,300,300);
    text("It's the size of a building!",100,80,200,200);
    };

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

    };
    I've done this,but my logic is all mixed up and not all of my scenes are showing.Please help!
    (4 votes)
    Default Khan Academy avatar avatar for user
    • leaf yellow style avatar for user ༺ℛ𝒶𝒸𝒽ℯ𝓁༻ [inactive]
      I know this is SO late, but still, there's a problem with this part of your code.
      mouseClicked=function(){
      if (currentScene ===1) {drawScene5(); }
      else if (currentScene ===3){drawScene4(); }
      else if (currentScene ===2){drawScene3(); }
      else if (currentScene ===4){drawScene2(); }
      else if (currentScene ===5){drawScene1(); }

      };
      The logic is all messed up.The order in which the scene is displayed is mixed up,too.
      Here, I rewrote it.
      mouseClicked=function(){
      if (currentScene ===1) {drawScene2(); }
      else if (currentScene ===2){drawScene3(); }
      else if (currentScene ===3){drawScene4(); }
      else if (currentScene ===4){drawScene5(); }
      else if (currentScene ===5){drawScene1(); }

      };
      This should work now.
      (6 votes)
  • male robot donald style avatar for user smileydude
    In the sixth paragraph, what did they mean when they said pseudo code?
    (1 vote)
    Default Khan Academy avatar avatar for user
    • aqualine ultimate style avatar for user Hannah
      Pseudo code is what you want to do. So if I wanted my program to draw a rectangle mocking across the screen, before I write the real code, I might write pseudo code. Like this:

      //draw a red rectangle

      //animate it across the screen

      //when the x is more than 400, loop it back to the beginning


      This way, I know what I need to do next. Hope this helps :)
      (11 votes)
  • primosaur sapling style avatar for user Ebenezer Adjei-Sah
    Hello guys, I really need a coach.How do I get one?
    (5 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user hardek.barry
    Is there an offline javascript editor/IDE, which has similar functionality to the Khan JS environment (including the right-side program output pane for visual feedback) that someone can recommend? I'd like to test some programming ideas outside of Khan Academy, and really don't know where to start.
    (6 votes)
    Default Khan Academy avatar avatar for user
  • duskpin tree style avatar for user AJWilliams2713
    What's the difference between MouseClicked() and mouseIsClicked? Why not just always use mouseIsClciked?
    (4 votes)
    Default Khan Academy avatar avatar for user
    • old spice man green style avatar for user Bob Lyon
      mouseIsClicked is a variable that always has a boolean value. The variable is an invention of Khan Academy. mouseClicked is a variable that you are invited to assign a function to. If you do then that function will be invoked each time (any time) that the user clicks a mouse button. mouseClicked is an invention of Processing.js.
      (6 votes)
  • blobby blue style avatar for user lily.nakaseko
    I don't know what the part about drawScene means. Can someone help me?
    (4 votes)
    Default Khan Academy avatar avatar for user
    • spunky sam orange style avatar for user Ash550
      Hi Lily,
      If I understand your question correctly, you're asking about what drawScene does in general?
      If so, than I might be able to answer that:
      In this code, they made multiple drawScene variables. Each drawScene had a number after it that will draw that scene, for example: drawScene2 will draw the second scene.
      (4 votes)