Processing - Programação para dispositivos móveis

Desenvolver aplicativos móveis tem sido o alvo de muitos no mundo inteiro. É o seu caso? Isso pode ser uma dor de cabeça, em vista dos diversos ambientes: iOS, Android, Windows Phone, web, e por aí vai. Seria bom escrever um único código e com pouca ou nenhuma mudança termos nossos aplicativos em qualquer dessas plataformas. Com a linguagem de programação Processing, isso é possível.

[ Hits: 22.794 ]

Por: Juliao Junior em 12/01/2015


Uma animação mais legal



O código abaixo mostra uma animação mais interessante do que a anterior. Cole na IDE do Processing, use CTRL+R e veja o resultado.

int vx = 3;
int vy = 5;
int rat = 40;
int posx = 140;
int posy = 60;

void setup() {
  size(480,360);
  frameRate(30);
  smooth();

 }

void draw() {
  background(0,0,50);
  fill(255,0,0);
  ellipse(posx,posy,rat,rat);
  posx = posx + vx;
  posy = posy + vy;
  
  if ((posy > (height - rat/2))||(posy < (rat/2)))
    vy = vy*(-1);
  
  if ((posx > (width - rat/2))||(posx < (rat/2)))
    vx = vx*(-1);
  
}

Vejamos um detalhamento do código. Se você compilou/rodou o programa, verá uma animação: um círculo se movendo na janela, rebatendo nas bordas.

Nas primeiras linhas, definimos algumas variáveis necessárias. As duas primeiras, vx e vy, definem a velocidade de deslocamento do elemento. Quanto maior o valor, maior será a sensação de velocidade. Como isso ocorre, você verá logo abaixo. A dimensão do elemento círculo é definida pela variável rat. E a posição do elemento determinamos com as variáveis posx e posy. Na função setup(), nada de novo - tudo como nos exemplos anteriores. É na função draw() que a mágica acontece.

O primeiro passo é definir a cor do background. Note que fazemos isso dentro da função draw(). O motivo é que queremos ter a função de movimento, com um elemento geométrico 'passeando' na tela. Como a função draw() é executada várias vezes por segundo, cada vez que background(a,b,c) é executada, ela apaga tudo e desenha o fundo novamente com a cor determinada. Apague esta linha com a definição do background, e rode o programa outra vez. Você verá um efeito parecido com um vídeo estroboscópico, onde as imagens desenhadas uma sobre as outras. Não é isso que queremos.

As próximas linhas são as efetivamente responsáveis pelo movimento. Para destacar, são essas:

 ellipse(posx,posy,rat,rat);
  posx = posx + vx;
  posy = posy + vy;

Primeiro, desenhamos um círculo na posição (posx,posy). Depois, atualizamos os valores das variáveis. Elas passam a ter o valor anterior somados ao valor da velocidade para aquela direção. Quando a função draw() for novamente executada, o valor da variável estará atualizado e o elemento é desenhado em uma nova posição. E isso ocorre continuamente, dando a impressão de movimento.

Mas queremos algo mais. queremos que o círculo rebata nas bordas da janela. Para isso servem as próximas linhas.

  if ((posy > (height - rat/2))||(posy < (rat/2)))
    vy = vy*(-1);
  
  if ((posx > (width - rat/2))||(posx < (rat/2)))
    vx = vx*(-1);

Utilizamos dois if's para um teste simples. Verificamos se a posição horizontal (ou vertical) é maior que altura(largura) da janela menos metade da dimensão do círculo, ou se é menor que a metade da dimensão do círculo. Se for, alteramos o sinal da variável que define a velocidade. Isso garante que, quando o círculo alcançar uma posição próximo a qualquer uma das bordas da janela, a velocidade irá alterar a direção de propagação. O resultado é a impressão de rebatimento do círculo.

É isso! Uma animação completa, em cerca de 20 linhas!

Página anterior     Próxima página

Páginas do artigo
   1. Introdução
   2. Primeiros passos
   3. Sua primeira animação
   4. Uma animação mais legal
   5. Passos adicionais
Outros artigos deste autor

CSS - Manual de Estilo (parte 3)

Introdução ao Linux: O editor de texto Nano

Python, o curso (parte 1)

Real Football 2012 - Futebol de qualidade no Android

Grace - Gráficos em ciência

Leitura recomendada

ARCore: SDK para realidade aumentada da Google

Android Things - Aplicativos IoT padronizado para Indústria 4.0

Introdução ao Heimdall

Ambiente de Desenvolvimento para Android

Processing - Interagindo com o usuário

  
Comentários
[1] Comentário enviado por fabio em 12/01/2015 - 13:48h

Interessante. A estrutura do programa é similar a do Arduino, que tem as funções loop() e setup().

Ansioso para acompanhar o restante da série!

[2] Comentário enviado por juliaojunior em 12/01/2015 - 14:03h


fabio, a estrutura é a mesma por que a linguagem é praticamente a mesma. Se estou bem informado, eles pegaram o Processing e usaram para construir a linguagem para o Arduino.

[3] Comentário enviado por Peacock87 em 18/05/2023 - 04:23h

I can see this post and we put your site in my wish list.
https://www.mythdhr.ltd/


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts