1 / 48

Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações

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;

sancha
Download Presentation

Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introdução à Programaçãousando ProcessingProgramação Gráfica 2DAnimaçõesExercício Animações Bruno C. de Paula 2º Semestre 2009 > PUCPR > Design Digital

  2. 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; • Baseado em duas funções: • setup; • draw; 3

  4. 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; • Repete-se continuamente; • Código para desenho; • Atualização de variáveis; 5

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

  7. Executa 1 vez Executa X vezes 7

  8. Cria variável px 8

  9. Configura a tela 9

  10. draw (frame 1) Limpa a tela 10

  11. draw (frame 1) Desenha elipse 11

  12. px é igual a 0 0 12

  13. draw (frame 1) Desenha elipse 0 13

  14. draw (frame 1) 0 Incrementa o px 14

  15. px vai de 0 até 1 1 15

  16. draw (frame 1) 0 Incrementa o px 1 16

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

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

  19. px é igual a 1 1 19

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

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

  22. px vai de 1 até 2 2 22

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

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

  25. 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 • Valor aproximado da taxa de atualização na execução do programa; 26

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

  28. 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ínuoExemplo do frameCount • void setup() { • println(frameCount); • frameRate(1); • } • void draw() { • println(frameCount); • rect(50, 50, frameCount, frameCount); • }

  30. Modo Contínuo frame “0” • Executa a função setup.

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

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

  33. 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.

  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 • 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. 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. Exercício Letra A • Anime a movimentação da boca do PACMAN; 44

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

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

  47. 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; • Seja criativo, não se limite a animação do movimento! 48

More Related