Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Visualizao por Computador: Teoria, Prtica e

Aplicaes
Gerando Grficos com Processing

Claudio Esperana
Programa de Engenharia de Sistemas e Computao
COPPE / UFRJ

Master of Information Management, 2008

Introduo

Ambiente

Tutorial via exemplos

Sumrio
1

Introduo

Ambiente

Tutorial via exemplos

Desenho simples
Atributos de traado
Variveis e comandos de controle
Exibio contnua
Interao
Orientao a objetos

Desenhando com Processing

Primitivas simples
Curvas Bzier
Propriedades de traado
Cor

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

O que ?

O nome Processing refere-se tanto a uma linguagem quanto

a um ambiente de programao (IDE)
Foi criada com os objetivos de:
Servir como ferramenta educacional para o aprendizado de
programao
Permitir a construo de software grfico
Ser atraente tanto para artistas, designers, programadores
visuais quanto para profissionais de p. d.
Permitir o uso em na WWW
Encorajar o desenvolvimento atravs de experimentao
(sketches)
Prover um caminho de migrao para ambientes profissionais
(Java)

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Por que processing?

Ambiente razoavelmente amigvel

Curva de aprendizado relativamente pouco inclinada
Permite fazer grficos simples com poucas linhas de cdigo
Adequada para aplicaes web "client-side"
Existe inclusive uma verso de processing em JavaScript

Java, essencialmente
J conhecido por muitos profissionais
Multiplataforma
Desempenho razovel

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Por que no?

Java, essencialmente
Desempenho pode ser insuficiente para algumas aplicaes
Nvel de abstrao sofrvel
Escreve-se muito para fazer pouco
No totalmente orientada a objetos

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Onde comear?

O ambiente Processing pode ser baixado diretamente do site

http://www.processing.org
Multiplataforma
Instalao auto-contida

O site tem diversos recursos para aprendizado e uma relao

de livros
Esta apresentao pressupe conhecimento rudimentar de
programao
Recomenda-se
Comprar um ou mais livros
Ler os tutoriais do site
Praticar a programao com processing

Introduo

Ambiente

O ambiente Processing

Tutorial via exemplos

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

O ambiente Processing - janela de exibio

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

O ambiente Processing
Interface segue IDE tradicional com menus, uma barra de
ferramentas, um editor de textos com abas, painis para
mensagens e para sada textual
Na documentao, o ambiente chamado de PDE
(Processing Development Environment)
Programas feitos com Processing so chamados de sketches e
podem ser compostos de diversos arquivos de cdigo e outros
recursos como imagens, fontes, bibliotecas, etc
Os sketches so guardados como subdiretrios de uma pasta
chamada sketchbook
Ao executar um sketch, este compilado (caso seja
necessrio) e uma janela com o resultado exibida
O ambiente j vem com diversos exemplos incluidos que
podem ser carregados e visualizados usando o menu File >
Examples

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

A barra de ferramentas
Run: Compila se necessrio e executa o sketch corrente. Se
a tecla shift estiver apertada, a exibio ser em tela cheia
Stop: Termina a execuo do sketch
New: Cria um novo sketch na janela atual. Para criar outra
janela, usar File > New
Open: Abre outro sketch na mesma janela. Para abrir em
outra janela usar File > Open
Save: Salva o sketch no diretrio default. Para usar outro
nome, usar File > Save As
Export: Exporta o sketch como um applet (ou aplicao,
se shift estiver apertado) Java embutido num arquivo html.
Clique no arquivo index.html da pasta criada para carregar
o programa num navegador

Introduo

Ambiente

Tutorial via exemplos

Um primeiro exemplo - cdigo

line (10 ,
line (20 ,
line (30 ,
line (40 ,
line (50 ,

80,
80,
80,
80,
80,

30,
40,
50,
60,
70,

40);
40);
40);
40);
40);

// Linha esquerda
// Linha central
// Linha esquerda

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Um primeiro exemplo - resultado

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Um primeiro exemplo - detalhes

// indica que o restante da linha comentrio

A funo line() possui como parmetros as coordenadas x e
y das extremidades do segmento de reta a ser desenhado
Sistema de coordenadas tm origem no canto superior
esquerdo da janela
Coordenadas so dadas por default em pixels
Janela default tem 100 100 pixels

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Atributos de traado - cdigo

