1 Uma animação possui: Início; Passo; Fim;. Modo contínuo 2 Permite o controle do fluxo de...
Transcript of 1 Uma animação possui: Início; Passo; Fim;. Modo contínuo 2 Permite o controle do fluxo de...
![Page 1: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/1.jpg)
1
Uma animação possui:Início;Passo;Fim;
![Page 2: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/2.jpg)
Modo contínuo
2
Permite o controle do fluxo de execução;
Baseado em duas funções:setup;draw;
![Page 3: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/3.jpg)
Função setup
3
Chamada apenas uma vez no início da execução;
Configurações gerais;
![Page 4: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/4.jpg)
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;
![Page 5: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/5.jpg)
Exemplo de execução passo a passo!
5
![Page 6: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/6.jpg)
6
Executa X vezes
Executa 1 vez
![Page 7: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/7.jpg)
7
Cria variável px
![Page 8: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/8.jpg)
8
Configura a tela
![Page 9: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/9.jpg)
9
Limpa a tela
draw (frame 1)
![Page 10: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/10.jpg)
10
draw (frame 1)Desenha elipse
![Page 11: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/11.jpg)
11
px é igual a 0
![Page 12: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/12.jpg)
12
draw (frame 1)Desenha elipse
![Page 13: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/13.jpg)
13
draw (frame 1)
Incrementa o px
![Page 14: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/14.jpg)
14
px vai de 0 até 1
![Page 15: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/15.jpg)
15
draw (frame 1)
Incrementa o px
![Page 16: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/16.jpg)
16
draw (frame 1)
Limpa teladraw (frame 2)
![Page 17: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/17.jpg)
17
draw (frame 1)
Desenhaelipse
draw (frame 2)
![Page 18: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/18.jpg)
18
px é igual a 1
![Page 19: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/19.jpg)
19
draw (frame 1)
Desenhaelipse
draw (frame 2)
![Page 20: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/20.jpg)
20
draw (frame 1)
draw (frame 2)
Incremento
![Page 21: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/21.jpg)
21
px vai de 1 até 2
![Page 22: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/22.jpg)
22
draw (frame 1)
draw (frame 2)
Incremento
![Page 23: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/23.jpg)
23
draw (frame 1)
draw (frame 2)
draw (frame 3)
![Page 24: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/24.jpg)
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;
![Page 25: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/25.jpg)
Variável frameRate
25
Valor aproximado da taxa de atualização na execução do programa;
![Page 26: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/26.jpg)
Variável frameRate
26
Valor aproximado da taxa de atualização na execução do programa;
![Page 27: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/27.jpg)
Variável frameCount
27
Número de frames desde o início da execução do programa;
Cada chamada ao draw incrementa esse valor;
![Page 28: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/28.jpg)
28
Modo contínuoExemplo do frameCount
void setup() {println(frameCount);frameRate(1);
}void draw() {
println(frameCount);rect(50, 50, frameCount,
frameCount);}
![Page 29: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/29.jpg)
29
Modo Contínuo frame “0”
Executa a função setup.
![Page 30: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/30.jpg)
30
Modo Contínuo frame 1Executa a
primeira vez a função draw;
É como se estivesse chamando rect(50, 50, 1, 1);
![Page 31: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/31.jpg)
31
Modo Contínuo frame 2Executa a
segunda vez a função draw;
É como se estivesse chamando rect(50, 50, 2, 2);
![Page 32: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/32.jpg)
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.
![Page 33: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/33.jpg)
1) Definir o bloco setup
33
![Page 34: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/34.jpg)
2) (OPCIONAL) Configurar o tamanho da tela no bloco setup
34
![Page 35: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/35.jpg)
3) (OPCIONAL) Configurar o frame rate no bloco setup
35
![Page 36: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/36.jpg)
4) Definir o bloco draw
36
![Page 37: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/37.jpg)
5) Escrever o código do objeto a ser animado no draw
37
![Page 38: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/38.jpg)
6) Definir uma variável para cada propriedade do objeto a ser animada
38
![Page 39: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/39.jpg)
7) Substituir o parâmetro do objeto a ser animado pela variável
39
![Page 40: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/40.jpg)
8) Atualizar o valor da variável associada ao objeto(MOVIMENTO)
40
![Page 41: 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;](https://reader036.fdocumentos.tips/reader036/viewer/2022081518/552fc0fe497959413d8bba95/html5/thumbnails/41.jpg)
float px = 10;void setup() { size(300,200); frameRate(30);}void draw() { rect(px, 10, 20, 40); px = px + 40;}