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

Course: Computer programming - JavaScript and the web > Unit 4

Lesson 2: Scene management
Computing
Computer programming - JavaScript and the web
Advanced JS: Games & Visualizations
Scene management
© 2024 Khan AcademyTerms of usePrivacy PolicyCookie Notice

Animated scenes

Google Classroom
We've seen how to make multiple simple scenes - but our scenes were what we call "static" - they weren't animated, nor did they have any response to user interaction. As we'll see, it requires a bit more finesse to handle fancier scenes. But hey, let's get fancy!
Let's talk about animation first. What if we wanted to show Winston in his rock star phase, drumming hard to the beat? We'd normally do that by defining the draw function to contain code that draws shapes that move position slightly each frame. Here's an example, where the position of the drumming hands is based on the current millis() value, the number of ellapsed milliseconds:
What if we add that as scene 4 to our previous example? We'll move the code into a drawScene4() function, and modify our mouseClicked logic.
var drawScene4 = function() {
    currentScene = 4;
    background(194, 255, 222);

    var x = cos(millis()*1); 
    var y = cos(millis()+98);

    ...
 };

 mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    } else if (currentScene === 4) {
        drawScene1();
    }
};
Try it out below - click through a few times:
Notice something? It worked, but only kind of. We could see Winston with his drum set, but his drum sticks weren't moving. How sad! It's hard to make music when you're frozen in time. Perhaps you've already caught onto the issue: we're no longer calling the drumsticks-drawing code from within draw(), so it's only getting called once--not repeatedly--and thus only rendering the sticks at the moment in time at which it's first called. Perhaps you've also already guessed the solution: define a draw() function, and call drawScene4() when appropriate.
draw = function() {
    if (currentScene === 4) {
        drawScene4();
    }
};
Let's just think through that for a bit: whenever we define a draw() function in our code, it will then get called repeatedly (defaulting to 60 FPS), and whenever it's called, when the current scene has already been set to 4, then it'll call the function to draw scene 4. When it's any other value, it won't attempt to draw anything at all-- keeping whatever was already on the screen. We still need to do the initial scene drawing in mouseClicked, this logic just takes care of animating every frame after.
Some of you might be thinking: why don't we just have logic that calls every scene drawing function inside draw()? Well, you certainly could, and that'd mean that if you added animation to the other scenes, then they would just work immediately. But assuming you don't animate your other scenes, that means you're making the computer re-draw those scenes repeatedly for no reason. From a performance perspective, that's not good. If we know we can easily save the computer unnecessary work, we should. It will make our programs faster and users happier.
Alright, now that we've discussed all that, here's the story in its clickable, animated glory. You can almost hear the beats coming out of scene 4!

Want to join the conversation?

Log in