Sistemas de Cores

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