Licenciatura em Engenharia Informática e de Computadores ... · Licenciatura em Engenharia...
Transcript of Licenciatura em Engenharia Informática e de Computadores ... · Licenciatura em Engenharia...
Licenciatura em Engenharia Informática e de Computadores
Computação Gráfica
Cor
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Edward Angel, Caps. 1, 2 e 7Apontamentos CG
LEIC CGSumário
� Teoria da Cor
� Conceitos básicos
� Modelação da Cor
� Modelos de Cor
� Reprodução da Cor
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEICCG
Conceitos BásicosTeoria da Cor
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CGCor
� Matéria complexa – estudada em várias áreas
� Física
� Fisiologia
� Psicologia
� Artes
� Não é apenas uma propriedade
� Depende de diversos factores externos
• Fontes de Luz
• Cores do ambiente envolvente
• Olho humano...
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CGEspectro Electromagnético
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
450 500400 650 700550 600
nm
-14 -13 -12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 0 1 2 3 4
log10λλλλradiaçãotérmica
raioscósmicos
raiosgama raios X UV IV rádio
luz visível
LEIC CGRetina
� Sistema auto-adaptativo
� Visão central
� fovea centralis
• Ø1,5mm
• só há cones
� macula lutea
• Ø 1 cm
• cones + bastonetes
� Visão periférica
� só há bastonetes
� formas detectadas com falta de cor
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Tipo Função Nº (milhões)
Cones policromia 6,8
Bastonetes monocromia 115-120
ObjectoÍris
Retina
Nervo Óptico
Córnea
LEIC CGSensibilidade Espectral dos Cones
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
0
2
4
6
8
10
12
14
16
18
20
400 440 480 520 560 600 640 680
comprimento de onda [nm]
sens
iblid
ade
[%
]
beta
gama ro
LEIC CGTeoria dos três estimulos
� Cones são sensores de cor
� Picos de sensibilidade
� vermelho, verde, azul
� Todas as outras cores
� Representadas como combinações destas
� Ciano = Azul + Verde
� Amarelo = Verde + Vermelho
� Etc…
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
gama
ro
beta
LEIC CG
Caracterização da Cor
� Cor (hue)
� distinção entre cores
• vermelho, verde, amarelo, lilás,…
� Saturação (saturation)
� distância da cor ao cinzento de igual intensidade
• muito saturado - vermelho, azul
• pouco saturado - rosa, azul do céu, cores pastel
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Caracterização da Cor (cont.)
� Luminosidade (lightness)
� intensidade da luz reflectida por uma superfície
(parede, quadro)
� Brilho (brightness)
� intensidade da luz emitida por uma superfície
(lâmpada, Sol, CRT)
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Caracterização da Cor
� Cor (hue)
� Distinção entre cores
• Comprimento de onda dominante
� Saturação (saturation)
� Pureza da cor
� Luminosidade (lightness)
� Brilho (brightness)
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Licenciatura em Engenharia Informática e de Computadores
Computação Gráfica
Computação GráficaModelos de Cor
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Propriedades desejáveis dos
Modelos de cor
� Uniformidade perceptual
� Facilidade de navegação
� Proximidade face à psicologia do sistema visual
� Rigor
� Facilidade de implementação
Em computação gráfica:
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Modelo de Munsell (1/3)
� Criado no final do séc XIX
� por Albert H. Munsell (1858-1918)
• “Munsell Book of Color “, publicado em 1929
� Considerado o primeiro modelo moderno
� Para determinação de cores
� Continua a ser largamente usado
� Concebido para artes gráficas e ensino
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Modelo de Munsell (2/3)
� Definido por:
� Eixo vertical – value
• Brilho/Luminosidade
� Circunferência – hue
• Cor
� Raio – chroma
• Saturação
ilustração por Samuel J. Klein
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Modelo de Munsell (3/3)
� Espaço cromático
� hue + value (lightness)+ chroma (saturação)
� Compara cores com tabelas normalizadas
� sob uma iluminação também normalizada
� julgamentos visuais
� Medida subjectiva, dependente de
� Condições de iluminação
� Cor da luz circundante
� Iluminação geral do ambiente de medida
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG(Alguns) Modelos de Cor
RGB Red, Green, Blue
CMY Cyan, Magenta, Yellow (cores complementares)
HSV Hue, Saturation, Value
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Modelo RGB
� Cubo normalizado� com origem em (0,0,0)
• Preto
� Vértices:� Vermelho (1,0,0)� Verde (0,1,0)� Azul (0,0,1)� Amarelo (1,1,0)� Ciano/Cião (0,1,1)� Magenta (1,0,1) � Branco (1,1,1)
� Cinzentos� diagonal
• entre (0,0,0) e (1,1,1)© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Espaço RGB
Ciano (0,1,1)
Magenta (1,0,1)
Preto = (0,0,0) Verde = (0,1,0)
Azul = (0,0,1)
Vermelho (1,0,0)
Branco = (1,1,1)
Amarelo (1,1,0)
Cinzentos
RGB a partir de CIE
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Modelo CMY
� Fundamento
� uma superfície absorve parte da luz incidente
� reflecte a luz da cor que aparenta ter
� Constituído pelas cores complementares
� ciano, magenta e amarelo (primárias subtractivas)
� Semelhante ao RGB, mas
� a origem é o branco em vez do preto
� cores subtractivas da luz branca incidente
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Espaço CMY
� Cubo normalizado� com origem em (0,0,0)
• Branco
� Vértices:� Vermelho (1,0,1)� Verde (0,1,1)� Azul (1,1,0)� Amarelo (0,0,1)� Ciano (0,0,1)� Magenta (1,0,0) � Preto (1,1,1)
� Cinzentos� diagonal
• entre (0,0,0) e (1,1,1)
Vermelho (0,1,1)
Verde (1,0,1)
Branco = (0,0,0) Magenta = (0,1,0)
Amarelo = (0,0,1)
Cião (1,0,0)
Preto = (1,1,1)
Azul (1,1,0)
Cinzentos © 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
� RGB
� Modelo aditivo
� CMYK
� Modelo subtractivo
� Conversão trivial:
RGB e CMY (1/2)
−
=
B
G
R
Y
M
C
1
1
1
−
=
Y
M
C
B
G
R
1
1
1
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Modelo CMYK
� Impressoras
� Tinta preta adicional
• Para maior fidelidade
• Redução de custos
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Modelo HSV {HSB}
� Modelos RGB e CMY
� Orientados ao hardware
� Mais intuitivo para o utilizador� H Hue
� S Saturation
� V Value (brightness, B)
� Próximo do sistema intuitivo em arte com� matiz, tom e tonalidade
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Espaço HSV {HSB}
� Cinzentos� S=0 e 0 < V < 1
� V=0� H e S são irrelevantes
� S=0� H é irrelevante
1,0 cião
magenta
branco
0,0 preto
amarelo verde 120º
vermelho 0º
azul 240º
S H
V
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Licenciatura em Engenharia Informática e de Computadores
Computação Gráfica
Formatos Imagem
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Apontamentos CGEdward Angel, Sec. 8.2
LEIC CGSumário
� Formatos de Imagem
� Generalidades
� Formatos
• DIB (BMP)
• GIF
• PNG
• JFIF (JPEG)
� Considerações sobre uso
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Siglas
� DIB: Device Independent Bitmap
� “windows” BMP: Windows Bitmap
� GIF: Graphics Interchange Format
� PNG: Portable Network Graphics
� JFIF: JPEG File Interchange Format
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEICCG
Conceitos GenéricosFormatos de Imagem
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Representação Directa
� Para cada pixel
� Representar valor do canal correspondente
• Triplos <R,G,B>
� Máxima Fiabilidade
� Depende apenas da profundidade da cor
� Requisitos de memória elevados
Representação Imagem
0
147
211 70
0 190
LEIC CG
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Representação por Mapa de Cores
� Pixéis representados por índice de cor� em vez de 3 componentes de cor
� Ficheiros de menor dimensão� Bom até 256 cores
� Inviável para mais do que 256 cores
1
47
1
0
2
47
48
46
255 0 0
255
255
255
255
0
0
0
0
0
255 255
255 255
0
0
. . .
Representação Imagem Mapa de cores
LEIC CG
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Compressão de Imagem
� Reduz o tamanho da imagem
� Dois tipos� Com perda
• JPEG: Joint Photographic Experts Group (ISO 10918-1)
� Transformada do co-seno aplicada a grupos de pixéis
(8x8 ou 16x16)
� Sem perda
• RLE: Run Length Encoding
� Sequências de pixéis da mesma cor
• LZW (e LZ77) – Lempel-Ziv Welch
� Sequências iguais de pixéis (podem ser de cores diferentes)
LEIC CG
Entrelaçamento (1/3)
� Codificação permite visualização mais rápida
� Também conhecido como
� Codificação progressiva
� Pode ser usado em diversos formatos� GIF
• Armazena as linhas intercaladas
� 0, 8, 16,... / 4,12, .... / 2, 6, 10, 14, ... / 1, 3, 5, 7, 9, ....
� PNG
• Algoritmo Adam7
� Imagem dividida em 7 sub-imagens
� Usa padrão 8x8 para armazenar a imagem
� JPEG
• Algoritmo Progressivo
� Usa os coeficientes da Transformada do Co-seno
� Complexo, mas eficiente
1 6 4 6 2 6 4 6
7 7 7 7 7 7 7 7
5 6 5 6 5 6 5 6
7 7 7 7 7 7 7 7
3 6 4 6 3 6 4 6
7 7 7 7 7 7 7 7
5 6 5 6 5 6 5 6
7 7 7 7 7 7 7 7
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Entrelaçamento (2/3)
GIF
AD
AM
7
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CGPNG GIF
1/64
1/32
1/16
1/8
1/4
1/2
Com
plet
a!
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Licenciatura em Engenharia Informática e de Computadores
Computação Gráfica
Computação GráficaFormatos de Imagem
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Número Mágico(Magic Number)
� Usado para identificar formatos de ficheiros
� Apareceu pela 1ª vez na versão 7 do UNIX (1979)
• Para identificar executáveis
� Um conjunto de bits no início do ficheiro
� Exemplos:
� PDF: 25 50 44 46 (%PDF)
� MS-OFFICE DOC: D0 CF 11 E0 (“docfile0”)
� Classes JAVA compiladas: CA FE BA BE (“cafe babe”)
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Número Mágico(Magic Number)
� No caso dos ficheiros de imagem
� PBM: P4 [em ASCII]
� BPM: 42 4D (BM)
� GIF: 47 49 46 38 (GIF8)
� PNG: 89 50 4E 47 (♦PNG)
� JPEG/JFIF: FF D8 FF E0
� TIFF
• Big endian (motorola): 4D 4D 00 2A (MM♦*)
• Little endian (intel): 49 49 2A 00 (II*♦)
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Formato DIB (BMP) (1/2)
� Cores:� 2, 16, 256 e 16.777.216
� Modelo de cor:� RGB
� Compressão:� RLE 4 e RLE 8
� Mapa de cores:� só com 2, 16 e 256 cores
� Entrelaçamento:� não suporta
� Transparência:� não suporta
800×600, 81232 cores, 1,37 Mb
RLE - 800×600, 251 cores, 530 kb
LEIC CG
Formato DIB (BMP) (2/2)
� Vantagens
� Cores reais
� Múltiplos subtipos
• para diferentes tipos de imagem
� Desvantagens
� Ficheiros de grande tamanho
� Compressão limitada a subtipos
� Compressão inadequada
• Para imagens de qualidade fotográfica
Porquê?
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Formato GIF (1/3)
� Cores:� 2, 4, 8, 16, 32, 64, 128 e 256
� Modelo de cor:� RGB
� Compressão:� LZW sem perda (sempre)
� Mapa de cores:� Obrigatório
� Entrelaçamento:� Opcional, por linhas
� Transparência:� uma cor
638×422, 144 cores, 94 kb
320×200, 255 cores, 57 kb© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Formato GIF (2/3)
� Vantagens
� Canal de dados
� GIFs animados
� Ficheiros de pequeno tamanho
� Desvantagens
� Limite de 256 cores
� Formato e algoritmo de compressão proprietários
� Impróprio para imagens de qualidade fotográfica
� Transparência de uma única cor
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Formato GIF (3/3)
� Limite de 256 cores
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Formato PNG (1/2)
� Cores:� 2, 4, 16, 256, 16.777.216 e 248
� Modelo de cor:� RGB
� Compressão:� LZ77 sem perda
� Mapa de cores:� só com 2, 4, 16 e 256 cores
� Entrelaçamento:� opcional, por pixéis
� Transparência:� por canal alfa
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Formato PNG (2/2)
� Vantagens
� Suporta todos os tipos de imagem
� Algoritmo de compressão do domínio público
� Transparência por canal alfa
� Permite sequências de imagens
� Guarda a correcção gama (opcional)
� Desvantagens
� Algoritmo de compressão impróprio para imagens com qualidade
fotográfica
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Formato JFIF (JPEG) (1/2)
� Cores:� 16.777.216
� Modelo de cor� YCbCr
� Compressão:� JPEG (com perda)
� Mapa de cores:� não suporta
� Entrelaçamento:� não suporta
� Transparência:� não suporta
800×600, 59847 cores, 68,9 kb
800×600, 81232 cores, 60,9 kb
LEIC CG
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Formato JFIF (JPEG) (2/2)
� Vantagens
� Recomendado para imagens de qualidade fotográfica
� Algoritmos de compressão normalizados
� Desvantagens� Há sempre perda (mas a visão não detecta)
� Impróprio para imagens com variações súbitas de cor
Orig
inal
JPE
G
LEIC CG
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Artefactos JFIF (JPEG)
Orig
inal
JPE
G
LEIC CG
Degradação Progressiva em JFIF
90 80
50
70
40
60
20 10
Escala de qualidade 1 (mín.) – 100 (máx.)
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEICCG
Considerações sobre o usoFormatos de Imagem
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
Imagem de Qualidade Fotográfica
� Exemplo de Imagem
� 512 x 512 pixéis
� 230.426 cores
LEIC CG
Imagem Fotográfica
Dimensão de Imagem
MS Photo Editor Paint Shop Pro Adobe Photoshop
DIB/BMP 786.486
GIF normalentrelaçado
169.369 (136) 261.332 (256)266.523 (256)
248.878 (256)254.103 (256)
PNG normal entrelaçado
755.065 636.923667.648
781.799788.863
JFIF máx.méd.mín.
342.808 (159.067)50.717 (149.903)31.768 (111.645)
313.125 (161.704)51.151 (151.270)32.300 (113.683)
491.285 (176.062)87.798 (156.760)53.248 (133.424)
Comprimento em bytes (número de cores)
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Imagem de um Gráfico Simples
� Exemplo de Imagem
� 717 x 494
� 10 cores
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Gráfico Simples
Dimensão de Imagem
MS Photo Editor Paint Shop Pro Adobe Photoshop
DIB/BMP 1.063.142
GIF normalentrelaçado
19.271 (18) 17.58117.904
16.26816.667
PNG normal entrelaçado
red. 256 cores
18.951
14.795 (18)
19.09728.48212.899
29.86139.10314.975 (18)
JFIF máx.méd.mín.
174.285 (111)44.330 (27.550)31.768 (29.756)
161.770 (2.764)44.262 (28.097)31.495 (30.223)
226.607 (444)73.789 (21.443)54.583 (26.423)
Comprimento em bytes (número de cores)
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL
LEIC CG
Formatos de Imagem
Considerações� Usar GIF se
� número de cores for pequeno (<256)
� Considerar o formato PNG� para estes casos e para outros
� se a imagem não for de qualidade fotográfica
� Usar JPEG/JFIF sempre que a imagem� seja de qualidade fotográfica
� apresente tons contínuos
� Imagens JPEG/JFIF� Guardar imagem original sem perda ou com pouca perda
� Reduzir tamanho antes de comprimir com perda
© 2011 Corpo docente de Computação Gráfica / CG&M / DEI / IST / UTL