background (0);
stroke (255);
strokeWeight (5);
smooth ();
line (10 ,
line (20 ,
line (30 ,
line (40 ,
line (50 ,

80,
80,
80,
80,
80,

30,
40,
50,
60,
70,

//
//
//
//
40);
40);
40);
40);
40);

Limpa a tela com cor de fundo

Cor de traado
Largura do trao
Arestas mais suaves

// Linha esquerda
// Linha central
// Linha esquerda

Introduo

Ambiente

Tutorial via exemplos

Atributos de traado - resultado

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Atributos de traado - detalhes

background() seleciona a cor de fundo e limpa a tela

stroke() especifica a cor de traado de linhas
Cores quando especificadas por 1 nmero de 0 a 255 indicam
tons de cinza entre preto e branco
Cores podem tambm ser especificadas por 3 nmeros de 0 a
255 relativas a um sistema de cores (RGB / HSB)

strokeWeight() d a largura do trao em pixels

smooth() indica que tcnicas antiserrilhado devem ser usadas
para suavizar o trao
O inverso especificado com noSmooth()

Introduo

Ambiente

Tutorial via exemplos

Variveis e comandos de controle - cdigo

background (0);
stroke (255);
strokeWeight (5);
smooth ();

//
//
//
//

Cor de fundo
Cor de traado
Largura do trao
Arestas mais suaves

// Desenha cinco retas inclinadas

int x0 = 10;
int y0 = 80;
for (int i = 0; i < 5; i++) {
int x = x0 + i*10;
line(x, y0 , x+20, y0 -40);
}

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Variveis e comandos de controle - detalhes

Variveis tm que ser declaradas precedidas de seu tipo antes

de serem usadas
Tipos primitivos incluem int, float e String
Tipos podem ser classes definidas no programa ou em
bibliotecas
Expresses aritmticas usam operadores como +, -, * e /
Comandos de repetio incluem for, while e do while
Repetio pode ser interrompida com o comando break
Lao corrente pode ser interrompido com o comando
continue

Comandos condicionais incluem if e switch

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Exibio contnua - cdigo

int x0 = 10;
int y0 = 80;
void setup () {
size (200 ,200);
stroke (255);
strokeWeight (5);
smooth ();
}

//
//
//
//

Tamanho da janela
Cor de traado
Largura do trao
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);
}
x0 += 1; // Move desenho para a direita
if (x0 >=200) x0 = 0;
}

Introduo

Ambiente

Tutorial via exemplos

Exibio contnua - resultado

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Exibio contnua - detalhes

A definio das funes setup() e draw() faz a aplicao

funcionar em modo de exibio contnua
Permite que o desenho mude com o tempo
Animaes e interao

setup() executada automaticamente uma nica vez para

inicializar a janela e outras variveis de estado
A funo size() especifica largura e altura da janela de
exibio
size() tem que ser a primeira funo a ser chamada
As variveis screen.width e screen.height contm a
largura e altura total da tela do computador
Podem ser usadas para estabelecer janelas de tamanho
proporcional resoluo da tela do computador

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Exibio contnua - detalhes (cont.)

draw() chamada continuamente para desenhar outro

quadro da animao
Chamada 60 por segundo por default (use frameRate()
para alterar)
Se o quadro todo tem que ser redesenhado (numa animao),
comece chamando background()
A largura e altura da tela podem ser consultadas atravs das
variveis de sistema width e height

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Interao 1 - cdigo
void setup () {
size (200 ,200);
stroke (255);
strokeWeight (5);
smooth ();
}

//
//
//
//

Tamanho da janela
Cor de traado
Largura do trao
Arestas mais suaves

void draw () {
background (0);
int x0 = mouseX ;
int y0 = mouseY ;

// Posio inicial a partir

// ... da posio do mouse

for (int i = 0; i < 5; i++) {

int x = x0 + i*10;
line(x, y0 , x+20, y0 -40);
}
}

Introduo

Ambiente

Interao 1 - resultado

Tutorial via exemplos

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Interao 1 - detalhes

O acesso ao estado de dispositivos de entrada feito atravs

de variveis do sistema (variveis globais) ou de rotinas
callback
As variveis mouseX e mouseY do a posio corrente do
sistema
A varivel mousePressed tem valor true ou false e diz se
h algum boto do mouse pressionado
A varivel mouseButton tem valor LEFT, RIGHT, ou CENTER e
diz qual boto est pressionado

Introduo

Ambiente

Tutorial via exemplos

Interao 2 - cdigo (parte 1)

