14/10/09 Uma animação possui: Início; Passo; Fim; 1.

Apresentação em tema: "14/10/09 Uma animação possui: Início; Passo; Fim; 1."— Transcrição da apresentação:

1 14/10/09 Uma animação possui: Início; Passo; Fim; 1

2 Modo contínuo Permite o controle do fluxo de execução;
14/10/09 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;
14/10/09 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;
14/10/09 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!
14/10/09 float px = 0; void setup() { size(300,300); } void draw() { background(255); ellipse(px, 100, 20, 20); px = px + 1; 5

6 14/10/09 Executa 1 vez Executa X vezes 6

7 14/10/09 Cria variável px 7

8 14/10/09 Configura a tela 8

9 14/10/09 draw (frame 1) Limpa a tela 9

10 14/10/09 draw (frame 1) Desenha elipse 10

11 14/10/09 px é igual a 0 11

12 14/10/09 draw (frame 1) Desenha elipse 12

13 14/10/09 draw (frame 1) Incrementa o px 13

14 14/10/09 px vai de 0 até 1 1 14

15 14/10/09 draw (frame 1) Incrementa o px 1 15

16 14/10/09 draw (frame 1) 1 draw (frame 2) Limpa tela 16

17 14/10/09 draw (frame 1) 1 draw (frame 2) Desenha elipse 17

18 14/10/09 px é igual a 1 1 18

19 14/10/09 draw (frame 1) 1 draw (frame 2) Desenha elipse 1 19

20 14/10/09 draw (frame 1) 1 draw (frame 2) 1 Incremento 20

21 14/10/09 px vai de 1 até 2 2 21

22 14/10/09 draw (frame 1) 1 draw (frame 2) 1 Incremento 2 22

23 14/10/09 draw (frame 1) 1 draw (frame 2) 1 2 draw (frame 3) ... 23

24 Função frameRate Define a taxa de atualização;
14/10/09 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 14/10/09 Variável frameRate Valor aproximado da taxa de atualização na execução do programa; 25

26 14/10/09 Variável frameRate Valor aproximado da taxa de atualização na execução do programa; 26

27 14/10/09 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ínuo Exemplo do frameCount
25/03/2017 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);

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
25/03/2017 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. void setup() { println(frameCount); frameRate(1); } void draw() { rect(50, 50, frameCount, frameCount);

33 14/10/09 1) Definir o bloco setup 33

34 2) (OPCIONAL) Configurar o tamanho da tela no bloco setup
14/10/09 2) (OPCIONAL) Configurar o tamanho da tela no bloco setup 34

35 3) (OPCIONAL) Configurar o frame rate no bloco setup
14/10/09 3) (OPCIONAL) Configurar o frame rate no bloco setup 35

36 14/10/09 4) Definir o bloco draw 36

37 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 37

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

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

40 8) Atualizar o valor da variável associada ao objeto (MOVIMENTO)
14/10/09 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;