Archive for fevereiro \16\UTC 2012

Introdução ao Processing

Processing é uma linguagem de programação voltada principalmente para o multimidia. Você pode fazer o download em. No meu caso, fiz o download da versão para linux, mas está disponível para Linux, Mac OS e Windows. Vem em um pacote .tgz. Basta extraí-lo e executar o script ‘processing’ (pode ser necessário dar permissões de execução ao arquivo) e… pronto. Se tudo correu bem até agora, você verá o ambiente de desenvolvimento do Processing. Uma dica importante é a do menu ‘Help’, em que você encontra o item ‘Reference’, que é a documentação offline do processing. Ok… mas vamos ao desenvolvimento:

Processing

Tela inicial do Processing

Acima temos a tela inicial do processing…
Na minha implementação, preferi fazer uso de constantes para melhor demonstrar:

//COR DE FUNDO DA JANELA
int BACKGROUND_COLOR = 255;
//ALTURA DA JANELA
int WINDOW_HEIGHT = 600;
//LARGURA DA JANELA
int WINDOW_WIDTH = 600;
//LINHA
int LINE_COLOR = 0;
int LINE_WEIGHT = 10;
//ELIPSE
int ELLIPSE_COLOR = 0;
int ELLIPSE_WEIGHT = 10;
//CÍRCULO
int CIRCLE_COLOR = 0;
int CIRCLE_WEIGHT = 10;

Então, criamos um novo método:

void setup() {
size (WINDOW_WIDTH, WINDOW_HEIGHT);
background(BACKGROUND_COLOR);
}

Nele, definimos o tamanho da janela (com o método size()) e a cor de fundo da janela (background()). Nesse caso, a cor é passada em RGB, variando de 0 (preto) a 255 (branco). Para mais detalhes, veja a documentação do processing clicando. O método setup() prepara a janela que conterá os elementos que serão definidos no próximo passo.

Execução do método setup()

O próximo método é o draw():

void draw() {
stroke(LINE_COLOR);
strokeWeight(LINE_WEIGHT);
line(0, 0, 70, 90);
stroke(CIRCLE_COLOR);
strokeWeight(CIRCLE_WEIGHT);
ellipse(200, 200, 100, 100);
stroke(ELLIPSE_COLOR);
strokeWeight(ELLIPSE_WEIGHT);
ellipse(500, 500, 100, 40);
}

A chamada de alguns métodos se repete. O método stroke() define uma cor para a forma desenhada. O método strokeWeight() define a grossura do contorno. Mas vamos às formas:

line() – desenha uma linha em que os dois primeiros parametros correspondem às coordenadas (x, y) do começo da linha e os dois últimos correspondem às coordenadas do fim da linha.

ellipse() – desenha uma elipse em que os dois primeiros parametros são a coordenadas do encontro do maior e do menor diametro da elipse. Os dois parametros seguintes correspondem à altura e à largura da elipse. No código acima, foram desenhadas duas elipses: uma que, de fato, é uma elipse e um círculo (que nada mais é do que uma elipse com as duas diagonais iguais). Segue o resultado final:

Resultado final do código

Resultado final do código