Introdução à Programação
Download
1 / 48

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


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

Introdução à Programaçãousando ProcessingProgramação Gráfica 2DAnimaçõesExercí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;

  • Estamos relembrando as funções setup, draw e frameRate e as variáveis frameRate e frameCount;

2


Revisão

Modo contínuo

  • Permite o controle do fluxo de execução;

  • Baseado em duas funções:

    • setup;

    • draw;

3


Revisão

Função setup

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

  • Configurações gerais;

4


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


Exemplo de execução passo a passo!

6


Executa 1 vez

Executa

X vezes

7




draw (frame 1)

Limpa a tela

10


draw (frame 1)

Desenha elipse

11



draw (frame 1)

Desenha elipse

0

13


draw (frame 1)

0

Incrementa o px

14



draw (frame 1)

0

Incrementa o px

1

16


draw (frame 1)

0

1

draw (frame 2)

Limpa tela

17


draw (frame 1)

0

1

draw (frame 2)

Desenha

elipse

18



draw (frame 1)

0

1

draw (frame 2)

Desenha

elipse

1

20


draw (frame 1)

0

1

draw (frame 2)

1

Incremento

21



draw (frame 1)

0

1

draw (frame 2)

1

Incremento

2

23


draw (frame 1)

0

1

draw (frame 2)

1

2

draw (frame 3)

...

24


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


Revisão

Variável frameRate

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

26


Revisão

Variável frameRate

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

27


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.










Dicas práticas ao objeto

  • 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


Dicas práticas ao objeto

  • 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


Exercício Letra A ao objeto

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

44


Exercício Letra B ao objeto

  • Anime a movimentação do planeta;

45


Exercício Letra C ao objeto

  • Anime a alteração das cores;

  • Anime a movimentação das elipses;

46


Exercício Letra D ao objeto

  • Anime a movimentação da segunda linha;

47


Exercício 2 ao objeto

  • Modifique seu robô;

  • Desta vez, você deve animá-lo;

  • Seja criativo, não se limite a animação do movimento!

48


ad