int [] x = new int [256];
int [] y = new int [256];
int n = 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;
}

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Interao 2 - cdigo (parte 2)

void setup () {
size (200 ,200);
strokeWeight (3);
smooth ();
}

// Tamanho da janela
// Largura do trao
// Arestas mais suaves

void diagonais (int x0 , int y0) {

for (int i = 0; i < 3; i++) {
int x = x0 + i*10;
line(x, y0 , x+20, y0 -40);
}
}
void draw () {
background (0);
for (int i = 0; i < n; i++) {
stroke (256+i-n); // Cor progressivamente mais branca
diagonais (x[i],y[i]);
}
}

Introduo

Ambiente

Interao 2 - resultado

Tutorial via exemplos

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Interao 2 - detalhes

As funes mousePressed(), mouseReleased() e

mouseDragged(), se definidas num sketch, so chamadas
automaticamente na ocorrncia de um evento
mousePressed() chamada sempre que algum boto do
mouse for pressionado
mouseReleased() chamada sempre que algum boto do
mouse for largado
mouseDragged() chamada sempre que o mouse for
movimentado com algum boto pressionado

Introduo

Ambiente

Tutorial via exemplos

Classes - cdigo (parte 1)

class LinhaPoligonal {
int [] x = new int [256];
int [] y = new int [256];
int n = 0;
void adiciona (int x, int y) {
// adiciona um ponto linha poligonal
if (n == 256) return ;
this.x[n] = x;
this.y[n] = y;
n++;
}
void desenha () {
for (int i = 0; i < n -1; i++) {
line (x[i], y[i], x[i+1], y[i+1]);
}
}
}

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Classes - cdigo (parte 2)

LinhaPoligonal l[] = new LinhaPoligonal [100];
int nl = 0;
void mousePressed () {
if ( mouseButton == LEFT) {
// Cria mais um trao
if (nl < 100) {
l [nl] = new LinhaPoligonal ();
l [nl ]. adiciona (mouseX , mouseY );
nl ++;
}
} else if ( mouseButton == RIGHT) {
// Apaga todos os traos
nl = 0;
}
}
void mouseDragged () {
// Estende a linha poligonal corrente
l [nl -1]. adiciona (mouseX , mouseY );
}

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Classes - cdigo (parte 3)

void setup () {
size (200 ,200);
strokeWeight (3);
stroke (255);
smooth ();
}

//
//
//
//

Tamanho da janela
Largura do trao
Trao em branco
Arestas mais suaves

void draw () {
background (0);
for (int i = 0; i < nl; i++) {
l [i]. desenha ();
}
}

Introduo

Ambiente

Classes - resultado

Tutorial via exemplos

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Classes - detalhes
Bibliotecas de cdigo so frequentemente estruturadas em
classes
Classes encapsulam estruturas de dados e algoritmos
Classes so fbricas de objetos que possuem funcionalidades
em comum
Objetos so instncias de classes (criados com new classe)
Elementos (funes ou variveis) associados a objetos so
chamados de membros
Funes associadas a objetos so chamadas de mtodos
Variveis associadas a objetos so chamadas de atributos
Um membro de um objeto referido por objeto.membro
Dentro da classe, membros podem ser referidos por
this.membro

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Funes para desenho de primitivas simples

point (x , y )
line (x1 , y1 , x2 , y2 )
triangle (x1 , y1 , x2 , y2 , x3 , y3 )
quad (x1 , y1 , x2 , y2 , x3 , y3 , x4 , y4 )
rect (x , y , width, height)
ellipse (x , y , width, height)

Ponto
Segmento de reta
Tringulo
Quadriltero
Retngulo alinhado
com os eixos
Elipse alinhada com
os eixos

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Primitivas simples - exemplo

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);
}
}

Introduo

Ambiente

Tutorial via exemplos

Primitivas simples - resultado

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Curvas Bzier cbicas

Curvas Bzier cbicas podem ser traadas usando a funo

bezier(x1 , y1 , x2 , y2 , x3 , y3 , x4 , y4 )
O primeiro e o ltimo ponto definem o incio e o final da curva
O segundo e o terceiro ponto definem as tangentes com
relao ao primeiro e o ltimo ponto, respectivamente

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Curvas Bzier cbicas - exemplo

int x[] = new int [4];
int n = 0;

int y[] = new int [4];

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

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);
}
}

Introduo

Ambiente

Tutorial via exemplos

