slide1
Download
Skip this Video
Download Presentation
Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações

Loading in 2 Seconds...

play fullscreen
1 / 48

Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações - PowerPoint PPT Presentation


  • 88 Views
  • Uploaded on

Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações. Bruno C. de Paula. 2º Semestre 2009 > PUCPR > Design Digital. Revisão. Uma animação possui: Início; Passo; Fim ; Ver tópico 1 – Modo contínuo no Processing;

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações' - sancha


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Introdução à Programaçãousando ProcessingProgramação Gráfica 2DAnimaçõesExercício Animações

Bruno C. de Paula

2º Semestre 2009 > PUCPR > Design Digital

slide2

Revisão

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

2

slide3

Revisão

Modo contínuo

  • Permite o controle do fluxo de execução;
  • Baseado em duas funções:
    • setup;
    • draw;

3

slide4

Revisão

Função setup

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

4

slide5

Revisão

Função draw

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

5

slide7

Executa 1 vez

Executa

X vezes

7

slide10

draw (frame 1)

Limpa a tela

10

slide11

draw (frame 1)

Desenha elipse

11

slide13

draw (frame 1)

Desenha elipse

0

13

slide14

draw (frame 1)

0

Incrementa o px

14

slide16

draw (frame 1)

0

Incrementa o px

1

16

slide17

draw (frame 1)

0

1

draw (frame 2)

Limpa tela

17

slide18

draw (frame 1)

0

1

draw (frame 2)

Desenha

elipse

18

slide20

draw (frame 1)

0

1

draw (frame 2)

Desenha

elipse

1

20

slide21

draw (frame 1)

0

1

draw (frame 2)

1

Incremento

21

slide23

draw (frame 1)

0

1

draw (frame 2)

1

Incremento

2

23

slide24

draw (frame 1)

0

1

draw (frame 2)

1

2

draw (frame 3)

...

24

slide25

Revisão

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;

25

slide26

Revisão

Variável frameRate

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

26

slide27

Revisão

Variável frameRate

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

27

slide28

Revisão

Variável frameCount

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

28

modo cont nuo exemplo do framecount
Modo contínuoExemplo do frameCount
  • void setup() {
    • println(frameCount);
    • frameRate(1);
  • }
  • void draw() {
    • println(frameCount);
    • rect(50, 50, frameCount, frameCount);
  • }
modo cont nuo frame 0
Modo Contínuo frame “0”
  • Executa a função setup.
modo cont nuo frame 1
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
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
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;
  • No fim do draw, atualizar o valor da variável associada ao objeto.
slide42

Dicas práticas

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

42

slide43

Dicas práticas

  • 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 300
  • if(px<300) {
    • px = px + 1;
  • }

43

slide44

Exercício Letra A

  • Anime a movimentação da boca do PACMAN;

44

slide45

Exercício Letra B

  • Anime a movimentação do planeta;

45

slide46

Exercício Letra C

  • Anime a alteração das cores;
  • Anime a movimentação das elipses;

46

slide47

Exercício Letra D

  • Anime a movimentação da segunda linha;

47

slide48

Exercício 2

  • Modifique seu robô;
  • Desta vez, você deve animá-lo;
  • Seja criativo, não se limite a animação do movimento!

48

ad