Uma animação possui: Início; Passo; Fim ;

1. Uma animação possui: • Início; • Passo; • Fim; 1

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

3. Função setup • Chamada apenas uma vez no início da execução; • Configurações gerais; 3

4. Função draw • Chamada imediatamente após a execução do setup; • Repete-se continuamente; • Código para desenho; • Atualização de variáveis; 4

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

6. Executa 1 vez Executa X vezes 6

7. Cria variável px 7

8. Configura a tela 8

9. draw (frame 1) Limpa a tela 9

10. draw (frame 1) Desenha elipse 10

11. px é igual a 0 0 11

12. draw (frame 1) Desenha elipse 0 12

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

14. px vai de 0 até 1 1 14

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

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

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

18. px é igual a 1 1 18

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

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

21. px vai de 1 até 2 2 21

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

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

24. 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; 24

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

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

27. Variável frameCount • Número de frames desde o início da execução do programa; • Cada chamada ao draw incrementa esse valor; 27

28. Modo contínuoExemplo do frameCount • void setup() { • println(frameCount); • frameRate(1); • } • void draw() { • println(frameCount); • rect(50, 50, frameCount, frameCount); • }

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

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

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

32. 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; • Atualizar o valor da variável associada ao objeto.

33. 1) Definir o bloco setup 33

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

35. 3) (OPCIONAL) Configurar o frame rate no bloco setup 35

36. 4) Definir o bloco draw 36

37. 5) Escrever o código do objeto a ser animado no draw 37

38. 6) Definir uma variável para cada propriedade do objeto a ser animada 38

39. 7) Substituir o parâmetro do objeto a ser animado pela variável 39

40. 8) Atualizar o valor da variável associada ao objeto (MOVIMENTO) 40

41. float px = 10; void setup() { size(300,200); frameRate(30); } void draw() { rect(px, 10, 20, 40); px = px + 40; }