Introdução ao Processing

Olá pessoas!

Hoje vamos inaugurar o blog com uma breve introdução à linguagem Processing.org.

Processing é uma linguagem OpenSource (código-fonte aberto) que abstrai algumas operações sobre objetos multimídia (vídeo, áudio e imagens). É de fácil aprendizagem e tem uma boa documentação, que pode ser encontrada no próprio site do Processing (http://processing.org/).

Processing também possui um ambiente de programação próprio, onde faremos nossos experimentos e projetos.

Tela inicial do ambiente de programação do Processing.

Vamos começar com o bê-a-bá do Processing, desenharemos algumas formas geométricas simples: linhas, elipses e retângulos. Para manipular objetos gráficos temos que utilizar as coordenadas x, y e z para localizá-los na tela do aplicativo.

O primeiro comando que utilizaremos é o comando line(), responsável por desenhar linhas na tela. Esse comando recebe quatro parâmetros (x1, y1, x2, y2), onde x1 e y1 definem a coordenada da tela onde começa a linha e o par (x2, y2) indicam onde termina. Vamos fazer um exemplo para ilustrar: digite no editor do Processing o comando line(0,0,50,50);. O resultado será o da tela abaixo:

De forma semenhante vamos criar um quadrado e uma elipse. Para criar um quadrilátero temos que usar o comando rect() passando como parâmetros as coordenadas do canto inferior-esquerdo e do canto superior-direito. Digite no editor o comando: rect(0,0,80,80);, o resultado será semelhante ao mostrado abaixo:

Para desenhar uma elipse  devemos passar sua posição(x, y), largura e altura como parâmetros. Digitando o comando ellipse(50,50,40,30); você obterá o seguinte resultado:

Você deve ter notado que nossas imagens até agora estão sem cor de preenchimento ou contorno. Vamos agora adicionar essas propriedades ao nosso desenho. Também alteraremos o tamanho da nossa janela de exibição. 

O comando que controlam o tamanho da janela é o size(). Esse comando recebe como parâmetro as dimenções na janela em pixels. Nós definimos a cor de preenchimento da janela com o comando background(), que recebe como parâmetros três números entre 0 e 255 que representam a cor no padrão RGB. 

Os comandos size() e background() devem ficar dentro da função setup() (função responsável por iniciar as propriedades do desenho).
Os comandos relacionados  ao desenho dos objetos na tela devem ficar dentro da função draw(). Abaixo ilustramos o exemplo do desenho da elipse com suas propriedades alteradas.

Agora vamos fazer uma aplicação contendo recursos de animação, onde capturaremos as posições do mouse por meio das contantes mouseX e mouseY para desenharmos circulos coloridos quando apertamos o botão esquerdo do mouse. Para identificarmos quando o mouse é pressionado utilizaremos o comando mousePressed(). Com o auxílio da função random() faremos cores aleatórias. Digite no editor o seguinte programa:

void setup(){

         size(500,500);

         background(45,67,78);

}

void draw(){
        if(mousePressed){
              ellipse(mouseX, mouseY, 40, 40);
        }

        fill(random(0,255), random(0,255), random(0,255));
}


O resultado será semelhante ao da figura a seguir:

Enfim, por hoje é só, mas continuaremos com nossas experiências com Processing.

That's all folks!!

Referências:

http://processing.org/