1

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

Modo contínuo

2

Permite o controle do fluxo de execução;

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

Função setup

3

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

Configurações gerais;

Função draw

4

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!

5

6

Executa X vezes

Executa 1 vez

7

Cria variável px

8

Configura a tela

9

Limpa a tela

draw (frame 1)

10

draw (frame 1)Desenha elipse

11

px é igual a 0

12

draw (frame 1)Desenha elipse

13

draw (frame 1)

Incrementa o px

14

px vai de 0 até 1

15

draw (frame 1)

Incrementa o px

16

draw (frame 1)

Limpa teladraw (frame 2)

17

draw (frame 1)

Desenhaelipse

draw (frame 2)

18

px é igual a 1

19

draw (frame 1)

Desenhaelipse

draw (frame 2)

20

draw (frame 1)

draw (frame 2)

Incremento

21

px vai de 1 até 2

22

draw (frame 1)

draw (frame 2)

Incremento

23

draw (frame 1)

draw (frame 2)

draw (frame 3)

Função frameRate

24

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;

Variável frameRate

25

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

Variável frameRate

26

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

Variável frameCount

27

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

Cada chamada ao draw incrementa esse valor;

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 1Executa a

primeira vez a função draw;

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

31

Modo Contínuo frame 2Executa a

segunda vez a função draw;

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

32

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) Atualizar o valor da variável associada ao

objeto.

1) Definir o bloco setup

33

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

34

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

35

4) Definir o bloco draw

36

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

37

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

38

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

39

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

40

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