Bruno C. de Paula
Introdução à Programação
usando Processing
Programação Gráfica 2D
Animações
Exercício
Animações
2º Semestre 2009 > PUCPR > Design Digital
Revisão
Uma animação possui:
Início;
Passo;
Fim;
Ver tópico 1 – Modo contínuo no
Processing;
Estamos relembrando as funções
setup, draw e frameRate e as
variáveis frameRate e frameCount;
2
Revisão
Modo contínuo
Permite o controle do fluxo de
execução;
Baseado em duas funções:
setup;
draw;
3
Revisão
Função setup
Chamada apenas uma vez no início da
execução;
Configurações gerais;
4
Revisão
Função draw
Chamada imediatamente após a
execução do setup;
Repete-se continuamente;
Código para desenho;
Atualização de variáveis;
5
Exemplo de execução passo a
passo!
6
Executa 1 vez
Executa
X vezes
7
Cria variável px
8
Configura a tela
9
draw (frame 1)
Limpa a tela
10
draw (frame 1)
Desenha
elipse
11
px é igual a 0
12
draw (frame 1)
Desenha
elipse
13
draw (frame 1)
Incrementa o
px
14
px vai de 0 até
1
15
draw (frame 1)
Incrementa o
px
16
draw (frame 1)
draw (frame 2)
Limpa tela
17
draw (frame 1)
draw (frame 2)
Desenha
elipse
18
px é igual a 1
19
draw (frame 1)
draw (frame 2)
Desenha
elipse
20
draw (frame 1)
draw (frame 2)
Incremento
21
px vai de 1 até
2
22
draw (frame 1)
draw (frame 2)
Incremento
23
draw (frame 1)
draw (frame 2)
draw (frame 3)
24
Revisão
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;
25
Revisão
Variável frameRate
Valor
aproximado
da taxa de
atualização na
execução do
programa;
26
Revisão
Variável frameRate
Valor
aproximado
da taxa de
atualização na
execução do
programa;
27
Revisão
Variável frameCount
Número de frames desde o início
da execução do programa;
Cada chamada ao draw incrementa
esse valor;
28
Modo contínuo
Exemplo do frameCount
void setup() {
println(frameCount);
frameRate(1);
}
void draw() {
println(frameCount);
rect(50, 50, frameCount,
frameCount);
}
05/11/2015
29
Modo Contínuo
frame “0”
Executa a
função setup.
05/11/2015
30
Modo
Contínuo
frame 1
Executa a
primeira vez
a função
draw;
É como se
estivesse
chamando
rect(50, 50,
1, 1);
05/11/2015
31
Modo
Contínuo
frame 2
Executa a
segunda vez
a função
draw;
É como se
estivesse
chamando
rect(50, 50,
2, 2);
05/11/2015
32
Implementação de uma
animação simples
1) Definir o bloco setup;
2) (OPCIONAL) Configurar o tamanho da tela no bloco
setup;
3) (OPCIONAL) Configurar o frame rate no bloco setup;
4) Definir o bloco draw;
5) Escrever o código do objeto a ser animado dentro do
draw;
6) 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) No fim do draw, atualizar o valor da variável
associada ao objeto.
05/11/2015
33
1) Definir o bloco setup
34
2) (OPCIONAL) Configurar o
tamanho da tela no bloco setup
35
3) (OPCIONAL) Configurar o
frame rate no bloco setup
36
4) Definir o bloco draw
37
5) Escrever o código do objeto a
ser animado no draw
38
6) Definir uma variável para cada
propriedade do objeto a ser
animada
39
7) Substituir o parâmetro do
objeto a ser animado pela
variável
40
8) No fim do draw, atualizar o
valor da variável associada ao
objeto
41
Dicas práticas
Para implementar periodicidade, use o
operador %;
A função map pode ser utilizada para
alterar a escala de uma variável (ver
exercício F04, letra j);
Seno (sin) e cosseno (cos) também
são funções periódicas...;
A função random pode ser usada para
dar aspecto aleatório à sua animação;
42
Dicas práticas
Para parar uma animação você pode
usar a estrutura de seleção (mais
detalhes na próxima aula);
// Só faz o incremento
// enquanto o px for menor que 300
if(px<300) {
px = px + 1;
}
43
Exercício Letra A
Anime a movimentação da
boca do PACMAN;
44
Exercício Letra B
Anime a movimentação do
planeta;
45
Exercício Letra C
Anime a alteração das
cores;
Anime a movimentação
das elipses;
46
Exercício Letra D
Anime a movimentação
da segunda linha;
47
Exercício 2
Modifique seu robô;
Desta vez, você deve animá-lo;
Seja criativo, não se limite a
animação do movimento!
48