Você está na página 1de 58

Workshop Processing: Visualização de Dados e

Interatividade
Introdução ao Processing

Claudio Esperança

Programa de Engenharia de Sistemas e Computação


COPPE / UFRJ

Escola de Belas Artes

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 1 / 68


Sumário

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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 2 / 68


O que é?

O nome “Processing” refere-se tanto a uma linguagem quanto a um


ambiente de programação (IDE)
Objetivos
Ferramenta educacional para o aprendizado de programação
Construção de software gráfico
Atraente para público não técnico
Permitir o uso na web
Desenvolvimento através de experimentação (sketches)
Fácil migração para ambientes profissionais (Java)

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 3 / 68


Por que processing?

Ambiente razoavelmente amigável


Curva de aprendizado relativamente pouco inclinada
Permite fazer gráficos simples com poucas linhas de código
Adequada para aplicações web "client-side"
Existe inclusive uma versão de processing em JavaScript
É Java, essencialmente
Já conhecido por muitos profissionais
Multiplataforma
Desempenho razoável

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 4 / 68


Por que não?

É 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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 5 / 68


Onde começar?

O ambiente Processing pode ser baixado diretamente do site


http://www.processing.org
Multiplataforma
Instalação auto-contida
O site tem diversos recursos para aprendizado e uma relação de livros
Esta apresentação pressupõe conhecimento rudimentar de
programação
Recomenda-se
Comprar um ou mais livros
Ler os tutoriais do site
Praticar a programação com processing

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 6 / 68


O ambiente Processing

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 7 / 68


O ambiente Processing - janela de exibição

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 8 / 68


O ambiente Processing

Interface segue IDE tradicional com menus, uma barra de


ferramentas, um editor de textos com abas, painéis para mensagens e
para saída textual
Na documentação, o ambiente é chamado de PDE (Processing
Development Environment)
Programas feitos com Processing são chamados de sketches e podem
ser compostos de diversos arquivos de código e outros recursos como
imagens, fontes, bibliotecas, etc
Os sketches são guardados como subdiretórios de uma pasta chamada
sketchbook
Ao executar um sketch, este é compilado (caso seja necessário) 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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 9 / 68


A barra de ferramentas

Run: Compila se necessário e executa o sketch corrente. Se a


tecla shift estiver apertada, a exibição será em tela cheia
Stop: Termina a execução 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 diretório default. Para usar outro
nome, usar File > Save As
Export: Exporta o sketch como um applet (ou aplicação, se
shift estiver apertado) Java embutido num arquivo html. Cli-
que no arquivo index.html da pasta criada para carregar o
programa num navegador

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 10 / 68


Um primeiro exemplo - código

line (10, 80, 30, 40); // Linha esquerda


line (20, 80, 40, 40);
line (30, 80, 50, 40); // Linha central
line (40, 80, 60, 40);
line (50, 80, 70, 40); // Linha esquerda

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 12 / 68


Um primeiro exemplo - resultado

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 13 / 68


Um primeiro exemplo - detalhes

// indica que o restante da linha é comentário


A função line() possui como parâmetros as coordenadas x e y das
extremidades do segmento de reta a ser desenhado
Sistema de coordenadas têm origem no canto superior esquerdo da
janela
Coordenadas são dadas por default em pixels
Janela default tem 100 × 100 pixels

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 14 / 68


Atributos de traçado - código

background (0); // Limpa a tela com cor de fundo


stroke (255); // Cor de traçado
strokeWeight (5); // Largura do traço
smooth (); // Arestas mais suaves

line (10, 80, 30, 40); // Linha esquerda


line (20, 80, 40, 40);
line (30, 80, 50, 40); // Linha central
line (40, 80, 60, 40);
line (50, 80, 70, 40); // Linha esquerda

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 16 / 68


Atributos de traçado - resultado

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 17 / 68


Atributos de traçado - detalhes

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


