Introdução à Programaçãousando ProcessingProgramação Gráfica 2DAnimações

Exercício Animações

2º Semestre 2009 > PUCPR > Design Digital

Bruno C. de Paula

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;

RevisãoModo contínuo

3

Permite o controle do fluxo de execução;

Baseado em duas funções:setup;draw;

RevisãoFunção setup

4

Chamada apenas uma vez no início da execução;

Configurações gerais;

RevisãoFunção draw

5

Chamada imediatamente após a execução do setup;

Repete-se continuamente; Código para desenho;Atualização de variáveis;

Exemplo de execução passo a passo!

6

7

Executa X vezes

Executa 1 vez

8

Cria variável px

9

Configura a tela

10

Limpa a tela

draw (frame 1)

11

draw (frame 1)Desenha elipse

12

px é igual a 0

13

draw (frame 1)Desenha elipse

14

draw (frame 1)

Incrementa o px

15

px vai de 0 até 1

16

draw (frame 1)

Incrementa o px

17

draw (frame 1)

Limpa teladraw (frame 2)

18

draw (frame 1)

Desenhaelipse

draw (frame 2)

19

px é igual a 1

20

draw (frame 1)

Desenhaelipse

draw (frame 2)

21

draw (frame 1)

draw (frame 2)

Incremento

22

px vai de 1 até 2

23

draw (frame 1)

draw (frame 2)

Incremento

24

draw (frame 1)

draw (frame 2)

draw (frame 3)

RevisãoFunção frameRate

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;

RevisãoVariável frameRate

26

Valor aproximado da taxa de atualização na execução do programa;

RevisãoVariável frameRate

27

Valor aproximado da taxa de atualização na execução do programa;

RevisãoVariável frameCount

28

Número de frames desde o início da execução do programa;

Cada chamada ao draw incrementa esse valor;

2920/04/23

Modo contínuoExemplo do frameCountvoid setup() {

println(frameCount);frameRate(1);

}void draw() {

println(frameCount);rect(50, 50, frameCount, frameCount);

}

3020/04/23

Modo Contínuo frame “0”

Executa a função setup.

3120/04/23

Modo Contínuo frame 1Executa a

primeira vez a função draw;

É como se estivesse chamando rect(50, 50, 1, 1);

3220/04/23

Modo Contínuo frame 2Executa a

segunda vez a função draw;

É como se estivesse chamando rect(50, 50, 2, 2);

3320/04/23

Implementação de uma animação simples1) 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.

1) Definir o bloco setup

34

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

35

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

36

4) Definir o bloco draw

37

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

38

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

39

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

40

8) No fim do draw, atualizar o valor da variável associada ao objeto

41

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;

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 300if(px<300) {

px = px + 1;}

Exercício Letra A

44

Anime a movimentação da boca do PACMAN;

Exercício Letra B

45

Anime a movimentação do planeta;

Exercício Letra C

46

Anime a alteração das cores;

Anime a movimentação das elipses;

Exercício Letra D

47

Anime a movimentação da segunda linha;

Exercício 2

48

Modifique seu robô;Desta vez, você deve animá-lo;Seja criativo, não se limite a

animação do movimento!