Uma animação
possui:
Início;
Passo;
Fim;
1
Modo contínuo
Permite o controle do fluxo de
execução;
Baseado em duas funções:
setup;
draw;
2
Função setup
Chamada apenas uma vez no início da
execução;
Configurações gerais;
3
Função draw
Chamada imediatamente após a
execução do setup;
Repete-se continuamente;
Código para desenho;
Atualização de variáveis;
4
Exemplo de execução passo a
passo!
5
Executa 1 vez
Executa
X vezes
6
Cria variável px
7
Configura a tela
8
draw (frame 1)
Limpa a tela
9
draw (frame 1)
Desenha
elipse
10
px é igual a 0
11
draw (frame 1)
Desenha
elipse
12
draw (frame 1)
Incrementa o
px
13
px vai de 0 até
1
14
draw (frame 1)
Incrementa o
px
15
draw (frame 1)
draw (frame 2)
Limpa tela
16
draw (frame 1)
draw (frame 2)
Desenha
elipse
17
px é igual a 1
18
draw (frame 1)
draw (frame 2)
Desenha
elipse
19
draw (frame 1)
draw (frame 2)
Incremento
20
px vai de 1 até
2
21
draw (frame 1)
draw (frame 2)
Incremento
22
draw (frame 1)
draw (frame 2)
draw (frame 3)
23
Função frameRate
Define a taxa de atualização;
FPS (frames por segundo);
Quanto maior, mais rápida é a
atualização;
Quanto menor, mais lenta é a
atualização;
Padrão = 60 frames por segundo;
24
Variável frameRate
Valor
aproximado
da taxa de
atualização na
execução do
programa;
25
Variável frameRate
Valor
aproximado
da taxa de
atualização na
execução do
programa;
26
Variável frameCount
Número de frames desde o início
da execução do programa;
Cada chamada ao draw incrementa
esse valor;
27
Modo contínuo
Exemplo do frameCount
 void
setup() {
println(frameCount);
frameRate(1);
}
 void draw() {
println(frameCount);
rect(50, 50, frameCount, frameCount);
}
28
29
Modo Contínuo
frame “0”
Executa a
função setup.
Modo
Contínuo
frame 1
 Executa
30
a
primeira vez a
função draw;
 É como se
estivesse
chamando
rect(50, 50, 1,
1);
Modo
Contínuo
frame 2
 Executa
31
a
segunda vez a
função draw;
 É como se
estivesse
chamando
rect(50, 50, 2,
2);
Implementação de uma animação
simples
1)
2)
3)
4)
5)
6)
32
Definir o bloco setup;
(OPCIONAL) Configurar o tamanho da tela no bloco setup;
(OPCIONAL) Configurar o frame rate no bloco setup;
Definir o bloco draw;
Escrever o código do objeto a ser animado dentro do draw;
Definir uma variável para cada propriedade do objeto a ser
animada;
7) Substituir o parâmetro do objeto a ser animado pela
variável;
8) Atualizar o valor da variável associada ao objeto.
1) Definir o bloco setup
33
2) (OPCIONAL) Configurar o
tamanho da tela no bloco setup
34
3) (OPCIONAL) Configurar o
frame rate no bloco setup
35
4) Definir o bloco draw
36
5) Escrever o código do objeto a
ser animado no draw
37
6) Definir uma variável para cada
propriedade do objeto a ser
animada
38
7) Substituir o parâmetro do
objeto a ser animado pela
variável
39
8) Atualizar o valor da variável
associada ao objeto
(MOVIMENTO)
40
float px = 10;
void setup() {
size(300,200);
frameRate(30);
}
void draw() {
rect(px, 10, 20, 40);
px = px + 40;
}