Introdução ao Processing

Hoje vamos dar início a uma nova rubrica, para todos os que querem explorar e aprender um pouco mais sobre programação, visualizações, e... muito mais. Começamos com uma exclente introdução ao Processing, aquela linguagem de programação que facilita a manipulação gráfica, que nos é trazida pelo Nuno Santos.

O Processing é uma linguagem de programação open-source aliada a um IDE (Integrated Development Environment) orientada para a criação de visualizações gráficas. Inicialmente a linguagem Processing destinava-se a servir como auxiliar visual para quem se iniciava na programação, mas desde então evolui para uma poderosa ferramenta capaz de acelerar a criação de imagens, animações e muito mais, sendo actualmente usada tanto por estudantes, como artistas, como por cientistas.


O uso do IDE é bastante simples e simplifica a sua utilização e aprendizagem, bastando aceder ao site oficial da linguagem de programação Processing e fazer o download. Não é necessário instalar o aplicativo, sendo apenas necessário correr o IDE.

Uma das dificuldades de aprender uma linguagem de programação é a sua curva de aprendizagem, sendo que a dificuldade de atingir algum resultado visível pode ser um factor determinante para a desistência do utilizador.

Neste primeiro artigo vou abordar um processo muito simples que permitirá ao utilizador por muito inexperiente que seja criar uma pequena aplicação gráfica, Trata-se da simples exibição de uma imagem numa janela no ecrã.


Para isso, vamos criar um novo projecto numa pasta, por exemplo “projecto_teste”, e de seguida vamos  colocar nessa pasta a imagem que queremos apresentar no ecrã, com o nome “imagem.jpg”.

A sintaxe desta linguagem de programação é muito semelhante à linguagem C, pelo que será de mais fácil compreensão para todos os que já tiverem tido contacto com ela.

O código necessário para efectuar aquilo que pretendemos é o seguinte:

// Declarar a variável Pimage
PImage minhaimagem;

void setup()
{
     // Defenir o tamanho da Janela
     size(200,200);

     // Criar uma nova Instância para a Variável PImage
     minhaimagem= loadImage("imagem.jpg");
}

void draw()
{
     //Definir a cor de Fundo da Aplicação
     background(255);
 
     // Desenhar a Imagem na Janela da Aplicação na Coordenada (0,0)
     image(minhaimagem,0,0);
}

Aqui estamos a declarar uma variável do tipo PImage com o nome "minhaimagem", onde guardaremos a imagem que vamos carregar e exibir; e duas funções “setup()” e “draw()”. A função setup define o tamanho da janela do programa e carrega a imagem para uma variável. A função draw é responsável por desenhar o que vai ser apresentado na janela. Neste caso define-se a cor de fundo, e diz-se que queremos desenhar a imagem previamente carregada nas coordenadas 0,0.

Após seguir estas pequenas instruções ao correr a aplicação deverá aparecer no ecrã uma a janela que exibe a imagem que colocaram na pasta. Se tal não acontecer, deverão analisar as mensagens de erro que forem apresentadas na parte inferior do IDE (o mais comum será não terem colocado a imagem no local certo ou com o nome certo).


Se não especificarem mais nada, a função draw será executada continuamente, o que permitirá criar animações - sendo que num caso como este, em que só pretendemos exibir uma só imagem, poderiamos especificar que só deveria ser executada uma vez, chamando a função noLoop(); durante o setup - ou ainda definir qual seria o framerate desejado com o frameRate(30); (onde 30 poderá ser o valor que desejarem, em imagens por segundo que serão calculadas/desenhadas).


Por exemplo, para tornarem o nosso exemplo mais "animado", poderiamos fazer uma brincadeira com a imagem. No início do programa adicionamos uma variável extra, que podem colocar na linha a seguir à definição da "minhaimagem":

int y=0; //variavel para guardar a posição onde a imagem será desenhada

e depois, dentro da função draw() substituam a função de desenhar a imagem
image(minhaimagem,0,0);
por
image(minhaimagem,0,y);

Assim, em vez de ser desenhada sempre na posição 0,0 passará a ser desenhada na posição definida pelo valor guardado em "y". Neste momento, não há ainda nada que se possa ver, pois a variável y continua a ter o valor 0.

Para isso, vamos agora brincar com esse valors.

Ainda dentro da função draw(), e logo a seguir a terem chamado a instrução de desenhar a imagem, coloquem:

y = y+10;
if (y > 100) y=0;

Ou seja, de cada vez que a imagem for desenhada (relembro que a função draw() está a ser chamada continuamente), iremos adicionar 10 ao valor de y. Mas para evitar que rapidamente a imagem saia da zona visível, adicionamos também uma verificação adicional, que diz que, se o valor for maior que 100, então volta a ser colocado a zero.

Cliquem no executar e vejam o resultado.

Depois, podem começar a brincar, alterando as coordenadas, alterando também a coordenada "x" a par da coordenada "y", para fazer movimentar a imagem na horizontal; mudar os valores que são somados, para mudar a velocidade com que a imagem se desloca, etc. etc. Brinquem, e explorem os muitos exemplos que vêm fornecidos com o Processing, pois é assim que se vai aprendendo.


O Processing está disponível para GNU/Linux, Max OS X e Windows.

Existe muita informação e tutoriais sobre esta linguagem de programação e suas potencialidades espalhados pela internet, mas o website oficial possui muita informação e muitos exemplos que até podem ser executados no próprio browser através do processing.js.