Um dos principais objetivo destes exercícios é entender como trabalhar com animações que dependem do tempo. Para isto, vamos usar a função millis. Tal função retorna o número de milissegundos desde o início do programa. Outras funções que também são interessantes para se usar com unidades de tempo são as funções second, minute e hour, que retornam, respectivamente, o número de segundos, minutos e segundos do dia.
Uma maneira simples de usar a função millis para executar uma certa ação após um certo tempo é:
- Inicializar, no setup, uma variável com o valor da chamada a millis (por exemplo, tempo);
- A cada draw, comparar o valor de millis com o valor de tempo;
- Se o tempo passado for maior que o tempo total, reinicie o contador de tempo.
Exemplo:
int tempo, tempoPassado, tempoTotal=2000;
void setup() {
tempo = millis();
}
void draw() {
tempoPassado = millis() - tempo; // Faz a diferença entre o tempo atual e a última vez que executou o if
if(tempoPassado>tempoTotal) { // Se o tempoPassado for maior que o intervalo, execute a operação indicada
background(random(256), random(256), random(256));
tempo = millis();
}
}
Também usando millis, uma técnica de animação bastante interessante na área de desenvolvimento web e na área de jogos é a utilização de sprites. Nesta técnica, ao invés de você carregar uma imagem para cada objeto a ser animado, apenas uma imagem é carregada e partes diferentes dela são exibidas em momentos diferentes.
Observe o fragmento de exemplo, que usa a função image.get para recortar parte de uma imagem:
PImage sprite;
int tempo, tempoPassado, tempoTotal=2000;
void setup() {
size(300,300);
tempo = millis();
sprite=loadImage("char6.png");
}
void draw() {
tempoPassado = millis() - tempo;
if(tempoPassado<200) {
image(sprite.get(69,0,60,60),0,0);
} else if(tempoPassado<400) {
image(sprite.get(200,0,60,60),0,0);
} else if(tempoPassado<600) {
image(sprite.get(330,0,60,60),0,0);
} else if(tempoPassado<800) {
image(sprite.get(466,0,60,60),0,0);
} else if(tempoPassado<1000) {
tempo = millis();
}
}
Em anexo, o programa completo.
01) Usando a função millis, desenvolva um programa que a cada 5 segundos exiba uma imagem diferente (slideshow).
Dica:
- Coloque um nome similar em cada imagem, por exemplo: img1.png, img2.png, img3.png. Desta forma, fica fácil carregar as imagens seqüencialmente.
02) A partir da biblioteca de sprites Sprite Lib GPL, crie um programa que exiba uma animação qualquer de um personagem, formada por, pelo menos 4 imagens diferentes sendo exibidas em momentos diferentes. Por exemplo, faça a animação de um personagem andando.
03) Insira o resultado de seu exercício anterior dentro de um ambiente. Preferencialmente, use o ambiente que você gerou no exercício F03, Parte 6. Além disso, faça com que o seu personagem também se mova dentro deste ambiente.
04) Faça um programa que exiba um relógio digital. Para formatar corretamente os valores de hora, minuto e segundo, aplique a função nf.
05) [DESAFIO] Faça um programa que exiba um relógio analógico.
