Cenas animadas

Vimos como criar várias cenas simples – mas nossas cenas eram o que chamamos de "estáticas" – elas não eram animadas, nem tinham qualquer resposta à interação do usuário. Como vamos ver, é preciso um pouco mais de sutileza para lidar com cenas mais sofisticadas. Mas, vamos lá!

Vamos falar primeiro sobre animação. E se quiséssemos mostrar o Winston em sua fase como astro de rock, arrebentando na bateria? Normalmente faríamos isso definindo a função draw para que ela contenha um código que desenha as formas que mudam um pouco de posição a cada quadro. Aqui está um exemplo, no qual a posição das mãos na bateria é baseada no valor atual de millis(), o número de milissegundos passados:

E se adicionássemos essa cena como a quarta do nosso exemplo anterior? Vamos mover o código para uma função drawScene4() e modificar a lógica de mouseClicked.

Experimente - clique algumas vezes:

Percebeu alguma coisa? Funcionou, mas não perfeitamente. Pudemos ver Winston e sua bateria, mas suas baquetas não estavam se movendo. Que triste! É difícil tocar quando você está parado no tempo. Talvez você já tenha percebido o problema: não estamos mais chamando o código de desenho das baquetas de dentro da função draw(), então ela só é chamado uma vez – não repetidamente – e, portanto, renderizando as baquetas somente no momento em que o código é chamado primeiro. Talvez você já tenha pensado na solução: definir uma função draw() e chamar drawScene4() no momento oportuno.

Vamos pensar um pouco: sempre que definirmos uma função draw() em nosso código, ela vai ser chamada repetidamente (em 60 quadros por segundo como padrão), e sempre que ela for chamada, quando a cena atual já estiver definida como a cena 4, ela vai chamar a função para desenhar a cena 4. Quando for qualquer outro valor, ela não vai tentar desenhar nada – mantendo o que já estava na tela. Ainda precisamos desenhar a cena inicial em mouseClicked, essa lógica cuida de animar todos os quadros posteriores.

Alguns de vocês devem estar pensando: por que simplesmente não temos uma lógica que chama todas as funções de desenhar cenas dentro de draw()? Bem, isso com certeza poderia ser feito, e significaria que se você adicionasse animação para as outras cenas, então elas iriam funcionar imediatamente. Mas considerando que você não vai animar as outras cenas, isso significa que você vai fazer o computador redesenhar todas essas cenas repetidamente sem razão alguma. Da perspectiva do desempenho, isso não é bom. Se nós sabemos como evitar que o computador trabalhe desnecessariamente, devemos fazer isso. Isso irá deixar nossos programas mais rápidos e nossos usuários mais felizes.

Certo, agora que já discutimos tudo isso, aqui está a história em toda sua glória animada e clicável. Você quase pode ouvir as batidas vindas da cena 4!