Guia básico do Processing: a programação criativa

Share on FacebookShare on Google+Tweet about this on Twitter

Artistas do mundo todo têm a cada dia incorporado mais a tecnologia em suas criações. O termo Programação Criativa (Creative coding) é o ato de usar códigos programados para gerar trabalhos de arte, design, arquitetura, moda e outros. Nesse pacote está incluso criar e modificar imagens, composições musicais, representações gráficas de banco de dados, dentre milhares de outros.

Um padrão conhecido como Arte Gerativa (Generative Art), existente antes do mundo digital, está sendo potencializada através da linguagem de programação Processing. A Arte Gerativa é criar um processo, composto que gerará como resultado um ou mais trabalhos artísticos. Um processo pode ser instruções claras e objetivas para ser seguidos por pessoas ou por máquinas, sendo aí que a programação entra.

A arte gerativa tem algumas propriedades interessantes. Uma delas é que o processo em si é muito mais simples do que os resultados gerados por ele. Outra característica é que na maioria das vezes é difícil prever quais serão os resultados gerados pelo processo, pois os padrões gerados podem ter altos níveis de complexidade. Até o artista pode ter dificuldade de entender exatamente como o processo gerou aquele resultado específico.

Começando a programar

A linguagem que é mais utilizada por esses artistas gerativos é o Processing. Eles tem o próprio IDE, que você baixa no site do Processing.

A linguagem foi criada por Casey Reas e Ben Fry em 2001. Ela é tem sua sintaxe baseada em Java, mas de maneira simplificada para pessoas que estão iniciando com a programação. Todo sketch feito no Processing é uma subclasse da classe PApplet.

Por isso quando se programa em Processing, todas as classes adicionais definidas serão consideradas classes internas quando o código for compilado. O uso de variáveis estáticas e métodos em classes, portanto, é impedido a menos que você especifique para o Processing que quer programar com o Java puro.

Montando a tela

A função setup () determina o que será executado quando o código for iniciado. Nele você definirá características iniciais da arte, como tamanho, cor de fundo, formas que já estejam presentes, dentre outros.

Um exemplo dessa função inicial:

void setup() {
//define o tamanho da tela
size(600, 400);
//define a cor da da borda
stroke(255);
//define a cor do fundo da tela em RGB
background(192, 64, 0);
}

Desenhando

A função draw() é onde a maior parte interativa do código é feita. Essa função se repete durante a execução do código.

Formas básicas

rect(x, y, largura, altura);
Desenha um retângulo que começa na posição (x, y) e com as medidas “largura” e “altura”.

line(x1, y1, x2, y2);
Desenha uma linha que começa no ponto (x1, y1) até o ponto (x2, y2)

quad(x1, y1, x2, y2, x3, y3, x4, y4);
Desenha um quadrilátero que liga vértices, determinados pelos pontos.

triangle(x1, y1, x2, y2, x3, y3);
Desenha um triângulo com os pontos discriminados  na função.

arc(x, y, w, h, sa, ea);
Desenha um arco da posição (x,y), com “w” de largura (width), “h” de altura (height), “sa” como ânulo inicial (start angle) e “ea” como ângulo final em radiados (end angle).

ellipse(x, y, largura, altura);
Desenha uma elipse centrada na posição (x, y) e com tamanho “largura” e “altura”. Especificando os mesmos valores de altura e largura, você cria um círculo.

Useful constants in processing: TWO_PI, PI, HALF_PI.

Variáveis de input

mouseX
Essa variável contem a coordenada horizontal do mouse no momento.

mouseY
Variável contendo a atual coordenada vertical do mouse.

pmouseX
Variável contendo a posição horizontal do mouse no frame anterior ao atual.

pmouseY
Variável contendo a posição vertical do mouse no frame anterior ao atual.

mousePressed
Variável contendo se o botão do moyse está atualmente sendo pressionado. É verdadeiro quando está sendo pressionado e falso quando não. Um exemplo de uso é if (mousePressed == true)

O fator aleatório

Para que o código gere resultados diversos e imprevisíveis, funções relacionadas a aleatoriedade podem ser usada. São detalhadas algumas abaixo:

random()

Quando essa função é chamada, ela gera número aleatórios em uma faixa especificada. Se for enviado apenas um número, retornará um número entre 0 e o valor especificado. Em caso de dois valores especificados, ele retorna algum valor entre eles.

 

noise()

Retorna um ruído aleatório da escala Perlin com coordenadas especificas. O ruído Perlin produz uma sucessão mais harmônica e natural de números que o random(). Através de um cálculo feito por Ken Perlin nos anos 80, é possível esse resultado, normalmente sendo usado em texturas, formas e outras aplicações que visam organicidade.

 

randomGaussian()

Retorna uma variável float entre com média 0 e desvio-padrão de 1, ajustando na distribuição Gaussiana ou normal. Não há valor máximo ou mínimo, mas é provável que valores mais próximos à média sejam retornados.

Exemplos

Código de exemplo do uso da função Mouse Press:

void setup() {
size(800, 460);
noSmooth();
fill(126);
background(102);
}
void draw() {
if (mousePressed) {
stroke(random(255),random(255),random(255));
} else {
stroke(0);
}
line(mouseX-50, mouseY, mouseX+50, mouseY);
line(mouseX, mouseY-50, mouseX, mouseY+50);
}

Código usando inputs do teclado:

int rectWidth;

void setup() {
size(640, 360);
noStroke();
background(0);
rectWidth = width/4;
}

void draw() {
// o draw() é mantido para que o loop continue enquanto se espera a entrada do teclado
}

void keyPressed() {

int keyIndex = -1;
if (key >= 'A' && key <= 'Z') { keyIndex = key - 'A'; } else if (key >= 'a' && key <= 'z') {
keyIndex = key - 'a';
}
if (keyIndex == -1) {
// Se não é uma tecla de letra, limpa a tela
background(0);
} else {
// Se é uma tecla de letra pressionada, preenche um retângulo
fill(millis() % 255);
float x = map(keyIndex, 0, 25, 0, width - rectWidth);
rect(x, 0, rectWidth, height);
}
}

 

Transição suave do mouse:

float x;
float y;
float easing = 0.05;

void setup() {
size(640, 360);
noStroke();
}

void draw() {
background(51);

float targetX = mouseX;
float dx = targetX - x;
x += dx * easing;

float targetY = mouseY;
float dy = targetY - y;
y += dy * easing;

ellipse(x, y, 66, 66);
}

Referências

Caso você tenha interesse em se aprofundar nessa linguagem, seguem algumas referências usadas para a construção desse texto:

  • Processing.org – página oficial da linguagem, com tutoriais, biblioteca de referência, exemplos, vídeos, bibliotecas complementares e muito mais.
  • Curso no FutureLearn – esse curso ministrado em inglês usa o básico do Processing para falar sobre arte gerativa, com vários exemplos de códigos e aplicações.