A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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 >

Apresentações semelhantes


Apresentação em tema: "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 >"— Transcrição da apresentação:

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


Carregar ppt "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 >"

Apresentações semelhantes


Anúncios Google