Vimos cómo hacer varias escenas sencillas (pero nuestras escenas fueron lo que llamamos "estáticas"): no estaban animadas, ni tienen respuesta a la interacción con el usuario. Como veremos, se requiere un poco más de finura para manejar escenas más elegantes. Pero hey, ¡vamos a ponernos elegantes!
Hablemos primero acerca de la animación. ¿Qué pasa si quisiéramos mostrar a Winston en su fase de estrella de rock, tocando fuerte los tambores al llevar el ritmo? Normalmente haríamos eso al definir la función draw para incluir código que dibuje figuras que mueven ligeramente su posición en cada cuadro. Aquí hay un ejemplo, donde la posición de las manos del baterista se basa en el valor actual de millis(), el número de milisegundos que han transcurrido:
¿Qué pasa si agregamos eso como la escena 4 en nuestro ejemplo anterior? Vamos a mover el código dentro de una función drawScene4() y a modificar nuestra lógica de mouseClicked.
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();
    }
};
Pruébalo a continuación. Haz clic algunas veces:
¿Observaste algo? Funcionó, pero no del todo. Pudimos ver a Winston con su batería, pero sus baquetas no se movían. ¡Qué triste! Es difícil hacer música cuando estás congelado en el tiempo. Tal vez ya encontraste el problema: no estamos llamando al código que dibuja las baquetas desde draw(), así que solamente se llama una vez (no repetidamente) y por lo tanto solo dibuja las baquetas en el momento en que se llamó por primera vez. Tal vez también ya hayas adivinado la solución: definir una función draw() y llamar a drawScene4() cuando sea apropiado.
draw = function() {
    if (currentScene === 4) {
        drawScene4();
    }
};
Pensemos en eso un poco: cuando definimos una función draw() en nuestro código, entonces se llamará repetidamente (por omisión 30 FPS), y en cada llamada, cuando la escena actual sea 4, entonces llamará a la función para dibujar la escena 4. Con cualquier otro valor, no intentará dibujar nada en absoluto, dejará lo que ya estaba en la pantalla. Todavía necesitamos hacer el dibujo de la escena inicial en mouseClicked, esta lógica solo se encarga de animar cada cuadro subsecuente.
Algunos pueden pensar ¿por qué no tenemos simplemente una lógica que llama a cada función de dibujo dentro de draw()? Bueno, ciertamente podrías, y eso significaría que si agregaras animación a las otras escenas, entonces funcionarían inmediatamente. Pero suponiendo que no animas tus otras escenas, eso significa que estás haciendo que la computadora redibuje esas escenas repetidamente sin ningún motivo. Desde una perspectiva de desempeño, eso no es bueno. Si sabemos que fácilmente podemos ahorrarle trabajo innecesario a la computadora, deberíamos hacerlo. Eso hará nuestros programas más rápidos y a los usuarios más felices.
Muy bien, ahora que ya discutimos todo eso, he aquí la historia en su gloria animada y clicable. ¡Casi puedes oír el ritmo que sale de la escena 4!
Cargando