Curvas Bzier cbicas - resultado

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Propriedades de linhas

stroke (color )
noStroke ()
strokeWeight (thickness)
strokeCap (style)
strokeJoin (style)
smooth ()
noSmooth ()

Cor da linha
Linha no traada
Largura da linha
Estilo de terminao da linha
(ROUND, SQUARE, ou PROJECT)
Estilo de juno de linhas (BEVEL,
MITER, ou ROUND)
Liga antialiasing
Desliga antialiasing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Propriedades de linhas - exemplo 1

size (200 ,200);

smooth ();
line (40 , 40, 160 , 40); // Linha default
strokeWeight (6);
line (40 , 80, 160 , 80); // Linha mais larga
strokeWeight (18);
line (40 , 140 , 160 , 140); // Linha super - larga

Introduo

Ambiente

Tutorial via exemplos

Propriedades de linhas - exemplo 2

size (200 ,200);

smooth ();
strokeWeight (16);
strokeCap ( ROUND );
line (40 , 40, 160 , 40);
strokeCap ( SQUARE );
line (40 , 90, 160 , 90);
strokeCap ( PROJECT );
line (40 , 140 , 160 , 140);

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Propriedades de linhas - exemplo 3

size (200 ,200);

smooth ();
strokeWeight (16);
strokeJoin ( BEVEL );
rect (24 , 66, 30, 66); // Esquerda
strokeJoin ( MITER );
rect (82 , 66, 30, 66); // Meio
strokeJoin ( ROUND );
rect (144 , 66, 30, 66); // Direita

Desenhando com Processing

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Propriedades de preenchimento

A funo fill (cor ) especifica a cor para preenchimento de

figuras com rea (ellipse, rect, quad, bezier, etc)
A funo noFill inibe o preenchimento
rect (10 , 10, 50, 50);
fill (204); // Cinza claro
rect (20 , 20, 50, 50);
fill (153); // Cinza mdio
rect (30 , 30, 50, 50);
fill (102); // Cinza escuro
rect (40 , 40, 50, 50);

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Transparncia
Tanto stroke() quanto fill() admitem um segundo
parmetro que controla a transparncia da cor
Transparncia 0 significa totalmente transparente e 255
totalmente opaco
O atributo transparncia tambm conhecido como canal
alfa simplesmente alfa
size (200 ,200);
fill (0);
rect (0, 80, 200 , 40);
fill (255 , 51);
// Bastante transparente
rect (0, 40, 66, 120);
fill (255 , 127); // Transparncia mdia
rect (66, 40, 66, 120);
fill (255 , 204); // Bastante opaco
rect (132 , 40, 66, 120);

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Modos de especificao de formas

O significado dos parmetros das funes rect() e

ellipse() podem ser alterados pelas funes
rectMode(modo) e ellipseMode(modo), onde modo pode
ser
CENTER
RADIUS
CORNER
CORNERS

x e y do centro, largura e altura (default para

ellipse)
x e y do centro, largura/2 e altura/2
x e y do canto superior esquerdo, largura e altura (default para rect)
x e y do canto superior esquerdo, x e y do canto
inferior direito

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Modos de especificao de formas - exemplo 1

size (200 ,200);

smooth ();
noStroke ();
ellipseMode ( RADIUS );
fill (80);
ellipse (66 , 66, 120 , 120);
ellipseMode ( CENTER );
fill (160);
ellipse (66 , 66, 120 , 120);
fill (255);
ellipseMode ( CORNER );
ellipse (66 , 66, 120 , 120);
fill (0);
ellipseMode ( CORNERS );
ellipse (66 , 66, 120 , 120);

// Elipse cinza escuro

// Elipse cinza claro

// Elipse branca

// Elipse preta

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Modos de especificao de formas - exemplo 2

size (200 ,200);

smooth ();
noStroke ();
rectMode ( RADIUS );
fill (80);
rect (66 , 66, 120 , 120);
rectMode ( CENTER );
fill (160);
rect (66 , 66, 120 , 120);
fill (255);
rectMode ( CORNER );
rect (66 , 66, 120 , 120);
fill (0);
rectMode ( CORNERS );
rect (66 , 66, 120 , 120);

// retngulo cinza escuro

// retngulo cinza claro

// retngulo branco

// retngulo preto

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Cor

As funes fill(), stroke() e background() podem

