Sistemas de Cores. Leandro Tonietto Processamento Gráfico Jogos Digitais set-09

Transcrição

1 Sistemas de Cores Leandro Tonietto Processamento Gráfico Jogos Digitais set-09

2 Sumário Introdução Cores RGB HSV Referências 4-set-09 Leandro Tonietto 2

3 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

4 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

5 Wavelength Define uma cor. Cores Visible Spectrum (Espectro visível de cores): Imagem retirada de [1] 4-set-09 Leandro Tonietto 5

6 Cores como partículas Cores 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

7 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

8 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

9 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

10 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 2 24 cores = 16 Mega-cores = 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: (sobram 2) ou (usando alpha) 16 bits: Número reduzido de cores, menor necessidade de armazenamento. Total de 2 16 = 64 Kilo-cores = cores diferentes Máscaras: (sobra 1) ou (verde a mais por causa do brilho) 4-set-09 Leandro Tonietto 10

11 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: 2 8 = 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 2 4 = 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

12 Sistemas de 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

13 Sistemas de Cor - 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, G- green 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

14 Sistemas de Cor - 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. Imagem retirada de [1] 4-set-09 Leandro Tonietto 14

15 Sistemas de Cor - 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

16 Sistemas de Cor - 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 porque, se escolhermos uma cor e tentar isolar as suas similares numa região (esfera), não temos como garantir, num mesmo raio em qualquer direção, que as cores vizinhas são similares; elas podem ser, visualmente, diferentes. Cor-chave e um raio que delimita uma região de proximidade. Não é possível garantir que, em todas as direções, as cores nos limites da esfera sejam similares a corchave. Imagem retirada de [3] 4-set-09 Leandro Tonietto 16

17 Sistemas de Cor - RGB Exemplo do problema de distância entre cores: 154, 204, , 184, , 224, , 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

18 Sistemas de Cor - 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 = ( c o ) + ( c o ) 2 + ( c o ) 2 R R 2 G G B B 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

19 Sistemas de Cor - 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

20 Sistemas de Cor - 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

21 Sistemas de Cor - 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). d max d max = d max 441,673 d = = d d max ( 0 255) 2 + ( 0 255) 2 + ( ) 2 No código-fonte...: dd = d / dmax; if(dd <= tolerancia){ // faz alguma coisa } 4-set-09 Leandro Tonietto 21

22 Sistemas de Cor 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

23 Sistemas de Cor HSV Uma cor é determinada por um ângulo, uma intensidade e uma luminosidade. Qualquer ângulo com luminosidade zero, leva a cor preta. Qualquer ângulo com intensidade 0 e luminosidade total (1), leva à cor branca. Cores puras são obtidas pelo G Y ângulo, com total intensidade C e luminosidade. Exemplos: 0º vermelho, 60º amarelo, 120º verde, 180º o ciano, B M 240º o azul e 300º o magenta Imagem retirada de [3] R 4-set-09 Leandro Tonietto 23

24 Sistemas de Cor 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

25 Referências bibliográficas 1. WRIGHT Jr., Richard S.; LIPCHAK, Benjamin; HAEMEL, Nicholas. OpenGL Superbible: Comprehensive Tutorial and Reference. 4ed.: Addison-Wesley FOLEY, J.D. et al. Computer graphics: principles and practice. Reading: Addison-Wesley, TONIETTO, Leandro; WALTER, Marcelo. Análise de Algoritmos para Chroma-key. Unisinos, 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. 4-set-09 Leandro Tonietto 25