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 #1It 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?
I need help with what needs to go into:
mouseClicked = function() {
}
in the "Story Teller" Challenge(76 votes)
Using themouseClickedfunction 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!(76 votes)
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)
"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 useifstatements to draw different scenes for each value ofscene: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. ;)(50 votes)
"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".(14 votes)
Can variables always be used without values, as invar currentScene;(notvar currentScene = 1;)?
Also, can they used without thevaras incurrentScene = 1;ordraw = funtion(){};?(7 votes)- A variable must be declared using the keyword
varbefore it can be used.
You should also initialize the variable to a value before you try to use it.(8 votes)
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!(5 votes)![leaf yellow style avatar for user ༺ℛ𝒶𝒸𝒽ℯ𝓁༻ [inactive]](https://cdn.kastatic.org/images/avatars/svg/leaf-yellow.svg)
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.(8 votes)
- 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.(8 votes)
I use jsFiddle.net . You have to push a "Run" button in order to execute what you have written. Therefore, there is no Yoko Oh Noes, for better or worse. E.g. https://jsfiddle.net/blyon/1v2ydr0e/(3 votes)
In the sixth paragraph, what did they mean when they said pseudo code?(2 votes)
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 :)(13 votes)
Hello guys, I really need a coach.How do I get one?(6 votes)- I mean someone who can assist or help me through out my project(3 votes)
What's the difference between MouseClicked() and mouseIsClicked? Why not just always use mouseIsClciked?(4 votes)mouseIsClickedis a variable that always has a boolean value. The variable is an invention of Khan Academy.mouseClickedis 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.mouseClickedis an invention of Processing.js.(7 votes)
I don't know what the part about drawScene means. Can someone help me?(4 votes)
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)