especificar cores atravs de trs nmeros
O significado desses 3 nmeros depende do sistema de cores
vigente
Por default, o sistema adotado o RGB (Red, Green, Blue)
Os 3 nmeros entre 0 e 255 indicam a proporo de vermelho,
verde e azul presentes na cor
Por exemplo, stroke(255,255,0) significa que a cor do trao
amarela (100% de vermelho + 100% de verde)

fill() e stroke() tambm suportam um quarto parmetro

indicando transparncia

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Especificando cor - exemplo

size (200 ,200);

background (255 ,255 ,0); // Amarelo
fill (0 ,0 ,128); // Azul escuro
strokeWeight (10);
stroke (255 ,128 ,128); // Rosa
rect (50 , 50, 100 , 100);
stroke (0 ,0 ,0 ,128); // Preto transparent
line (0 ,0 ,200 ,200);

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Efeito da transparncia

Como o uso de transparncia cumulativo, o efeito depende

da ordem de desenho
size (200 ,200);
background (255);
smooth ();
noStroke ();
// circulos coloridos
fill (255 ,128 ,0 , 128);
fill (128 ,0 ,255 , 128);
fill (0 ,255 ,128 , 128);
// circulos coloridos
fill (0 ,255 ,128 , 128);
fill (128 ,0 ,255 , 128);
fill (255 ,128 ,0 , 128);

da esquerda para a direita

ellipse (50 ,50 ,100 ,100);
ellipse (100 ,50 ,100 ,100);
ellipse (150 ,50 ,100 ,100);
da direita para a esquerda
ellipse (150 ,150 ,100 ,100);
ellipse (100 ,150 ,100 ,100);
ellipse (50 ,150 ,100 ,100);

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Cores em hexadecimal
A notao hexadecimal (base 16) tambm pode ser usada
para especificar cores
Mtodo popular com web designers
Usado em HTML e CSS

Constante hexadecimal especificada com smbolo # seguido de

6 dgitos hexadecimais (0-9, A-F), sendo 2 dgitos para cada
componente. Por exemplo:
RGB
255, 255,
0, 0, 0
102, 153,
195, 244,
116, 206,

255
204
59
206

Hex
#FFFFFF
#000000
#6699CC
#C3F43B
#74CECE

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

O tipo color

Variveis do tipo color podem ser usadas para armazenar

informao de cor
A funo color () constri valores do tipo color usando
uma sintaxe similar das funes stroke () e fill()
Exemplo:
color c1 = color (51);
//
color c2 = color (51 ,204);
//
color c3 = color (51 ,102 ,153);
//
color c4 = color (51 ,102 ,153 ,51); //
stroke (c1 );
fill(c4 );

Cinza
Cinza transparente
Azul
Azul transparente

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Sistemas de cores

O sistema RGB bastante prximo da maneira pela qual

cores so processadas e exibidas por um computador, mas
pouco intuitivo
A especificao de cores com o sistema HSB (Hue, Saturation
and Brightness), tambm conhecido como HSV (Value),
permite uma melhor abstrao
Sistemas como o HSB so conhecidos como sistemas de
interface

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

Alterando o sistema de cores

Para alterar como o Processing interpreta especificaes de

cores pode-se usar uma das seguintes formas
colorMode(mode)
colorMode(mode, range)
colorMode(mode, range, range, range)

onde mode pode ser RGB ou HSB e range um nmero que

especifica o valor mximo que cada coordenada de cor pode
assumir
Uma especificao bastante til colorMode(HSB, 360,
100, 100) j que a coordenada Hue corresponde a um ngulo

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

O sistema HSB (HSV)

Slido de cor uma pirmide
hexagonal invertida
Coordenadas correspondem ao
matiz, saturao e valor
Hexgono correspondente a V = 1
uma projeo do cubo RGB
Hue (matiz) corresponde a um
ngulo ao redor do eixo do cone
Saturao o afastamento em
relao ao eixo da pirmide
Valor a altura com relao ao
pice (preto)

Introduo

Ambiente

Tutorial via exemplos

Desenhando com Processing

O sistema HSB - exemplo

size (360 ,300);

colorMode (HSB ,360 ,1.0 ,1.0);
for (int i = 0; i < 360; i++) {
stroke (i, 1, 1); // Matiz i
line(i, 0, i, 100);
for (float j = 0.0; j <= 1; j +=0.01) {
stroke (i,j ,1);
// Saturao j
point (i ,100+100* j);
stroke (i,1,j);
// Valor j
point (i ,200+100* j);
}
}