introdução à programação usando processing programação gráfica 2d animações exercício ...
DESCRIPTION
Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações. Bruno C. de Paula. 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; - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/1.jpg)
Introdução à Programaçãousando ProcessingProgramação Gráfica 2DAnimações
Exercício Animações
2º Semestre 2009 > PUCPR > Design Digital
Bruno C. de Paula
![Page 2: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/2.jpg)
Revisão
2
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;
![Page 3: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/3.jpg)
RevisãoModo contínuo
3
Permite o controle do fluxo de execução;
Baseado em duas funções:setup;draw;
![Page 4: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/4.jpg)
RevisãoFunção setup
4
Chamada apenas uma vez no início da execução;
Configurações gerais;
![Page 5: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/5.jpg)
RevisãoFunção draw
5
Chamada imediatamente após a execução do setup;
Repete-se continuamente; Código para desenho;Atualização de variáveis;
![Page 6: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/6.jpg)
Exemplo de execução passo a passo!
6
![Page 7: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/7.jpg)
7
Executa X vezes
Executa 1 vez
![Page 8: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/8.jpg)
8
Cria variável px
![Page 9: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/9.jpg)
9
Configura a tela
![Page 10: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/10.jpg)
10
Limpa a tela
draw (frame 1)
![Page 11: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/11.jpg)
11
draw (frame 1)Desenha elipse
![Page 12: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/12.jpg)
12
px é igual a 0
![Page 13: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/13.jpg)
13
draw (frame 1)Desenha elipse
![Page 14: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/14.jpg)
14
draw (frame 1)
Incrementa o px
![Page 15: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/15.jpg)
15
px vai de 0 até 1
![Page 16: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/16.jpg)
16
draw (frame 1)
Incrementa o px
![Page 17: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/17.jpg)
17
draw (frame 1)
Limpa teladraw (frame 2)
![Page 18: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/18.jpg)
18
draw (frame 1)
Desenhaelipse
draw (frame 2)
![Page 19: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/19.jpg)
19
px é igual a 1
![Page 20: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/20.jpg)
20
draw (frame 1)
Desenhaelipse
draw (frame 2)
![Page 21: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/21.jpg)
21
draw (frame 1)
draw (frame 2)
Incremento
![Page 22: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/22.jpg)
22
px vai de 1 até 2
![Page 23: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/23.jpg)
23
draw (frame 1)
draw (frame 2)
Incremento
![Page 24: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/24.jpg)
24
draw (frame 1)
draw (frame 2)
draw (frame 3)
![Page 25: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/25.jpg)
RevisãoFunção frameRate
25
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 26: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/26.jpg)
RevisãoVariável frameRate
26
Valor aproximado da taxa de atualização na execução do programa;
![Page 27: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/27.jpg)
RevisãoVariável frameRate
27
Valor aproximado da taxa de atualização na execução do programa;
![Page 28: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/28.jpg)
RevisãoVariável frameCount
28
Número de frames desde o início da execução do programa;
Cada chamada ao draw incrementa esse valor;
![Page 29: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/29.jpg)
2920/04/23
Modo contínuoExemplo do frameCountvoid setup() {
println(frameCount);frameRate(1);
}void draw() {
println(frameCount);rect(50, 50, frameCount, frameCount);
}
![Page 30: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/30.jpg)
3020/04/23
Modo Contínuo frame “0”
Executa a função setup.
![Page 31: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/31.jpg)
3120/04/23
Modo Contínuo frame 1Executa a
primeira vez a função draw;
É como se estivesse chamando rect(50, 50, 1, 1);
![Page 32: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/32.jpg)
3220/04/23
Modo Contínuo frame 2Executa a
segunda vez a função draw;
É como se estivesse chamando rect(50, 50, 2, 2);
![Page 33: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/33.jpg)
3320/04/23
Implementação de uma animação simples1) 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.
![Page 34: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/34.jpg)
1) Definir o bloco setup
34
![Page 35: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/35.jpg)
2) (OPCIONAL) Configurar o tamanho da tela no bloco setup
35
![Page 36: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/36.jpg)
3) (OPCIONAL) Configurar o frame rate no bloco setup
36
![Page 37: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/37.jpg)
4) Definir o bloco draw
37
![Page 38: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/38.jpg)
5) Escrever o código do objeto a ser animado no draw
38
![Page 39: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/39.jpg)
6) Definir uma variável para cada propriedade do objeto a ser animada
39
![Page 40: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/40.jpg)
7) Substituir o parâmetro do objeto a ser animado pela variável
40
![Page 41: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/41.jpg)
8) No fim do draw, atualizar o valor da variável associada ao objeto
41
![Page 42: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/42.jpg)
Dicas práticas
42
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;
![Page 43: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/43.jpg)
Dicas práticas
43
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 300if(px<300) {
px = px + 1;}
![Page 44: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/44.jpg)
Exercício Letra A
44
Anime a movimentação da boca do PACMAN;
![Page 45: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/45.jpg)
Exercício Letra B
45
Anime a movimentação do planeta;
![Page 46: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/46.jpg)
Exercício Letra C
46
Anime a alteração das cores;
Anime a movimentação das elipses;
![Page 47: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/47.jpg)
Exercício Letra D
47
Anime a movimentação da segunda linha;
![Page 48: Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações](https://reader036.vdocuments.net/reader036/viewer/2022062304/56813ebb550346895da92217/html5/thumbnails/48.jpg)
Exercício 2
48
Modifique seu robô;Desta vez, você deve animá-lo;Seja criativo, não se limite a
animação do movimento!