Aula 05 Processing - Animação suave

Tarefa

Mantendo o tempo real, alterar o simulador de movimento retilíneo uniforme para operar a 60 fps, tornando a animação mais precisa e suave - justificando através do uso de mostraMundo.

                                                                             

O código é bem simples. Começamos declarando as variaveis t e d, essas serão responsaveis por receber os valores da distancia percorrida na tela e o tempo de execução respectivamente.

o frameRate foi setado para 60 para deixar bem evidente como  a animação irá operar.   

Dentro do Draw() definimos que a bolinha vai correr ate a quantidade máxima de pixels da tela que é 60, no eixo X. O eixo Y foi setado para ser equivalente a metade da tela.

Para que tudo funcione precisamos de duas funções, a função mostraMundo e a função MRU. Com a MRU- movimento retilíneo uniforme conseguimos representar o movimento que a bolinha fará percorrendo a tela. Essa distancia é definida por uma constante que é a velocidade e multiplicada pela passagem do tempo. 

Com a função mostraMundo desenhamos uma grade por toda a tela criando divisões a cada 50px. A importancia dessa função é trazer uma noção maior de quanto de espaço estará sendo percorrido pela elipse com a função MRU. 

Inicialmente  a animação ocorria de forma muito rápida com o frameRate setado em 60. portanto para visualizar melhor, ele era baixado para 1 frame por segundo.

Com o código original temos que o para o MRU a formula era d= v * t.  Ao representar dessa maneira a ellipse percorria uma distancia dx a cada 1 segundo. Se o background e o mostramundo não estivessem inseridos no draw() e sim no setup() seria possivel observar que a bolinha realizava pequenos saltos dentro da animação. Isso acontecia porque ela não percorria a distancia px por px. 

Uma forma simples e facil de resolver o problema foi dividir o "t" por 60, assim a distancia passaria a ser medida com 1/60 de segundos, ou seja teriamos 60 vezes mais posiçoes da distancia no periodo de 1 segundo. E portanto podendo retornar o frameRate para 60.

O efeito pode ser observado nos gifs abaixo. Como a animação ficou muito longa coloquei dois gifs, um com qualidade bem ruim mas que vai carregar um pouco mais rapido. O outro gif é mais fiel à aplicação, porem com mais de 30mb pode demorar um pouco para carregar. 

Gif Qualidade Ruim

Gif original