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

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

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

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

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

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

14/10/09 Cria variável px 7

14/10/09 Configura a tela 8

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

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

14/10/09 px é igual a 0 11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);

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

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

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

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);

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

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

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

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

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

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

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

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

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