Processing - Programação para dispositivos móveis

Em nosso primeiro exemplo, vejamos como desenhar na tela alguns elementos geométricos simples e alterar suas características conforme desejarmos.

void setup()
{ 
  size(480,360);
  smooth();
}

void draw()
{
  background(150,50,100);
  
  strokeWeight(1);
  point(width/2,height/5);
   
  strokeWeight(2);
  ellipse(100.,height*0.25,80.,80.);
  ellipse(300.,height*0.25,80.,120.);
  
  strokeWeight(3);
  rect(100.,height*0.6,80.,80.);
  rect(300.,height*0.6,80.,120.);
  
  strokeWeight(5);
  line(100.,height*0.5,350.,height*0.5);
  
  strokeWeight(12);
  line(450.,height*0.15,450.,height*0.95);

}

A função setup() serve para fazer o que o nome já diz; a configuração geral do nosso programa. Em size(480,360) definimos o tamanho da janela para o programa. O primeiro número define a largura, enquanto o segundo define a altura. Altere esses valores, rode o código e veja a diferença. Em setup() também podemos configurar alguma variável que for necessária, carregar imagens e algumas outras tarefas que veremos em artigos futuros. Utilizamos a função smooth() para ativar a conhecida anti-aliasing. Ou seja, todas as formas que desenharmos terão as 'pontas' suavizadas. Se desejar o contrário, é só apagar a função.

Daí utilizamos a outra função central em Processing: a função draw(). Esta função é executada continuamente, várias vezes por segundo. Então o que você escrever nela será mostrado na tela de forma contínua. Isto é ótimo, pois podemos utilizá-la para construir animações ou interações com o usuário. Veremos isso mais a frente. Na primeira linha dentro da função draw() você determina a configuração da cor de fundo da janela. Em background(150,50,100), estamos utilizando o padrão RGB. Então você pode definir a cor de fundo apenas alterando essa linha.

Seguindo, começamos efetivamente a desenhar nossas formas. Você vê diversas vezes a função strokeWeight(x). Ela serve para definir a espessura da linha a ser desenhada. Desta forma, se usamos strokeWeight(8) teremos uma determinada espessura; e quando usamos strokeWeight(1) teremos uma espessura bem mais fina. Abaixo, comento cada uma das linhas que utilizamos para o desenho das figuras geométricas.

point(width/2,height/5): desenha um ponto (obviamente!) nas coordenadas indicadas. Em width/2 e height/5, utilizamos duas variáveis próprias da linguagem - width nos fornece a largura da janela, e height nos fornece sua altura.

ellipse(100.,height*0.25,80.,80.): desenha uma elipse. Os dois primeiros valores indicam as coordenadas da figura, e os dois últimos as dimensões horizontal e vertical. Se os valores para as dimensões forem iguais, temos um círculo.

rect(100.,height*0.6,80.,80.): desenha um retângulo. Os quatro valores seguem o mesmo padrão da elipse. Neste caso, para valores iguais das dimensões teremos um quadrado.

line(100.,height*0.5,350.,height*0.5): desenha uma linha. Os dois primeiros valores indicam as coordenadas o ponto de uma extremidade da linha; os últimos dois valores indicam as coordenadas do ponto da outra extremidade.

Se você fez tudo corretamente, clique no botão Run ou use as teclas CTRL + R, e compile/rode o programa. Você verá uma janela, mostrada abaixo.