Carregar apresentação
A apresentação está carregando. Por favor, espere
PublicouFernanda Lucas Alterado mais de 11 anos atrás
1
Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações
14/10/09 Bruno C. de Paula 2º Semestre 2009 > PUCPR > Design Digital
2
Revisão Uma animação possui: Início; Passo; Fim;
14/10/09 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
3
Revisão Modo contínuo Permite o controle do fluxo de execução;
14/10/09 Revisão Modo contínuo Permite o controle do fluxo de execução; Baseado em duas funções: setup; draw; 3
4
Revisão Função setup Chamada apenas uma vez no início da execução;
14/10/09 Revisão Função setup Chamada apenas uma vez no início da execução; Configurações gerais; 4
5
Revisão Função draw Chamada imediatamente após a execução do setup;
14/10/09 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
6
Exemplo de execução passo a passo!
14/10/09 float px = 0; void setup() { size(300,300); } void draw() { background(255); ellipse(px, 100, 20, 20); px = px + 1; 6
7
14/10/09 Executa 1 vez Executa X vezes 7
8
14/10/09 Cria variável px 8
9
14/10/09 Configura a tela 9
10
14/10/09 draw (frame 1) Limpa a tela 10
11
14/10/09 draw (frame 1) Desenha elipse 11
12
14/10/09 px é igual a 0 12
13
14/10/09 draw (frame 1) Desenha elipse 13
14
14/10/09 draw (frame 1) Incrementa o px 14
15
14/10/09 px vai de 0 até 1 1 15
16
14/10/09 draw (frame 1) Incrementa o px 1 16
17
14/10/09 draw (frame 1) 1 draw (frame 2) Limpa tela 17
18
14/10/09 draw (frame 1) 1 draw (frame 2) Desenha elipse 18
19
14/10/09 px é igual a 1 1 19
20
14/10/09 draw (frame 1) 1 draw (frame 2) Desenha elipse 1 20
21
14/10/09 draw (frame 1) 1 draw (frame 2) 1 Incremento 21
22
14/10/09 px vai de 1 até 2 2 22
23
14/10/09 draw (frame 1) 1 draw (frame 2) 1 Incremento 2 23
24
14/10/09 draw (frame 1) 1 draw (frame 2) 1 2 draw (frame 3) ... 24
25
Revisão Função frameRate Define a taxa de atualização;
14/10/09 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
26
Revisão Variável frameRate
14/10/09 Revisão Variável frameRate Valor aproximado da taxa de atualização na execução do programa; 26
27
Revisão Variável frameRate
14/10/09 Revisão Variável frameRate Valor aproximado da taxa de atualização na execução do programa; 27
28
Revisão Variável frameCount
14/10/09 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
29
Modo contínuo Exemplo do frameCount
25/03/2017 Modo contínuo Exemplo do frameCount void setup() { println(frameCount); frameRate(1); } void draw() { rect(50, 50, frameCount, frameCount); void setup() { println(frameCount); frameRate(1); } void draw() { rect(50, 50, frameCount, frameCount); 25/03/2017
30
Modo Contínuo frame “0” Executa a função setup. 25/03/2017
31
Modo Contínuo frame 1 Executa a primeira vez a função draw;
É como se estivesse chamando rect(50, 50, 1, 1); 25/03/2017
32
Modo Contínuo frame 2 Executa a segunda vez a função draw;
É como se estivesse chamando rect(50, 50, 2, 2); 25/03/2017
33
Implementação de uma animação simples
25/03/2017 Implementação de uma animação simples 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; Substituir o parâmetro do objeto a ser animado pela variável; No fim do draw, atualizar o valor da variável associada ao objeto. void setup() { println(frameCount); frameRate(1); } void draw() { rect(50, 50, frameCount, frameCount); 25/03/2017
34
14/10/09 1) Definir o bloco setup 34
35
2) (OPCIONAL) Configurar o tamanho da tela no bloco setup
14/10/09 2) (OPCIONAL) Configurar o tamanho da tela no bloco setup 35
36
3) (OPCIONAL) Configurar o frame rate no bloco setup
14/10/09 3) (OPCIONAL) Configurar o frame rate no bloco setup 36
37
14/10/09 4) Definir o bloco draw 37
38
5) Escrever o código do objeto a ser animado no draw
14/10/09 5) Escrever o código do objeto a ser animado no draw 38
39
6) Definir uma variável para cada propriedade do objeto a ser animada
14/10/09 6) Definir uma variável para cada propriedade do objeto a ser animada 39
40
7) Substituir o parâmetro do objeto a ser animado pela variável
14/10/09 7) Substituir o parâmetro do objeto a ser animado pela variável 40
41
8) No fim do draw, atualizar o valor da variável associada ao objeto
14/10/09 8) No fim do draw, atualizar o valor da variável associada ao objeto 41
42
Dicas práticas Para implementar periodicidade, use o operador %;
14/10/09 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
43
14/10/09 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
44
14/10/09 Exercício Letra A Anime a movimentação da boca do PACMAN; 44
45
14/10/09 Exercício Letra B Anime a movimentação do planeta; 45
46
Exercício Letra C Anime a alteração das cores;
14/10/09 Exercício Letra C Anime a alteração das cores; Anime a movimentação das elipses; 46
47
14/10/09 Exercício Letra D Anime a movimentação da segunda linha; 47
48
Exercício 2 Modifique seu robô; Desta vez, você deve animá-lo;
14/10/09 Exercício 2 Modifique seu robô; Desta vez, você deve animá-lo; Seja criativo, não se limite a animação do movimento! 48
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.