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 2º Semestre 2009 > PUCPR > Design Digital Bruno C. de Paula.

Apresentações semelhantes


Apresentação em tema: "Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações 2º Semestre 2009 > PUCPR > Design Digital Bruno C. de Paula."— Transcrição da apresentação:

1 Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações 2º Semestre 2009 > PUCPR > Design Digital Bruno C. de Paula

2 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;

3 Revisão Modo contínuo 3 Permite o controle do fluxo de execução; Baseado em duas funções: setup; draw;

4 Revisão Função setupsetup 4 Chamada apenas uma vez no início da execução; Configurações gerais;

5 Revisão Função drawdraw 5 Chamada imediatamente após a execução do setup; Repete-se continuamente; Código para desenho; Atualização de variáveis;

6 Exemplo de execução passo a passo! 6

7 7 Executa X vezes Executa 1 vez

8 8 Cria variável px

9 9 Configura a tela

10 10 Limpa a tela draw (frame 1)

11 11 draw (frame 1) Desenha elipse

12 12 px é igual a 0

13 13 draw (frame 1) Desenha elipse

14 14 draw (frame 1) Incrementa o px

15 15 px vai de 0 até 1

16 16 draw (frame 1) Incrementa o px

17 17 draw (frame 1) Limpa tela draw (frame 2)

18 18 draw (frame 1) Desenha elipse draw (frame 2)

19 19 px é igual a 1

20 20 draw (frame 1) Desenha elipse draw (frame 2)

21 21 draw (frame 1) draw (frame 2) Incremento

22 22 px vai de 1 até 2

23 23 draw (frame 1) draw (frame 2) Incremento

24 24 draw (frame 1) draw (frame 2) draw (frame 3)

25 Revisão Função frameRateframeRate 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;

26 Revisão Variável frameRateframeRate 26 Valor aproximado da taxa de atualização na execução do programa;

27 Revisão Variável frameRateframeRate 27 Valor aproximado da taxa de atualização na execução do programa;

28 Revisão Variável frameCountframeCount 28 Número de frames desde o início da execução do programa; Cada chamada ao draw incrementa esse valor;

29 2913/1/2014 Modo contínuo Exemplo do frameCount void setup() { println(frameCount); frameRate(1); } void draw() { println(frameCount); rect(50, 50, frameCount, frameCount); }

30 3013/1/2014 Modo Contínuo frame 0 Executa a função setup.

31 3113/1/2014 Modo Contínuo frame 1 Executa a primeira vez a função draw; É como se estivesse chamando rect(50, 50, 1, 1);

32 3213/1/2014 Modo Contínuo frame 2 Executa a segunda vez a função draw; É como se estivesse chamando rect(50, 50, 2, 2);

33 3313/1/2014 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)No fim do draw, atualizar o valor da variável associada ao objeto.

34 1) Definir o bloco setup 34

35 2) (OPCIONAL) Configurar o tamanho da tela no bloco setup 35

36 3) (OPCIONAL) Configurar o frame rate no bloco setup 36

37 4) Definir o bloco draw 37

38 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 39

40 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 41

42 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;

43 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 300 if(px<300) { px = px + 1; }

44 Exercício Letra A 44 Anime a movimentação da boca do PACMAN;

45 Exercício Letra B 45 Anime a movimentação do planeta;

46 Exercício Letra C 46 Anime a alteração das cores; Anime a movimentação das elipses;

47 Exercício Letra D 47 Anime a movimentação da segunda linha;

48 Exercício 2 48 Modifique seu robô; Desta vez, você deve animá-lo; Seja criativo, não se limite a animação do movimento!


Carregar ppt "Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações 2º Semestre 2009 > PUCPR > Design Digital Bruno C. de Paula."

Apresentações semelhantes


Anúncios Google