We've seen how to make multiple simple scenes, but our scenes were what we call staticthey 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 elapsed 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) {
    } else if (currentScene === 2) {
    } else if (currentScene === 3) {
    } else if (currentScene === 4) {

Try it out belowclick 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 on to the issue: we're no longer calling the drumsticks-drawing code from within draw(), so it's only getting called oncenot repeatedlyand, 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) {


Let's just think through that for a bit. Whenever we define a draw() function in our code, it will then get called repeatedlydefaulting to 30 FPS. Whenever it's called and 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 allkeeping 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, you would be making the computer redraw 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.

All right, 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!