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.
Parte 4: 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.
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:
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.
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!
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!
Ansioso para acompanhar o restante da série!