Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Interatividade
Introdução ao Processing
Claudio Esperança
1 Introdução ao Processing
2 Ambiente
3 Tutorial via exemplos
Desenho simples
Atributos de traçado
Variáveis e comandos de controle
Exibição contínua
Interação
Orientação a objetos
4 Desenhando com Processing
Primitivas simples
Curvas Bézier
Propriedades de traçado
Cor
É Java, essencialmente
Desempenho pode ser insuficiente para algumas aplicações
Nível de abstração sofrível
Escreve-se muito para fazer pouco
Não é totalmente orientada a objetos
void setup () {
size (200 ,200); // Tamanho da janela
stroke (255); // Cor de traçado
strokeWeight (5); // Largura do traço
smooth (); // Arestas mais suaves
}
void draw () {
background (0);
for (int i = 0; i < 5; i++) {
int x = x0 + i*10;
line(x, y0 , x+20, y0 -40);
}
void setup () {
size (200 ,200); // Tamanho da janela
stroke (255); // Cor de traçado
strokeWeight (5); // Largura do traço
smooth (); // Arestas mais suaves
}
void draw () {
background (0);
void mousePressed () {
n = 1;
x[0] = mouseX ; y[0] = mouseY ;
}
void mouseDragged () {
if (n <256) {
x[n] = mouseX ; y[n] = mouseY ;
n++;
}
}
void mouseReleased () {
n = 0;
}
void draw () {
background (0);
for (int i = 0; i < n; i++) {
stroke (256+i-n); // Cor progressivamente mais branca
diagonais (x[i],y[i]);
}
}
Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 32 / 68
Interação 2 - resultado
class LinhaPoligonal {
int [] x = new int [256];
int [] y = new int [256];
int n = 0;
void desenha () {
for (int i = 0; i < n -1; i++) {
line (x[i], y[i], x[i+1], y[i+1]);
}
}
}
void mousePressed () {
if ( mouseButton == LEFT) {
// Cria mais um traço
if (nl < 100) {
l [nl] = new LinhaPoligonal ();
l [nl ]. adiciona (mouseX , mouseY );
nl ++;
}
} else if ( mouseButton == RIGHT) {
// Apaga todos os traços
nl = 0;
}
}
void mouseDragged () {
// Estende a linha poligonal corrente
l [nl -1]. adiciona (mouseX , mouseY );
}
Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 37 / 68
Classes - código (parte 3)
void setup () {
size (200 ,200); // Tamanho da janela
strokeWeight (3); // Largura do traço
stroke (255); // Traço em branco
smooth (); // Arestas mais suaves
}
void draw () {
background (0);
for (int i = 0; i < nl; i++) {
l [i]. desenha ();
}
}
point (x , y ) Ponto
line (x1 , y1 , x2 , y2 ) Segmento de reta
triangle (x1 , y1 , x2 , y2 , x3 , y3 ) Triângulo
quad (x1 , y1 , x2 , y2 , x3 , y3 , x4 , y4 ) Quadrilátero
rect (x , y , width, height) Retângulo alinhado
com os eixos
ellipse (x , y , width, height) Elipse alinhada com os
eixos
void setup () {
size (300 ,300);
}
void draw () {
int d = 40;
for (int x = 0; x < 300; x+=d) {
int y = d; point (x, y);
y+=d; line (x, y, x+d, y-d/2);
y+=d; ellipse (x,y,d*0.7 ,d *0.5);
y+=d; triangle (x,y,x+d/2,y-d, x+d, y);
y+=d; quad (x, y, x+d/2, y-d/2, x+d, y, x+d/2, y+d/2);
y+=d; rect (x, y, d/2, d/2);
}
}
void mousePressed () {
if (n==4) n = 0;
x[n] = mouseX ; y[n] = mouseY ; n++;
}
void draw () {
background (200);
if (n==4) {
bezier (x[0] ,y[0],x[1],y[1],x[2],y[2],x[3],y[3]);
line (x[0] ,y[0],x[1],y[1]);
line (x[2] ,y[2],x[3],y[3]);
ellipse (x[1] ,y[1] ,4 ,4);
ellipse (x[2] ,y[2] ,4 ,4);
}
}
Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 47 / 68
Curvas Bézier cúbicas - resultado