Processing é uma linguagem de programação gratuita e de código aberto para artes eletrônicas e projetos visuais. Foi iniciado em 2001 por Casey Reas e Ben Fry para ensinar programação de forma visual. Sua IDE inclui um sketchbook para organizar projetos e compila código para Java, permitindo desenvolver animações, interfaces gráficas e lidar com eventos do mouse de forma simples.

1. 13/10/2014
1
Processing
http://www.processing.org
Cláudio L. V. Oliveira
prof.claudioluis@fatecjd.edu.br
Outubro de 2014
• 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.
Processing

2. 13/10/2014
2
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:

3. 13/10/2014
3
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);

4. 13/10/2014
4
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);

5. 13/10/2014
5
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);

6. 13/10/2014
6
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);
}

7. 13/10/2014
7
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() ...

8. 13/10/2014
8
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;
}

9. 13/10/2014
9
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):

10. 13/10/2014
10
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);
}
}