stroke() especifica a cor de traçado de linhas
Cores quando especificadas por 1 número de 0 a 255 indicam tons de
cinza entre preto e branco
Cores podem também ser especificadas por 3 números de 0 a 255
relativas a um sistema de cores (RGB / HSB)
strokeWeight() dá a largura do traço em pixels
smooth() indica que técnicas antiserrilhado devem ser usadas para
suavizar o traço
O inverso é especificado com noSmooth()

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 18 / 68


Variáveis e comandos de controle - código

background (0); // Cor de fundo


stroke (255); // Cor de traçado
strokeWeight (5); // Largura do traço
smooth (); // 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);
}

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 20 / 68


Variáveis e comandos de controle - detalhes

Variáveis têm 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
Expressões aritméticas usam operadores como +, -, * e /
Comandos de repetição incluem for, while e do while
Repetição pode ser interrompida com o comando break
Laço corrente pode ser interrompido com o comando continue
Comandos condicionais incluem if e switch

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 21 / 68


Exibição contínua - código
int x0 = 10;
int y0 = 80;

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

x0 += 1; // Move desenho para a direita


if (x0 >=200) x0 = 0;
}
Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 23 / 68
Exibição contínua - resultado

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 24 / 68


Exibição contínua - detalhes

A definição das funções setup() e draw() faz a aplicação funcionar


em modo de exibição contínua
Permite que o desenho mude com o tempo
Animações e interação
setup() é executada automaticamente uma única vez para inicializar
a janela e outras variáveis de estado
A função size() especifica largura e altura da janela de exibição
size() tem que ser a primeira função a ser chamada
As variáveis screen.width e screen.height contêm a largura e
altura total da tela do computador
Podem ser usadas para estabelecer janelas de tamanho proporcional à
resolução da tela do computador

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 25 / 68


Exibição contínua - detalhes (cont.)

draw() é chamada continuamente para desenhar outro quadro da


animação
Chamada 60× por segundo por default (use frameRate() para alterar)
Se o quadro todo tem que ser redesenhado (numa animação), comece
chamando background()
A largura e altura da tela podem ser consultadas através das variáveis
de sistema width e height

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 26 / 68


Interação 1 - código

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

int x0 = mouseX ; // Posição inicial a partir


int y0 = mouseY ; // ... da posição do mouse

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


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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 28 / 68


Interação 1 - resultado

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 29 / 68


Interação 1 - detalhes

O acesso ao estado de dispositivos de entrada é feito através de


variáveis do sistema (variáveis globais) ou de rotinas callback
As variáveis mouseX e mouseY dão a posição corrente do sistema
A variável mousePressed tem valor true ou false e diz se há algum
botão do mouse pressionado
A variável mouseButton tem valor LEFT, RIGHT, ou CENTER e diz
qual botão está pressionado

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 30 / 68


Interação 2 - código (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;
}

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 31 / 68


Interação 2 - código (parte 2)
void setup () {
size (200 ,200); // Tamanho da janela
strokeWeight (3); // Largura do traço
smooth (); // 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]);
}
}
Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 32 / 68
Interação 2 - resultado

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 33 / 68


Interação 2 - detalhes

As funções mousePressed(), mouseReleased() e


mouseDragged(), se definidas num sketch, são chamadas
automaticamente na ocorrência de um evento
mousePressed() é chamada sempre que algum botão do mouse for
pressionado
mouseReleased() é chamada sempre que algum botão do mouse for
largado
mouseDragged() é chamada sempre que o mouse for movimentado
com algum botão pressionado

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 34 / 68


Classes - código (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]);
}
}
}

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 36 / 68


Classes - código (parte 2)
LinhaPoligonal l[] = new LinhaPoligonal [100];
int nl = 0;

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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 38 / 68


Classes - resultado

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 39 / 68


Classes - detalhes

Bibliotecas de código são frequentemente estruturadas em classes


