Upload
trung
View
36
Download
1
Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
1
Uma animação possui:Início;Passo;Fim;
Modo contínuo
2
Permite o controle do fluxo de execução;
Baseado em duas funções:setup;draw;
Função setup
3
Chamada apenas uma vez no início da execução;
Configurações gerais;
Função draw
4
Chamada imediatamente após a execução do setup;
Repete-se continuamente; Código para desenho;Atualização de variáveis;
Exemplo de execução passo a passo!
5
6
Executa X vezes
Executa 1 vez
7
Cria variável px
8
Configura a tela
9
Limpa a tela
draw (frame 1)
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)
Limpa teladraw (frame 2)
17
draw (frame 1)
Desenhaelipse
draw (frame 2)
18
px é igual a 1
19
draw (frame 1)
Desenhaelipse
draw (frame 2)
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)
Função frameRate
24
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;
Variável frameRate
25
Valor aproximado da taxa de atualização na execução do programa;
Variável frameRate
26
Valor aproximado da taxa de atualização na execução do programa;
Variável frameCount
27
Número de frames desde o início da execução do programa;
Cada chamada ao draw incrementa esse valor;
28
Modo contínuoExemplo do frameCount
void setup() {println(frameCount);frameRate(1);
}void draw() {
println(frameCount);rect(50, 50, frameCount,
frameCount);}
29
Modo Contínuo frame “0”
Executa a função setup.
30
Modo Contínuo frame 1Executa a
primeira vez a função draw;
É como se estivesse chamando rect(50, 50, 1, 1);
31
Modo Contínuo frame 2Executa a
segunda vez a função draw;
É como se estivesse chamando rect(50, 50, 2, 2);
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) 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;}