13/10/2014

Processing
http://www.processing.org
Cláudio L. V. Oliveira
prof.claudioluis@fatecjd.edu.br
Outubro de 2014

Processing
• Processing é uma linguagem de programação
gratuita e de código aberto construída para
artes eletrônicas e projetos visuais;
• Tem como principal objetivo ensinar noções
básicas de programação de computador em
um contexto visual;
• Projeto iniciado em 2001 por Casey Reas e
Ben Fry, ambos ex-membros do Grupo de
Computação do MIT Media Lab.

1
 13/10/2014

Processing
• O IDE da Processing inclui um sketchbook,
uma alternativa para organizar projetos sem
adotar o padrão utilizado na maioria das IDEs.
• Os sketches (programas) criados são uma
subclasse do Java Papplet, classe que
implementa a maioria das funcionalidades da
Processing.
• Ao compilar todo o código do sketch é
traduzido para Java.

Processing
• IDE da Processing:

2
 13/10/2014

Processing
• Um dos objetivos da Processing é atuar como
uma ferramenta para não-programadores ou
iniciantes em programação, através da
satisfação imediata com um retorno visual,
por exemplo:

println("Olá Pessoal!");

Processing
• Fácil e rápido retorno visual, por exemplo,
desenho de uma elipse:

size (200, 200); // Tamanho da tela

ellipse (100, 100, 190, 190);

3
 13/10/2014

Processing
• Definição de cores (método fill). Um único
parâmetro entre 0 e 255 realizar o
preenchimento em uma escala de tons de
cinza:

size (200, 200);

fill (0);
ellipse (100, 100, 190, 190);

Processing
• Definição de cores (método fill). Três
parâmetros entre 0 e 255 realizar o
preenchimento no padrão RGB:

size (200, 200);

fill(255, 255, 0);
ellipse (100, 100, 190, 190);

4
 13/10/2014

Processing
• Desenho de um retângulo:

size (200, 200);

rect (5, 5, 190, 190);

Processing
• Exibição de texto no contexto gráfico:

size(200, 200);
fill(0);
text("Olá Pessoal!", 10, 20);

5
 13/10/2014

Processing
• Estrutura básica de um sketch:

void setup() {
size(200, 200);
noLoop();
}

void draw() {
fill (0);
text("Olá Pessoal!", 10, 20);
}

Processing
• Unindo os conceitos para desenvolver
pequenos sketches:
void setup() {
size(200, 200);
noLoop();
}

void draw() {
fill(0);
rect (5, 5, 80, 20);
fill (255);
text("Olá Pessoal!", 10, 20);
}

6
 13/10/2014

Processing
• Animação simples:
int i = 10;

void setup() {
size(200, 200);
}

void draw() {
background(0);
fill (255);
text("Olá Pessoal!", 10, i);
delay(150);
i = i + 10;
if (i > height)
i = 10;
}

Processing
• Fontes e alinhamento do texto:

int i = 10;

void setup() {
size(200, 200);
textFont(createFont("SansSerif",18));
textAlign(CENTER);
}

// Implementar o método draw() ...

7
 13/10/2014

Processing
• Outra animação:
int i = 10, p = 10;

void setup() {
size(200, 200);
}

void draw() {
background(0);
fill (0, 255, 0);
ellipse (width/2, i, 25, 25);
delay(100);
i = i + p;
if ((i > height) || (i < 0))
p = p * -1;
}

Processing
• Utilização de imagens:
PImage bola;
int i = 10, p = 10;

void setup() {
size(200, 200);
bola = loadImage("bola.gif");
}

void draw() {
background(0);
fill (0, 255, 0);
image (bola, width/2, i);
delay(100);
i = i + p;
if ((i > (height - bola.height)) || (i < 0))
p = p * -1;
}

8
 13/10/2014

Processing
• Eventos do mouse:
void setup() {
frame.setTitle("UsoMouse");
size (360, 180);
fill (255); // Cor branca
}

void draw() {
if (mousePressed) {
ellipse(mouseX, mouseY, 100, 100);
}
else {
rect(mouseX, mouseY, 100, 100);
}
}

Processing

• Bibliotecas – Exemplo G4P (GUI for

Processing):

9
 13/10/2014

Processing
• Bibliotecas:
import g4p_controls.*;
GLabel lNome;
GTextField tNome;
String imagens[];
GImageButton botao;

void setup() {
frame.setTitle("Biblioteca G4P");
size (360, 180);
background(245);
lNome = new GLabel(this, 10, 20, 340, 20, "Digite o seu
nome:");
tNome = new GTextField(this, 10, 40, 340, 20);
imagens = new String[] {"botao-ok.png", "botao-ok.png",
"botao-ok-press.png" };
botao = new GImageButton(this, 10, 70, imagens);
}

Processing
• Bibliotecas:
void draw() {
}

public void handleButtonEvents(GImageButton

controle, GEvent evento) {
if (controle == botao) {
fill(0);
textFont(createFont("SansSerif",18));
text ("Olá, " + tNome.getText(), 10, 160);
}
}

10