Classes encapsulam estruturas de dados e algoritmos
Classes são fábricas de objetos que possuem funcionalidades em
comum
Objetos são instâncias de classes (criados com new classe)
Elementos (funções ou variáveis) associados a objetos são chamados
de membros
Funções associadas a objetos são chamadas de métodos
Variáveis associadas a objetos são chamadas de atributos
Um membro de um objeto é referido por objeto.membro
Dentro da classe, membros podem ser referidos por this.membro

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 40 / 68


Funções para desenho de primitivas simples

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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 42 / 68


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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 43 / 68


Primitivas simples - resultado

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 45 / 68


Curvas Bézier cúbicas

Curvas Bézier cúbicas podem ser traçadas usando a função


bezier(x1 , y1 , x2 , y2 , x3 , y3 , x4 , y4 )

O primeiro e o último ponto definem o início e o final da curva


O segundo e o terceiro ponto definem as tangentes com relação ao
primeiro e o último ponto, respectivamente

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 46 / 68


Curvas Bézier cúbicas - exemplo
int x[] = new int [4]; int y[] = new int [4];
int n = 0;

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);
}
}
Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 47 / 68
Curvas Bézier cúbicas - resultado

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 48 / 68


Propriedades de linhas

stroke (color ) Cor da linha


noStroke () Linha não é traçada
strokeWeight (thickness) Largura da linha
strokeCap (style) Estilo de terminação da linha (ROUND,
SQUARE, ou PROJECT)
strokeJoin (style) Estilo de junção de linhas (BEVEL,
MITER, ou ROUND)
smooth () Liga antialiasing
noSmooth () Desliga antialiasing

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 50 / 68


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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 51 / 68


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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 52 / 68


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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 53 / 68


Propriedades de preenchimento

A função fill (cor ) especifica a cor para preenchimento de figuras


com área (ellipse, rect, quad, bezier, etc)
A função noFill inibe o preenchimento

rect (10 , 10, 50, 50);


fill (204); // Cinza claro
rect (20 , 20, 50, 50);
fill (153); // Cinza médio
rect (30 , 30, 50, 50);
fill (102); // Cinza escuro
rect (40 , 40, 50, 50);

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 54 / 68


Transparência

Tanto stroke() quanto fill() admitem um segundo parâmetro


que controla a transparência da cor
Transparência 0 significa totalmente transparente e 255 totalmente
opaco
O atributo ‘transparência’ também é 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); // Transparência média
rect (66 , 40, 66, 120);
fill (255 , 204); // Bastante opaco
rect (132 , 40, 66, 120);

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 55 / 68


Modos de especificação de formas

O significado dos parâmetros das funções rect() e ellipse()


podem ser alterados pelas funções rectMode(modo) e
ellipseMode(modo), onde modo pode ser

CENTER x e y do centro, largura e altura (default para ellipse)


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

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 56 / 68


Modos de especificação de formas - exemplo 1

size (200 ,200);


smooth ();
noStroke ();
ellipseMode ( RADIUS );
fill (80);
ellipse (66 , 66, 120 , 120); // Elipse cinza escuro
ellipseMode ( CENTER );
fill (160);
ellipse (66 , 66, 120 , 120); // Elipse cinza claro
fill (255);
ellipseMode ( CORNER );
ellipse (66 , 66, 120 , 120); // Elipse branca
fill (0);
ellipseMode ( CORNERS );
ellipse (66 , 66, 120 , 120); // Elipse preta

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 57 / 68


Modos de especificação de formas - exemplo 2

size (200 ,200);


smooth ();
noStroke ();
rectMode ( RADIUS );
fill (80);
rect (66 , 66, 120 , 120); // retângulo cinza escuro
rectMode ( CENTER );
fill (160);
rect (66 , 66, 120 , 120); // retângulo cinza claro
fill (255);
rectMode ( CORNER );
rect (66 , 66, 120 , 120); // retângulo branco
fill (0);
rectMode ( CORNERS );
rect (66 , 66, 120 , 120); // retângulo preto

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 58 / 68


