Sistemas de Cores - Unisinos
Sistemas de Cores - Unisinos
Sistemas de Cores - Unisinos
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>Sistemas</strong> <strong>de</strong> <strong>Cores</strong><br />
Leandro Tonietto<br />
Processamento Gráfico<br />
Jogos Digitais<br />
ltonietto@unisinos.br<br />
http://www.inf.unisinos.br/~ltonietto<br />
set-09
Sumário<br />
Introdução<br />
<strong>Cores</strong><br />
RGB<br />
HSV<br />
Referências<br />
4-set-09 Leandro Tonietto 2
Introdução<br />
Devemos compreen<strong>de</strong>r o que é e como funciona a<br />
captação das cores pelo olho humano; nos ajuda<br />
a enten<strong>de</strong>r como utilizar e programar com cores.<br />
Depois, faremos uma revisão sobre os sistemas <strong>de</strong><br />
cores (color mo<strong>de</strong>ls) mais utilizados: RGB, HSV,<br />
CMYK, ...<br />
É necessário também estudar um pouco sobre a<br />
representação <strong>de</strong> cores (estrutura e dados) nas<br />
linguagens <strong>de</strong> programação.<br />
Por fim, revisaremos alguns exemplos <strong>de</strong><br />
manipulação <strong>de</strong> imagens nas linguagens Java,<br />
Python e C++ / OpenGL.<br />
4-set-09 Leandro Tonietto 3
<strong>Cores</strong><br />
O que é uma cor?<br />
Cor é luz! A forma como o olho humano captura as informações<br />
<strong>de</strong> cores é através da captação <strong>de</strong> luz.<br />
Como, então, as cores <strong>de</strong> diferenciam?<br />
A luz é uma mistura <strong>de</strong> tipos <strong>de</strong> luz, cada tipo <strong>de</strong> luz representa<br />
uma cor.<br />
Os tipos <strong>de</strong> luz são i<strong>de</strong>ntificados pelo seu comprimento <strong>de</strong> on<strong>de</strong><br />
(wavelength).<br />
Distância entre picos da onda luz<br />
E as cores preta e branca?<br />
A cor preta é <strong>de</strong>finida como ausência <strong>de</strong> luz, portanto, ausência<br />
<strong>de</strong> cor. Objetos da cor preta absorvem todos os comprimentos <strong>de</strong><br />
onda completamente.<br />
A cor branca é a combinação <strong>de</strong> todas as cores, presença <strong>de</strong><br />
todos os tipos <strong>de</strong> luz. Objetos brancos refletem todas os<br />
comprimentos <strong>de</strong> onda <strong>de</strong> cor completamente.<br />
4-set-09 Leandro Tonietto 4
Wavelength<br />
Define uma cor.<br />
<strong>Cores</strong><br />
Visible Spectrum (Espectro visível <strong>de</strong> cores):<br />
Imagem retirada <strong>de</strong> [1]<br />
4-set-09 Leandro Tonietto 5
<strong>Cores</strong> como partículas<br />
<strong>Cores</strong><br />
Os objetos são iluminados por muitas (muitas mesmo) partículas<br />
<strong>de</strong> luz, ou photons.<br />
Cada um <strong>de</strong>stes photons é uma onda.<br />
Todo objeto físico reflete ou absorve photons e, <strong>de</strong>sta maneira,<br />
sua cor é <strong>de</strong>finida.<br />
Objetos mais claros<br />
refletem mais luz<br />
(absorvem menos),<br />
objetos mais escuros<br />
refletem menos luz<br />
(ou absorvem mais).<br />
Imagem retirada <strong>de</strong> [1]<br />
4-set-09 Leandro Tonietto 6
<strong>Cores</strong><br />
Captação <strong>de</strong> cores pelo olho humano:<br />
O olho captura as luzes refletidas e as interpreta<br />
como cores.<br />
Bilhões <strong>de</strong> photons são capturados pelo olho e são<br />
organizados pela retina como uma fotografia,<br />
através da excitação <strong>de</strong> milhões <strong>de</strong> células cone...<br />
<strong>de</strong>pois tudo vai pro cérebro e ...<br />
O olho possui três tipos <strong>de</strong> células cone, capturam<br />
três tipos <strong>de</strong> photons:<br />
Vermelhas, ver<strong>de</strong>s e azuis (RGB)<br />
Então como são captadas as <strong>de</strong>mais cores?<br />
Pela combinação da intensida<strong>de</strong> <strong>de</strong> cada uma <strong>de</strong>stas<br />
componentes <strong>de</strong> cor.<br />
4-set-09 Leandro Tonietto 7
<strong>Cores</strong><br />
Geração <strong>de</strong> cores no computador/monitor:<br />
O computador necessita <strong>de</strong> um hardware que<br />
emita photoeletrons RGB para reprodução <strong>de</strong><br />
imagens coloridas<br />
CRT (Catho<strong>de</strong> Ray Tube):<br />
Dispositivo emite eletrons<br />
Tela possui fósforos (RGB) por ponto visível.<br />
A combinação das intensida<strong>de</strong>s <strong>de</strong> luz <strong>de</strong>stes 3<br />
componentes reproduz uma cor (wavelength) no monitor.<br />
LCD (Liquid Cristal Display) funciona <strong>de</strong> maneira<br />
similar. Porém, sem dispositivo <strong>de</strong> emissão <strong>de</strong><br />
eletrons. Em cada ponto visível são “ligadas”<br />
cada uma das componentes <strong>de</strong> luz, que são<br />
combinadas para reproduzir uma cor.<br />
4-set-09 Leandro Tonietto 8
Conceitos<br />
Resolução<br />
Termo utilizado para representar as dimensões<br />
qualquer matriz <strong>de</strong> pontos (tela ou imagem, por<br />
exemplo)<br />
Po<strong>de</strong> ser expressa tanto em número <strong>de</strong> pontos <strong>de</strong><br />
largura e altura, quanto <strong>de</strong> quantida<strong>de</strong> total <strong>de</strong><br />
pixels.<br />
Exemplo:<br />
640 x 480, 800 x 600, 1280 x 1024, 256 x 256, ...<br />
Ou: 1 Mega pixels, 3 Mega pixels, ... Neste caso, o<br />
produto da largura pela altura.<br />
4-set-09 Leandro Tonietto 9
Conceitos<br />
Profundida<strong>de</strong> <strong>de</strong> cores:<br />
Número máximo <strong>de</strong> cores que ser representadas. Expressa<br />
em bits:<br />
24 bits (RGB):<br />
1 byte (8 bits) para cada componente R, G e B<br />
Total <strong>de</strong> 2 24 cores = 16 Mega-cores = 16.777.216 <strong>de</strong> cores.<br />
True-color: todas as cores que o olho humano consegue perceber.<br />
32 bits (RGBA ou ARGB):<br />
I<strong>de</strong>m ao anterior, porém possui um componente a mais, o canal Alpha<br />
<strong>de</strong>stinado a representação <strong>de</strong> opacida<strong>de</strong>/transparência da cor.<br />
Po<strong>de</strong> ser utilizado também para representar mais valores por canal<br />
(RGB).<br />
Máscaras: 10-10-10 (sobram 2) ou 8-8-8-8 (usando alpha)<br />
16 bits:<br />
Número reduzido <strong>de</strong> cores, menor necessida<strong>de</strong> <strong>de</strong> armazenamento.<br />
Total <strong>de</strong> 2 16 = 64 Kilo-cores = 65.536 cores diferentes<br />
Máscaras: 5-5-5 (sobra 1) ou 5-6-5 (ver<strong>de</strong> a mais por causa do<br />
brilho)<br />
4-set-09 Leandro Tonietto 10
Conceitos<br />
Profundida<strong>de</strong> <strong>de</strong> cores:<br />
Número máximo <strong>de</strong> cores que ser representadas.<br />
Expressa em bits:<br />
8 bits (gray-scale ou in<strong>de</strong>xed-color)<br />
Um byte para representar as cores: 2 8 = 256 cores possíveis<br />
(índices da paleta)<br />
Utilizado também para representação em tons-<strong>de</strong>-cinza.<br />
4 bits (in<strong>de</strong>xed-color, 2 pixels por byte)<br />
Um byte representa dois pixels 2 4 = 16 cores possíveis, ou<br />
melhor, 16 índices possíveis na paleta.<br />
1 bit (b&w – preto e branco, imagem binária)<br />
Preto e branco, duas possibilida<strong>de</strong>s <strong>de</strong> cores, para bitmap<br />
Um byte po<strong>de</strong> representar 8 pixels<br />
4-set-09 Leandro Tonietto 11
<strong>Sistemas</strong> <strong>de</strong> Cor<br />
Um mo<strong>de</strong>lo ou sistema <strong>de</strong> cores é uma<br />
especificação <strong>de</strong> um sistema <strong>de</strong><br />
coor<strong>de</strong>nadas ou subconjunto <strong>de</strong> cores<br />
visíveis.<br />
Determina o formato, fórmula ou forma<br />
<strong>de</strong> composição <strong>de</strong> componentes <strong>de</strong><br />
sistemas (coor<strong>de</strong>nadas) em cores.<br />
Exemplos: RGB, HSV, CMYK, HLS, YIQ, ...<br />
4-set-09 Leandro Tonietto 12
<strong>Sistemas</strong> <strong>de</strong> Cor - RGB<br />
O sistema RGB é <strong>de</strong> longe o mais utilizado na computação, porque é<br />
baseado no sistema <strong>de</strong> captação <strong>de</strong> cor do olho humano e porque é<br />
o sistema utilizado em monitores.<br />
Além disso, é um sistema muito simples para representação <strong>de</strong><br />
cores.<br />
Representação no mo<strong>de</strong>lo é inferior ao número <strong>de</strong> cores possíveis<br />
no espectro <strong>de</strong> cores. Para maiores informações leia Foley pág. 585<br />
[2].<br />
Sistema é representado como sistema <strong>de</strong> referência tridimensional<br />
convencional (sistema cartesiano 3D). Porém, ao invés <strong>de</strong> x, y e z,<br />
o sistema tem as componentes R, G e B (R-red ou vermelho, G-<br />
green ou ver<strong>de</strong> e B-blue ou azul).<br />
Todas as cores po<strong>de</strong>m ser representadas numa combinação das três<br />
componentes. Exemplo:<br />
Esta cor é a combinação RGB (153, 205, 255)<br />
4-set-09 Leandro Tonietto 13
<strong>Sistemas</strong> <strong>de</strong> Cor - RGB<br />
Visualmente, po<strong>de</strong>mos representar o mo<strong>de</strong>lo como um cubo, aon<strong>de</strong><br />
os valores mínimos são 0 e os máximos são 1 ponto-flutuante (ou<br />
255 inteiros).<br />
As cores dos cantos do cubo são<br />
consi<strong>de</strong>ras cores puras. É aon<strong>de</strong> estão<br />
as primárias (R, G e B), as secundárias<br />
(Yellow, Cyan e Magenta) e o preto (B)<br />
e branco (W).<br />
Ainda, do canto preto ao canto branco<br />
resi<strong>de</strong>m todas os tons <strong>de</strong> cinzas,<br />
também chamada <strong>de</strong> diagonal <strong>de</strong><br />
cinzas, com 256 valores possíveis.<br />
Quando representado no domínio [0, 1]<br />
dos números reais; os valores são uma<br />
fração <strong>de</strong> 255 (n/255). Quando expresso<br />
em bytes estão no domínio [0, 255] dos<br />
números inteiros.<br />
Imagem retirada <strong>de</strong> [1]<br />
4-set-09 Leandro Tonietto 14
<strong>Sistemas</strong> <strong>de</strong> Cor - RGB<br />
Exemplos:<br />
(0, 128, 0)<br />
(99, 125, 149)<br />
(86, 20, 80)<br />
(153, 102, 51)<br />
(255, 153, 51)<br />
Imagem retirada <strong>de</strong> [4]<br />
Imagem retirada <strong>de</strong> [3]<br />
4-set-09 Leandro Tonietto 15
<strong>Sistemas</strong> <strong>de</strong> Cor - RGB<br />
Consi<strong>de</strong>rações sobre o sistema RGB:<br />
Apesar do mo<strong>de</strong>lo RGB estar baseado na forma <strong>de</strong> captação <strong>de</strong> cores<br />
pelo olho humano e ser o mo<strong>de</strong>lo utilizado pelo monitores <strong>de</strong><br />
computador, ele tem um gran<strong>de</strong> inconveniente:<br />
Na sua representação espacial (cubo RGB) não é possível <strong>de</strong>terminar,<br />
visualmente, com exatidão, quais são os valores das componentes que<br />
<strong>de</strong>terminam uma cor <strong>de</strong> interesse.<br />
Outro ponto negativo, é que o sistema RGB não é a<strong>de</strong>quado para<br />
cálculo <strong>de</strong> similarida<strong>de</strong> <strong>de</strong> cores. Isto<br />
porque, se escolhermos uma cor e<br />
tentar isolar as suas similares<br />
numa região (esfera), não temos<br />
como garantir, num mesmo raio em<br />
qualquer direção, que as cores<br />
vizinhas são similares; elas po<strong>de</strong>m<br />
ser, visualmente, diferentes.<br />
Cor-chave e um<br />
raio que <strong>de</strong>limita<br />
uma região <strong>de</strong><br />
proximida<strong>de</strong>. Não é<br />
possível garantir<br />
que, em todas as<br />
direções, as cores<br />
nos limites da<br />
esfera sejam<br />
similares a corchave.<br />
Imagem retirada <strong>de</strong> [3]<br />
4-set-09 Leandro Tonietto 16
<strong>Sistemas</strong> <strong>de</strong> Cor - RGB<br />
Exemplo do problema <strong>de</strong> distância entre<br />
cores:<br />
154, 204, 255<br />
174, 184, 235<br />
134, 224, 235 134, 184, 235<br />
Este problema ocorre principalmente em algoritmos <strong>de</strong> <strong>de</strong>tecção <strong>de</strong> região <strong>de</strong> cores numa<br />
imagem ou para eliminação <strong>de</strong> cores visualmente semelhantes (por exemplo, chroma-key).<br />
4-set-09 Leandro Tonietto 17
<strong>Sistemas</strong> <strong>de</strong> Cor - RGB<br />
Cálculo <strong>de</strong> distância entre cores no sistema RGB:<br />
Mesmo cálculo <strong>de</strong> distância no espaço 3D: distância<br />
euclidiana:<br />
d<br />
=<br />
( c − o ) + ( c − o ) 2<br />
+ ( c − o ) 2<br />
R<br />
R<br />
2 G G B B<br />
On<strong>de</strong>:<br />
c é a cor-chave ou cor central que representa uma região<br />
esférica <strong>de</strong> cores no cubo RGB.<br />
o é uma cor qualquer que está sendo testada.<br />
R, G e B são os componentes <strong>de</strong> cor das cores em questão<br />
d será a “distância” entre as duas cores. Quando maior<br />
o d, menos semelhantes são as cores.<br />
4-set-09 Leandro Tonietto 18
<strong>Sistemas</strong> <strong>de</strong> Cor - RGB<br />
Cálculo <strong>de</strong> distância entre cores no sistema<br />
RGB:<br />
Entretanto, esta medida <strong>de</strong> distância não é<br />
trivial para dizer uma cor é diferente <strong>de</strong> outra.<br />
Não temos uma noção precisa <strong>de</strong> qual valor <strong>de</strong> d<br />
<strong>de</strong>ve ser utilizado, pois:<br />
Depen<strong>de</strong> do objetivo em questão, do que se<br />
preten<strong>de</strong> “selecionar” <strong>de</strong> cores no cubo<br />
Depen<strong>de</strong> da nível <strong>de</strong> precisão que se preten<strong>de</strong><br />
Depen<strong>de</strong> da cor <strong>de</strong> interesse, consi<strong>de</strong>rando que,<br />
visualmente, a área <strong>de</strong> semelhança/interesse no<br />
cubo po<strong>de</strong> ser diferente para cada cor.<br />
4-set-09 Leandro Tonietto 19
<strong>Sistemas</strong> <strong>de</strong> Cor - RGB<br />
Cálculo <strong>de</strong> distância entre cores no sistema<br />
RGB:<br />
Uma boa idéia para dar uma noção <strong>de</strong> medida é<br />
qualquer uma distância relativa (em %).<br />
Isto po<strong>de</strong> ajudar também na necessida<strong>de</strong> <strong>de</strong><br />
interação com o usuário, uma vez que po<strong>de</strong> ter<br />
noção um pouco melhor do quão<br />
otimista/pessimista ele está sendo.<br />
Normalmente, esta distância relativa é chamada<br />
<strong>de</strong> critério <strong>de</strong> tolerância; percentualmente, o<br />
quão distantes as cores po<strong>de</strong>m ser.<br />
4-set-09 Leandro Tonietto 20
<strong>Sistemas</strong> <strong>de</strong> Cor - RGB<br />
Cálculo <strong>de</strong> distância entre cores no sistema RGB:<br />
Para resolver é simples, basta dividir a distância calculada<br />
pela distância máxima (que, obviamente, é a distância entre<br />
as cores preta e branca no cubo RGB, ou a distância <strong>de</strong><br />
qualquer diagonal do cubo).<br />
d<br />
max<br />
d max = 195075<br />
d max ≈ 441,673<br />
∆d =<br />
=<br />
d<br />
d max<br />
( 0 − 255) 2 + ( 0 − 255) 2<br />
+ ( 0 − 255 ) 2<br />
No código-fonte...:<br />
dd = d / dmax;<br />
if(dd
<strong>Sistemas</strong> <strong>de</strong> Cor – HSV<br />
Sistema que <strong>de</strong>termina um cor através da combinação <strong>de</strong><br />
3 componentes. Tem a forma <strong>de</strong> uma hexa-cone.<br />
Hue Saturation Value<br />
H - Matiz – cor pura [0..360º)<br />
S - Saturação – intensida<strong>de</strong> <strong>de</strong> cor pura [0..1]<br />
V - Luminosida<strong>de</strong> – escuro ou claro [0..1]<br />
Imagem retirada <strong>de</strong> [3]<br />
4-set-09 Leandro Tonietto 22
<strong>Sistemas</strong> <strong>de</strong> Cor – HSV<br />
Uma cor é <strong>de</strong>terminada por um ângulo, uma<br />
intensida<strong>de</strong> e uma luminosida<strong>de</strong>.<br />
Qualquer ângulo com luminosida<strong>de</strong> zero, leva a cor<br />
preta.<br />
Qualquer ângulo com<br />
intensida<strong>de</strong> 0 e luminosida<strong>de</strong><br />
total (1), leva à cor branca.<br />
<strong>Cores</strong> puras são obtidas pelo<br />
G<br />
Y<br />
ângulo, com total intensida<strong>de</strong><br />
C<br />
e luminosida<strong>de</strong>.<br />
Exemplos:<br />
0º vermelho, 60º amarelo,<br />
120º ver<strong>de</strong>, 180º o ciano,<br />
B<br />
M<br />
240º o azul e 300º o magenta Imagem retirada <strong>de</strong> [3]<br />
R<br />
4-set-09 Leandro Tonietto 23
<strong>Sistemas</strong> <strong>de</strong> Cor – HSV<br />
Consi<strong>de</strong>rações sobre o HSV:<br />
O sistema <strong>de</strong> cores que é visualmente mais<br />
“confiável” que o RGB.<br />
Permite, com mais facilida<strong>de</strong> que o RGB,<br />
<strong>de</strong>terminar uma região <strong>de</strong> cores similares, pois<br />
basta <strong>de</strong>terminar um ângulo central e um<br />
mínimo e máximo.<br />
É necessária conversão para RGB para ser<br />
utilizado no computador.<br />
Na conversão, o preto po<strong>de</strong> ser uma<br />
combinação <strong>de</strong> diversas possibilida<strong>de</strong>s <strong>de</strong> H<br />
e S.<br />
4-set-09 Leandro Tonietto 24
Referências bibliográficas<br />
1. WRIGHT Jr., Richard S.; LIPCHAK, Benjamin; HAEMEL,<br />
Nicholas. OpenGL Superbible: Comprehensive Tutorial<br />
and Reference. 4ed.: Addison-Wesley. 2007.<br />
2. FOLEY, J.D. et al. Computer graphics: principles and<br />
practice. Reading: Addison-Wesley, 1990.<br />
3. TONIETTO, Leandro; WALTER, Marcelo. Análise <strong>de</strong><br />
Algoritmos para Chroma-key. <strong>Unisinos</strong>, 2000.<br />
4. BITTENCOURT, João. Apresentação <strong>de</strong> introdução ao<br />
processamento gráfico. Disponível para download no site<br />
da disciplina.<br />
5. Microsoft Windows Bitmap File Format Summary.<br />
FileFormat.Info.<br />
http://www.fileformat.info/format/bmp/egff.htm.<br />
4-set-09 Leandro Tonietto 25