Cor

As funções fill(), stroke() e background() podem especificar


cores através de três números
O significado desses 3 números depende do sistema de cores vigente
Por default, o sistema adotado é o RGB (Red, Green, Blue)
Os 3 números entre 0 e 255 indicam a proporção de vermelho, verde e
azul presentes na cor
Por exemplo, stroke(255,255,0) significa que a cor do traço é
amarela (100% de vermelho + 100% de verde)
fill() e stroke() também suportam um quarto parâmetro
indicando transparência

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 60 / 68


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 transparente
line (0 ,0 ,200 ,200);

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 61 / 68


Efeito da transparência

Como o uso de transparência é cumulativo, o efeito depende da


ordem de desenho

size (200 ,200);


background (255);
smooth ();
noStroke ();
// circulos coloridos da esquerda para a direita
fill (255 ,128 ,0 , 128); ellipse (50 ,50 ,100 ,100);
fill (128 ,0 ,255 , 128); ellipse (100 ,50 ,100 ,100);
fill (0 ,255 ,128 , 128); ellipse (150 ,50 ,100 ,100);
// circulos coloridos da direita para a esquerda
fill (0 ,255 ,128 , 128); ellipse (150 ,150 ,100 ,100);
fill (128 ,0 ,255 , 128); ellipse (100 ,150 ,100 ,100);
fill (255 ,128 ,0 , 128); ellipse (50 ,150 ,100 ,100);

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 62 / 68


Cores em hexadecimal

A notação hexadecimal (base 16) também pode ser usada para


especificar cores
Método popular com web designers
Usado em HTML e CSS
Constante hexadecimal especificada com símbolo # seguido de 6
dígitos hexadecimais (0-9, A-F), sendo 2 dígitos para cada
componente. Por exemplo:
RGB Hex
255, 255, 255 #FFFFFF
0, 0, 0 #000000
102, 153, 204 #6699CC
195, 244, 59 #C3F43B
116, 206, 206 #74CECE

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 63 / 68


O tipo color

Variáveis do tipo color podem ser usadas para armazenar informação


de cor
A função color () constrói valores do tipo color usando uma
sintaxe similar à das funções stroke () e fill()
Exemplo:
color c1 = color (51); // Cinza
color c2 = color (51 ,204); // Cinza transparente
color c3 = color (51 ,102 ,153); // Azul
color c4 = color (51 ,102 ,153 ,51); // Azul transparente
stroke (c1);
fill(c4);

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 64 / 68


Sistemas de cores

O sistema RGB é bastante próximo da maneira pela qual cores são


processadas e exibidas por um computador, mas é pouco intuitivo
A especificação de cores com o sistema HSB (Hue, Saturation and
Brightness), também conhecido como HSV (Value), permite uma
melhor abstração
Sistemas como o HSB são conhecidos como sistemas de interface

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 65 / 68


Alterando o sistema de cores

Para alterar como o Processing interpreta especificações 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 número que especifica
o valor máximo que cada coordenada de cor pode assumir
Uma especificação bastante útil é colorMode(HSB, 360, 100,
100) já que a coordenada Hue corresponde a um ângulo

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 66 / 68


O sistema HSB (HSV)

Sólido de cor é uma pirâmide hexagonal


invertida
Coordenadas correspondem ao matiz,
saturação e valor
Hexágono correspondente a V = 1 é
uma projeção do cubo RGB
Hue (matiz) corresponde a um ângulo
ao redor do eixo do cone
Saturação é o afastamento em relação
ao eixo da pirâmide
Valor é a altura com relação ao ápice
(preto)

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 67 / 68


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); // Saturação j
point (i ,100+100* j);
stroke (i,1,j); // Valor j
point (i ,200+100* j);
}
}

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 68 / 68