SlideShare uma empresa Scribd logo
1 de 23
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 1
3.2 BASES SOBRE A TEORIA DA COR APLICADA AOS
SISTEMAS DIGITAIS
Luz e Cor
Para entender as cores, é preciso antes falar de luz. A luz branca (praticamente a
totalidade da luz proveniente do Sol) é composta de radiações de diversos comprimentos
de onda. Cada comprimento de onda corresponde a uma cor – ou seja, ao ser captado
individualmente pelos nossos olhos, ele é convertido em impulsos eléctricos que fazem o
cérebro perceber aquela cor.
Fig. 1 – Espectro electromagnético
Por exemplo, o vermelho tem um comprimento de onda de 700 nm ou 0,7µm.
A cor de um material é determinada pelas médias de frequência dos pacotes de onda que
as suas moléculas constituintes reflectem. Um objecto terá determinada cor se não
absorver justamente os raios correspondentes à frequência daquela cor.
Considerando as cores como luz, a cor branca resulta da sobreposição de todas as cores,
enquanto o preto é a ausência de luz. Uma luz branca pode ser decomposta em todas as
cores (o espectro) por meio de um prisma. Na natureza, esta decomposição origina um
arco-íris.
Cores Primárias e cores Secundárias
Cor primária é uma cor que não pode ser decomposta noutras cores. Nunca é obtida a
partir da mistura de outras cores. As cores primárias são um conceito, baseado na
resposta do olho humano à luz. O olho humano normal possui três tipos de receptores,
chamados cones, que respondem a comprimentos de onda diferentes: vermelha e laranja,
verde e amarelo e azul e violeta. O primeiro tipo é denominado R (red), G (green) e B
(blue). Foram eles que deram origem ao sistema RGB, que será analisado mais à frente.
As cores, vermelho, verde e azul são consideradas cores primárias em fontes de luz, pois
cada uma delas pode estimular os cones de forma praticamente independente,
proporcionando uma ampla gama de cores.
Quando duas cores primárias são misturadas em partes iguais, duas a duas, elas geram
outras três cores: Ciano, Magenta e Amarelo, chamadas cores secundárias.
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 2
Cores complementares
Duas cores são complementares se, ao
serem misturadas, produzem o preto, o
branco ou uma graduação de cinza.
Uma cor primária tem sempre uma cor
secundária como complementar e vice-
versa.
A cor secundária complementar de
uma cor primária é aquela formada
pelas outras duas cores primárias.
As cores complementares são as que
mais diferem umas das outras.
Nos sistemas RGB e CMY, as primárias
de um sistema são secundárias do
outro e vice-versa.
Fig. 2 – Cores primárias e cores complementares
Cada cor é sempre a intermediária entre as duas vizinhas. Em posição diametralmente
opostas estão as cores complementares.
Modelo CIE XYZ
A Commission Internationale de l’Eclairage, CIE, propôs este modelo em 1931 como
standard de medida de cor, a partir de uma série de experiências realizadas por David W.
Wright e John Guild.
O modelo baseia-se nas três cores primárias da luz, vermelho, verde e azul com valores
estímulo X, Y e Z respectivamente. Dado que o olho humano tem três tipos de cones que
respondem a diferentes comprimentos de onda, este modelo representa numa figura
tridimensional todas as cores visíveis pelo olho humano.
Fig. 3- Diagrama de cromaticidade XYZ
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 3
− As cores espectrais puras são representadas por uma curva em forma de ferradura;
− A base da ferradura (magenta) representa cores não-espectrais;
− O branco é um ponto no interior da ferradura;
− As restantes cores são também pontos interiores.
− A saturação corresponde à distância do ponto branco;
− O matiz corresponde à intersecção da recta que passa pelo ponto com a ferradura;
− A luminância corresponde ao eixo z.
Ref:
http://upload.wikimedia.org/wikipedia/en/5/52/Chromaticity_diagram_full.pdf
http://en.wikipedia.org/wiki/Chromaticity_diagram#The_CIE_xy_chromaticity_diagram_and_the_C
IE_xyY_color_space
Modelo RYB
Nas artes plásticas usa-se um sistema de cores diferente, chamado sistema RYB, que tem
em conta os pigmentos existentes. Nesse sistema o (Red) Vermelho, o (Blue) Azul e o
(Yellow) Amarelo são tratados como cores primárias. A teoria das cores diz que
misturando cores primárias, pode-se obter qualquer cor.
Modelo RYB
CORES SECUNDÁRIAS:
Verde = Azul + Amarelo
Laranja = Amarelo + Vermelho
Violeta = Azul + Vermelho
Modelo RGB
CORES SECUNDÁRIAS:
Ciano = Azul + Verde
Magenta = Azul + Vermelho
Amarelo = Vermelho + Verde
Fig. 4 – Modelos de cor RYB e RGB
Como o sistema RYB não representa todas as cores perceptíveis pelo olho humano
actualmente são considerados dois modelos de classificação de cores: o modelo aditivo
(ou luminoso) RGB e o modelo subtractivo (ou reflexivo) CMY. O sistema CMYK consiste
no modelo CMY acrescido de Preto (K) e é usado pela indústria gráfica em vários sistemas
de impressão.
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 4
Modelo RGB
O modelo de cores RGB é um modelo aditivo no qual o vermelho, o verde e o azul são
combinados de várias maneiras para reproduzir outras cores. O nome do modelo e a
abreviatura RGB vêm das três cores primárias: vermelho, verde e azul (Red, Green e Blue,
em inglês), e só foi possível devido ao desenvolvimento tecnológico de tubos de raios
catódicos – com os quais foi possível fazer a representação de cores.
Fig. 5 – Modelo de cor RGB
O propósito principal do sistema RGB é a reprodução de cores em dispositivos
electrónicos como monitores, TV, "datashows", scanners e câmaras digitais, assim como na
fotografia tradicional. O modelo de cores RGB é baseado na teoria de visão colorida
tricromática, de Young-Helmholtz, e no triângulo de cores de Maxwell.
Funcionamento
Uma cor no modelo de cores RGB é descrita pela indicação da quantidade de vermelho,
verde e azul que contém. Cada uma pode variar entre o mínimo, 0, (completamente
escuro) e máximo, 255, (completamente intenso), conforme mostra a Fig. 6.
Este é um exemplo de uma cor RGB, com as componentes:
RGB (213,111,56)
Fig. 6 –Variação de cada cor; Cor resultante de uma combinação de RGB
Quando todas as cores estão no mínimo, o resultado é preto. Se todas estão no máximo, o
resultado é branco.
A representação com 24-bit
Os valores de RGB são uma codificação de 24 bit por pixel (bpp) que constituem uma
imagem. Cada uma das cores, R, G e B é codificada com 8 bit, ou seja, com um valor de 0 a
255, que representa a intensidade de vermelho, verde e azul, como já foi visto
anteriormente. Esta representação de cor é um standard na representação de imagem em
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 5
dispositivos gráficos, também conhecido como True Color, comum a vários formatos de
imagem, tais como BMP ou JPG. Permite a representação de cerca de 16,7 milhões de
combinações diferentes de cor.
Fig. 7 – A representação das cores num dispositivo gráfico
R G B COR
VALOR
HEXADECIMAL
0 0 0 PRETO #000000
255 0 0 VERMELHO #FF0000
0 255 0 VERDE #00FF00
0 0 255 AZUL #0000FF
255 255 0 AMARELO #FFFF00
0 255 255 CIANO #00FFFF
255 0 255 MAGENTA #FF00FF
255 255 255 BRANCO #FFFFFF
100 100 100 CINZA #646464
Neste modelo, as cores são complementares às do sistema CMYK - Ciano (Cyan), Magenta
(Magenta), Amarelo (Yellow) e Preto (blacK) e a mistura das três, forma o Branco.
Modelo CMY(K)
Este sistema (subtractivo ou de cor pigmento) consiste na mistura das cores secundárias
da luz (também chamadas de primárias em artes plásticas), Ciano (Cyan), Magenta
(Magenta), Amarelo (Yellow), CMY.
Como o sistema CMY não reproduz fielmente os tons mais escuros, é necessária a
aplicação de preto "puro", (blacK/Key). Este sistema é utilizado por impressoras, na
indústria gráfica e em fotocopiadores.
Fig. 8 – Modelo de cor CMY
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 6
Como se pode verificar na Fig. 3, o Ciano é a cor oposta ao Vermelho, significa que actua
como um filtro que absorve essa cor (-R +G +B). Da mesma forma, Magenta é a oposta ao
Verde (+R -G +B) e Amarelo é a oposta ao Azul (+R +G -B). Assim, as cores primárias de
pigmento combinadas duas a duas, na mesma proporção, geram o seguinte resultado:
+ = Magenta + Amarelo = Vermelho
+ = Magenta + Ciano = Azul
+ = Ciano + Amarelo = Verde
Focos de luz primária combinados dois a dois geram o seguinte resultado:
+ = Azul + Vermelho = Magenta
+ = Vermelho + Verde = Amarelo
+ = Verde + Azul = Ciano
As cores primárias de luz são as cores secundárias de pigmento, tal como as secundárias de luz são as
primárias de pigmento.
Modelo HSV (HSB)
O modelo HSV (Hue, Saturation, Value – Tonalidade, Saturação, Valor), também conhecido
por HSB (Hue, Saturation, Brightness – Tonalidade, Saturação, Brilho), define um modelo
de cor em função de três parâmetros, constituintes de um cone:
Matiz (tonalidade): Verifica o tipo de cor, abrangendo todas as cores do espectro, desde
o vermelho até o violeta. Varia entre os valores 0° e 360°, podendo em algumas
aplicações ser normalizado de 0 a 100%.
− 0° ou 360° VERMELHO ;
− 60° AMARELO ;
− 120° VERDE ;
− 180° CIANO ;
− 240° AZUL ;
− 300° MAGENTA.
Saturação: Quanto menor este valor, mais cinza é a imagem. Quanto maior o valor,
mais "berrante" é a imagem. Varia entre 0 e 100%.
Valor, ou brilho: Define o brilho da cor. Varia de 0 a 100%.
Fig. 9 - Cone de cores do espaço HSV
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 7
Este sistema foi criado em 1978, por Alvy Ray Smith. Consiste numa transformação não
linear, i.e, uma conversão que depende do dispositivo que a representa.
As cores são definidas por trios (h, s, v) e são dependentes das cores Red, Green e Blue
primárias do espaço RGB do dispositivo gráfico específico, e da compressão gamma[1]
usada para representar as quantidades dessas cores primárias.
Modelo YUV
YUV é um espaço de cor habitualmente usado em sistemas de vídeo a cores, NTSC, PAL,
SECAM e vídeo composto. Define um espaço de cor tendo em conta a percepção humana,
em termos de uma componente de luminância (Y) e duas componentes de crominância
(UV).
Fig. 10 - Plano de cores U-V, Y' = 0.5, representado com gamut[2] RGB
O modelo YUV está más próximo do modelo de percepção humana do que o RGB usado
em hardware gráfico de computador, mas mais afastado do espaço de cor HSV. Existem
outras nomenclaturas, por vezes ambíguas, para sistemas similares ou coincidentes,
designadas por termos como, Y'UV, YUV, YCbCr, YPbPr, etc…
Outros Modelos
MUNSELL
http://www.xrite.com/top_munsell.aspx
L.a.b. (LAB)
http://www.optics.arizona.edu/opti588/reading/CIE_Lab_color_space.pdf
NCS
http://www.ncscolour.com/en/lm/colour-knowledge/how-ncs-works/ncs-notation/
[1]
http://en.wikipedia.org/wiki/Gamma_correction
[2] Gamut ou cor gamut é um subconjunto completo de cores.
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 8
Pantone
Existem diferentes sistemas comerciais de definição de cores, sendo o mais conhecido
deles, o sistema Pantone, onde as cores são referenciadas por números.
Fig. 11 – Um excerto de um Pantone
O Pantone Matching System, foi criado em 1963 com o objectivo de alcançar um standard
para a comunicação e reprodução de cores nas artes gráficas. Baseia-se na edição de uma
série de catálogos em papel ou outros suportes, tabelando uma codificação
estandardizada, onde cada cor específica é referenciada por um número único.
A limitação do Gamut
A representação da gama completa de cores, gamut, que o olho humano consegue
distinguir é demasiado grande. Os modelos de representação de cor mais usados, RGB e
CMYK, possuem limitações na representação de toda essa gama que nós conseguimos
efectivamente ver, conforme se esquematiza na imagem seguinte.
Fig. 12 – Gamuts RGB e CMY sobre diagrama de cromaticidade CIE
A Fig. 12 mostra claramente uma sobreposição das gamas de cor dos modelos RGB e
CMYK, sobre o diagrama de cromaticidade CIE de 1931, que representa a gama completa
da percepção humana de cor.
O gamut exato de um modelo de cor depende de dispositivo que o representa. Todo o
dispositivo gráfico, monitor, scanner, impressora, tem o seu gamut individual.
http://www.youtube.com/watch?v=0AYNOF7gSFg&feature=related
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 9
Estas diferenças no gamut podem criar problemas na reprodução de cor em gráficos ou
páginas gerados por computador, a um nível profissional. Este é um problema inerente à
produção de gráficos produzidos por computador.
Cores HTML
As cores HTML são definidas usando uma notação hexadecimal (Hex) para combinar
valores de Vermelho, Verde e Azul (RGB). Esses valores podem variar, para cada cor, entre
0 (Hex 00) e 255 (Hex FF). Os valores Hex são escritos juntando 3 grupos de dois dígitos
hexadecimais, antecedidos por um # (triplet). Vejamos os exemplos:
Cor HEX CorRGB Cor
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
Um exemplo de aplicação
O código seguinte representa o conteúdo de um ficheiro .htm.
<html>
<body>
<p style="background-color:#AA00FF">
Cor da linha definido em hexadecimal.
</p>
<p style="background-color:rgb(255,100,0)">
Cor da linha definido com RGB.
</p>
<p style="background-color:cyan">
Cor da linha definida por nome da cor.
</p>
</body>
</html>
O resultado da abertura desse ficheiro no browser, será:
Cor da linha definido em hexadecimal.
Cor da linha definido com RGB.
Cor da linha definida por nome da cor.
Como já foi visto, existe uma analogia entre este modelo e o modelo de cores HTML e o
modelo RGB, sendo então possível representar 256x256x256 = 16 777 216 cores
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
10
diferentes. Os tons de cinzento são representados usando igual quantidade das três cores
componentes.
Os browsers actuais são capazes de reconhecer cerca de 150 cores pelo seu nome,
conforme se pode verificar no link, www.w3schools.com/html/html_colornames.asp. No
entanto, o World Wide Web Consortium (W3C) definiu uma lista de 16 nomes de cores
válidos para o HTML e CSS.
aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and yellow
Cores seguras
Há alguns anos atrás, quando surgiu o HTML, os computadores suportavam apenas 256
cores diferentes. Por essa razão, definiu-se nessa época uma lista de 216 cores diferentes,
como o padrão de cores Web, reservando 40 cores para uso exclusivo do sistema, de forma
a garantir que todos os browsers pudessem representar essas cores correctamente.
Convencionou-se usar apenas 6 bits de tonalidades para o vermelho, verde e azul,
resultando assim 6 x 6 x 6=216 cores.
Actualmente esse problema não se põe, já que qualquer computador tem a sua
configuração gráfica normalmente ajustada para no mínimo, 24 bits de cor (truecolor).
Fontes:
http://www.w3schools.com/html/html_colors.asp
http://en.wikipedia.org/wiki/Web_colors
Conversão Entre Modelos de Cor
Existem formas diferentes de conversão entre os vários modelos de representação de cor.
Algumas podem ser encontrados em http://www.easyrgb.com/index.php?X=MATH.
Exemplo: RGB para CMYK
Dada uma cor RGB, deve-se converter os valores para o intervalo de [0,1], correspondendo o
0 ao 0 e 1 ao 255.
Dada a cor RGB (0,150,250);
Depois de converter os valores para o intervalo [0,1], aplica-se o seguinte algoritmo:
C' = 1 – R;
M' = 1 – G;
Y' = 1 – B;
If C'=1 and M'=1 and Y'=1 then
CMYK = (0,0,0,1);
else
{
K = minimum (C', M', Y');
C = (C' – K) / (1 – K);
M = (M' – K) / (1 – K);
Y = (Y' – K) / (1 – K);
}
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
11
Através de uma folha de cálculo pode-se facilmente aplicar o algoritmo e obter o resultado,
RGB (0,150,250) CMYK (100,40,0,2).
VALOR [0..1]
R 0 0,000 C' 1,000 C 100%
G 150 0,588 M' 0,412 M 40%
B 250 0,980 Y' 0,020 Y 0%
K 2%
Confirmando através do programa de manipulação de imagem, GIMP, temos:
Através do site http://web.forret.com/tools/color.asp podemos confirmar os resultados
anteriores, bem como para os modelos, HSV e YUV.
Fontes
http://web.forret.com/tools/color.asp
http://www.alvyray.com/Papers/hsv2rgb.htm
http://www.cs.rit.edu/~ncs/color/t_convert.html
http://en.literateprograms.org/RGB_to_HSV_color_space_conversion_%28C%29
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
12
GRÁFICOS
Os gráficos de computador dividem-se em duas categorias: gráficos de rastreio ou bitmap
e gráficos vectoriais.
Bitmap ou Raster (Rastreio)
Basicamente um bitmap é um array (matriz) de pixels. Um bitmap pode ter uma
“profundidade” e uma resolução. O valor de cada ponto (cor) é armazenado
individualmente (pixel). Normalmente as imagens de bitmap ao serem ampliadas, os
pontos ficam maiores e surgem mais visíveis as imperfeições da imagem. Também na
impressão os resultados podem não ser muito bons.
Características
Fácil de implementar.
Funciona bem com imagens complexas.
Pouco flexível.
Pode necessitar de muita memória.
Gráficos Vectoriais
As imagens vectoriais são representações de entidades geométricas como um círculo, um
rectângulo ou um segmento, em vez de pixels. Estes são representados por fórmulas
matemáticas (um rectângulo é definido por dois pontos, um círculo por um centro e um
raio, uma curva por vários pontos e uma equação). É o processador que se encarrega de
“traduzir” estas formas em informação interpretável pela placa gráfica. Assim, é possível
aplicar-lhe facilmente transformações geométricas (expansão, redução, …) adequando-se à
escala. Tanto ao nível da visualização como da impressão, temos sempre curvas perfeitas.
As imagens vectoriais geralmente ocupam menos espaço que as imagens de bitmap.
Características
Funcionam bem como linhas de arte (aplicações CAD) e imagens com formas simples.
Flexíveis.
Requerem pouca memória.
Fig. 14 – Comparação entre uma imagem bitmap e uma vectorial
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
13
Picture Element - Pixel
Um pixel corresponde ao elemento mínimo que se pode representar num ecrã de
computador. Tem origem nas palavras “picture element”. Quando estes pixels são
representados num ecrã em forma de matriz, formam uma imagem. Esta matriz de pixels é
chamada de bitmap.
Não se deve confundir pixel com os pontos visíveis no ecrã. Quando nos aproximamos
junto deste, são visíveis ínfimos pontos que não são pixels, mas sim furos numa grelha
metálica através da qual passa a luz que constitui a imagem visível.
Numa imagem a preto e branco, cada pixel pode ser representado apenas por 1 bit, ou seja,
1 se o pixel for preto e 0 se o pixel for branco.
Fig 15a - Uma imagem bitmap Fig. 15b - A mesma imagem ampliada
Normalmente é necessário mais do que 1 bit por pixel para representar uma imagem. Isso
depende da “profundidade” de cor da imagem.
Profundidade de cor – em Bits
A profundidade de cor (color depth) corresponde ao número de bits usados por pixel para
armazenar em memória ou representar num monitor, a cor de um pixel numa imagem do
tipo bitmap. Este conceito é conhecido também por bits por pixel (bpp). Quanto maior o
valor da profundidade da cor de uma imagem, maior é a escala de cores disponível.
Bits Cores
1 2 = 21
2 4 = 22
4 16 = 24
8 256 = 28
16 65 536 = 216
24 16 777 216 = 224
A Fig. 16 mostra a mesma imagem representada com diferentes profundidades de cor.
Quanto maior a quantidade de bits por pixel, maior o tamanho em bytes do ficheiro que a
guarda.
1 bit (preto e branco) 4 bit (16 cores)
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
14
8 bit (256 cores) 24 bit (Truecolor)
Fig. 16 – Comparação de uma imagem com diferentes profundidades de cor
Padrões gráficos / “Resolução”
A resolução é o termo usado para descrever o número de pixels na horizontal e na vertical,
usados para mostrar uma imagem. Resoluções mais elevadas, implicam o uso de maior
quantidade de pixels. A resolução de um monitor é composta por milhares de pixels. Esse
valor é indicado por uma combinação, por exemplo 1024x768. Isto significa que o monitor
representa 1024 pontos na horizontal e 768 na vertical, contabilizando um total de 786
432 pontos que constituem a área de imagem no monitor.
Ao longo da história do desenvolvimento dos diferentes dispositivos de visualização
gráfica, foram adoptados vários padrões de referência, com resoluções fixas e aspect ratio
(razão entre comprimento e largura).
Na tabela seguinte resumem-se alguns padrões gráficos, de dispositivos de visualização
(monitores) destacando-se em cor os mais representativos.
Standard
Resolução
(pixels)
Aspect
Ratio
Standard
Resolução
(pixels)
Aspect
Ratio
CGA 4-
color
320×200 16:10 WSXGA 1600×1024 25:16
QVGA 320×240 4:3 WSXGA+ 1680×1050 16:10
EGA 640×350 64:35 UXGA 1600×1200 4:3
VGA 640×480 4:3 WUXGA 1920×1200 16:10
WGA ou
WVGA
800×480 5:3 QXGA 2048×1536 4:3
SVGA 800×600 4:3 WQXGA 2560×1600 16:10
XGA 1024×768 4:3 QSXGA 2560×2048 5:4
XGA+ 1152×864 4:3 WQSXGA 3200×2048 25:16
SXGA 1280×1024 5:4 QUXGA 3200×2400 4:3
WXGA 1280×800 16:10 WQUXGA 3840×2400 16:10
WXGA 1366×768 16:9 HSXGA 5120×4096 5:4
WSXGA or
WXGA+
1440×900 16:10 WHSXGA 6400×4096 25:16
SXGA+ 1400×1050 4:3 HUXGA 6400×4800 4:3
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
15
Refs:
http://en.wikipedia.org/wiki/Computer_display_standard
http://en.wikipedia.org/wiki/List_of_common_resolutions
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
16
Formatos de Ficheiros de Imagem de Bitmap
Existe uma grande variedade de formatos de ficheiros para imagens. Cada um tem as suas
características específicas. Alguns, armazenam a imagem de uma forma comprimida,
outros armazenam uma imagem com uma profundidade de cor específica e outros são
específicos para uma determinada aplicação. Segue-se uma lista dos tipos de ficheiros
mais comuns.
BMP
Um formato standard de ficheiro de gráficos do
Microsoft Windows.
Usado no Paint (Paintbrush) e outros programas.
Capaz de armazenar imagens de 24-bit.
JPG
Um standard para imagem fotográfica
comprimida, criado pelo Joint Photographics
Experts Group.
Tira vantagem das limitações da visão humana
para atingir elevados níveis de compressão.
Pequena perda de qualidade com a compressão o
que permite ao utilizador estabelecer o nível de
compressão desejado sem grande perda de
qualidade.
TIFF
Tagged Image File Format (TIFF), pode
armazenar vários tipos de imagens:
monocromáticas, tons de cinzento, 8-bit e 24-bit
RGB, etc.).
Desenvolvido pela Aldus Corp nos anos 80 e mais
tarde suportada pela Microsoft.
TIFF é um formato com o mínimo de perda de
qualidade.
Hoje em dia já não apresenta vantagens sobre os
novos formatos JPEG. Caiu de popularidade.
Foi essencialmente usado em scanners.
GIF
Graphics Interchange Format (GIF) criado pela
UNISYS Corp. e Compuserve, inicialmente para
transmitir imagens através de linhas telefónicas
via modem, nos primórdios da Internet.
Usam o algoritmo de codificação de Lempel-Ziv
Welch (LZW), sem perdas.
Limitadas a imagens de cor de apenas 8-bit por
pixel (máximo de 256 cores).
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
17
PNG
O formato PNG, é um formato de imagem
desenvolvido por um consórcio de produtores de
software gráfico como um formato não
proprietário alternativo ao GIF.
O formato PNG foi desenvolvido especialmente
para ser usado em páginas Web, oferece uma
gama de atributos atractivos que deveriam
transformar este formato num dos mais
populares. Na verdade o formato não atingiu os
níveis previstos e alguns “browsers” nem sequer
o suportam.
Resumo
FORMATO
PROFUNDIDADE
DE COR (bits)
COMPRIMIDO
(S/N)
PERDAS
(S/N)
ALGORITMO
COMPRESSÃO
BMP 24 N − −
JPG/JPEG/JFIF 24 S S DCT
GIF 8 S N LZW
TIFF 24 S N LZW
PNG 24 S N DEFLATE
TGA 24 S N RLE
PICT/PCT/PIC 24
Formato criado e utilizado pela Apple. Suporta também
gráficos vectoriais.
PCX 8
Personal Computer eXchange foi o formato nativo do PC
Paintbrush tendo-se tornado no mais utilizado pelo DOS.
PGM
8
(256 tons cinza)
Ficheiros de texto ASCII ou binário, onde estão definidos
os parâmetros da imagem.
Algumas imagens aparentemente de 24-bit são na verdade imagens de 32-bit. O byte extra
para cada pixel é usado para armazenar um valor alpha, que representa informação sobre
alguns efeitos especiais, como pixel transparency, que pode ser usado para definir uma
máscara para composição de uma imagem sobre outra.
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
18
Formatos de Ficheiros de Imagens Vectoriais
SVG
Scalable Vector Graphics - SVG é uma linguagem para descrever gráficos vectoriais
bidimensionais, estáticos e dinâmicos (animações) em XML. Foi desenvolvido pela
W3C, como um open standard.
As imagens SVG são descritas num ficheiro de texto XML. Podem ser editadas com
qualquer editor de texto. Os browsers modernos suportam este formato, com excepção
do Internet Explorer, onde é necessário instalar pluggins para o interpretar, como o
Adobe SVG Viewer, http://www.adobe.com/svg/viewer/install/
A maioria dos programas de edição de gráficos vectoriais suporta este formato.
Existe em versão compactada, o SVGZ.
CDR Drawing (vector image) criado para o CorelDRAW. Formato proprietário usado pela
Corel não reconhecido pela maioria dos programas de edição de gráficos.
AI
Adobe Illustrator Artwork (AI) é um formato proprietário desenvolvido pela Adobe
Systems para representação de desenhos vectoriais. É suportado por vários programas
de edição.
WMF/
EMF
Windows Metafile (WMF) é um formato do Microsoft Windows. Este formato é portável
entre as várias aplicações da Microsoft e pode suportar componentes vectoriais e
bitmaps. A maioria dos Clipart do Windows está neste formato.
Existe uma versão melhorada, mais recente, designada por Enhanced Metafile (EMF).
CGM
Computer Graphics Metafile (CGM) é um formato para gráficos vectoriais 2D, rastreio e
texto. Foi criado para suportar várias aplicações, originalmente usado para bibliotecas
de clipart. É actualmente usado pelo AutoCAD.
Todos os elementos gráficos que constituem um desenho podem ser especificados num
ficheiro de texto, compilável num ficheiro binário. Este formato é transversal entre
plataformas e aplicações diferentes. Foi superado por formatos mais recentes, como o
SVG e DXF.
PICT/PC
T/PIC
PICT é um formato de gráficos desenvolvidos para o computador Apple Macintosh
como um formato standard. Suporta também imagens de bitmap e texto, transversal
entre aplicações Mac, muito utilizado pelo programa de desenho QuickDraw.
DXF
AutoCAD DXF (Drawing Interchange Format, ou Drawing Exchange Format) é um
formato desenvolvido pela Autodesk, para suportar a interoperacionalidade entre o
AutoCAD e uma extensa lista de outros programas.
DWG
DWG ("drawing") é um formato usado para armazenar desenho 2D e 3D. É o formato
nativo de várias aplicações CAD, como o AutoCAD, IntelliCAD ou Caddie.
PLT Ficheiro de gráficos vectoriais usado por plotters criado para software AutoCAD.
ODG
(Open Document Graphics) - ODG é um formato usado pelo OpenOffice para armazenar
desenhos criados pelo programa Draw. É um standard open.
SWF
"Small Web Format" ou "Shockwave Flash" da Macromedia. Um formato que ocupa
pouco espaço, desenvolvido essencialmente para publicação na Web. Os ficheiros SWF
podem conter animação e interactividade. São actualmente muito utilizados.
Um exemplo de um ficheiro SVG
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
19
Software habitual
Existe uma grande quantidade de programas de tratamento de imagem de rastreio e
também imagem vectorial. Segue-se uma lista de apenas alguns dos mais utilizados.
Tratamento de imagem de bitmap Tratamento de imagens vectoriais
Adobe Photoshop
GIMP (Free)
Xara
Paint Shop Pro (Free)
Paint Net (Free)
Adobe Illustrator
Adobe Freehand
Corel Draw
Inkscape (Free)
Algoritmos de Compressão
Com o evoluir dos sistemas de captura e síntese de imagem, cedo se constatou que um
ficheiro de imagem “pura” (.bmp, mapa de bits) ocupa bastante espaço (comp x larg x 3
Byte), chegando facilmente aos MegaBytes. Houve necessidade de criar ficheiros em que os
dados fossem comprimidos, de forma reduzir o espaço físico ocupado por esses ficheiros.
Surgiram então vários algoritmos de compressão. Existem dois tipos de algoritmos de
compressão de imagem: lossless (sem perda) e lossy (com perda).
Compressão sem perdas (Lossless)
O algoritmo reduz o tamanho do ficheiro sem reduzir a qualidade da imagem. No entanto,
a taxa de compressão deste algoritmo não é muito grande.
Compressão com perdas (Lossy)
O algoritmo tira vantagem das limitações da visão humana descartando informação
invisível. Muitos destes algoritmos têm vários níveis de compressão. Para níveis mais
elevados de compressão, a deterioração da imagem pode tornar-se perceptível. Vejamos
alguns dos mais conhecidos, já referidos quando se resumiu algumas das características
dos formatos mais comuns de ficheiros de imagem.
RLE - Run-Length Encoding
É uma forma simples de compressão de dados que no essencial contabiliza os dados
repetidos numa sequência de dados, e apresenta esses dados de uma outra forma mais
condensada. Não é muito eficiente, se o ficheiro não apresenta muitas repetições de dados.
Exemplo
Consideremos uma sequência de texto plano.
WWWWWWWWWWWWBWWWWWWWWWWWWBBBWWWWWWWWWWWWWWWWWWWWWWWWBWWWWWWWWWWWWWW
Se aplicarmos o algoritmo (RLE) a linha acima passaria a ser representada por,
12W1B12W3B24W1B14W
Passamos de 67 caracteres originalmente para apenas 18.
Como é óbvio, este algoritmo pode ser aplicado também a ficheiros binários.
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
20
LZW - Lempel–Ziv–Welch
É um algoritmo universal de compressão de dados sem perda criado por Abraham Lempel,
Jacob Ziv e Terry Welch. É um algoritmo de implementação rápida mas não muito eficiente.
LZ77 e LZ78
LZ77 e LZ78 são os nomes de dois algoritmos de compressão de dados sem perda, da
autoria de Abraham Lempel e Jacob Ziv, que são a base da maioria das variações LZ, e
incluem o LZW, LZSS, LZMA e outros.
DCT - Discrete Cosine Transform
O algoritmo DCT (Discrete Cosine Transform) exprime uma sequência finita de pontos,
como somas de funções co-seno oscilando entre frequências diferentes. Baseia-se nas
Transformadas de Fourrier e tem utilização em enumeras áreas científicas e de
engenharia. Por exemplo, na compressão áudio, com o formato MP3 e na compressão de
imagens com o formato JPEG.
Fig. 17 – DCT aplicado a uma imagem
DEFLATE
É um algoritmo de compressão de dados, sem perdas, que usa uma combinação do LZ77 e
codificação de Huffman. Foi originalmente desenvolvido por Phil Katz para a versão 2 do
compactador PKZIP. O Deflate não tem patente registada e é de utilização livre, tendo sido
utilizado como algoritmo de compressão, em ficheiros gzip, zip, 7-zip e em ficheiros de
imagem PNG.
Refs:
http://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Welch
http://www.cs.cf.ac.uk/Dave/Multimedia/node214.html
http://michael.dipperstein.com/lzw/index.html
http://cnx.org/content/m11092/latest/
http://www.cs.cf.ac.uk/Dave/Multimedia/node234.html
http://en.wikipedia.org/wiki/DEFLATE
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
21
Anti-aliasing
Em processamento digital de sinal, anti-aliasing é a técnica de minimizar a distorção
conhecida por aliasing quando se pretende representar sinal de alta resolução em
resolução mais reduzida.
Anti-aliasing é utilizado em fotografia digital, gráficos de computador, áudio digital e
muitas outras aplicações.
Na representação de imagens, anti-aliasing consiste num processo de disfarçar os
contornos agudos nas imagens para fazer desaparecer o “efeito escada” das linhas. O
algoritmo usado para o efeito, procura os extremos na imagem e a seguir disfarça os pixels
adjacentes com tons mais claros. No exemplo abaixo (Fig. 18) pode ver-se uma imagem
sem o efeito e outra resultante da aplicação do efeito de anti-aliasing.
Imagem Original (x6) Imagem após Anti-aliasing (x6)
Fig. 18 – Anti-aliasing
Dithering
Dithering consiste no processo de converter uma imagem com uma determinada
profundidade de cor noutra com memos profundidade. Portanto, existe perda de
qualidade, mas em contrapartida ganha-se no espaço ocupado pela imagem.
Imagem Original Dithering para 256 cores
Quando se aplica o método de dithering numa imagem, este converte as cores que não
pode representar juntando duas ou mais cores que mais se aproximam, para gerar uma
única cor, próxima das originais.
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
22
Um formato “curioso”
Portable PixMap (PPM)
Portable BitMap (PBM)
Portable GrayMap (PGM)
http://en.wikipedia.org/wiki/Portable_Gray_Map
Each format differs in what colors it is designed to represent:
• PBM is for bitmaps (black and white, no grays)
• PGM is for grayscale
• PPM is for "pixmaps" which represent full RGB color.
File Descriptor Type Encoding
P1 Portable bitmap ASCII
P2 Portable graymap ASCII
P3 Portable pixmap ASCII
P4 Portable bitmap Binary
P5 Portable graymap Binary
P6 Portable pixmap Binary
PBM example
A simple example of the PBM format is as follows:
P1
# This is an example bitmap of the letter "J"
6 10
0 0 0 0 1 0
0 0 0 0 1 0
0 0 0 0 1 0
0 0 0 0 1 0
0 0 0 0 1 0
0 0 0 0 1 0
1 0 0 0 1 0
0 1 1 1 0 0
0 0 0 0 0 0
0 0 0 0 0 0
The string P1 identifies the file format. The hash sign introduces a comment. The next two numbers
give the width and the height. Then follows the matrix with the pixel values (in the monochrome
case here, only zeros and ones).
Here is the resulting image:
Here it is again magnified 20 times:
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
23
PGM example
The PGM and PPM formats (both ASCII and binary versions) have an additional parameter for the
maximum value in a line between the X and Y dimensions and the actual pixel data.
P2
# Shows the word "FEEP" (example from Netpbm man page on PGM)
24 7
15
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 3 3 3 3 0 0 7 7 7 7 0 0 11 11 11 11 0 0 15 15 15 15 0
0 3 0 0 0 0 0 7 0 0 0 0 0 11 0 0 0 0 0 15 0 0 15 0
0 3 3 3 0 0 0 7 7 7 0 0 0 11 11 11 0 0 0 15 15 15 15 0
0 3 0 0 0 0 0 7 0 0 0 0 0 11 0 0 0 0 0 15 0 0 0 0
0 3 0 0 0 0 0 7 7 7 7 0 0 11 11 11 11 0 0 15 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
PPM example
P3
# The P3 means colors are in ASCII, then 3 columns and 2 rows, then
255 for max color, then RGB triplets
3 2
255
255 0 0 0 255 0 0 0 255
255 255 0 255 255 255 0 0 0
The image (expanded)
The P6 binary format of the same image will store each color component of each pixel with one byte
(thus three bytes per pixel) in the order red, green, then blue. The file will be smaller but the color
information will not be readable by humans.
The PPM format is not compressed and thus requires more space and bandwidth than a
compressed format would require. For example, the above 192x128 PNG image has a file size of
187 bytes. When converted to a 192x128 PPM image, the file size is 73848 bytes. The PPM format is
generally an intermediate format used for image work before converting to a more efficient format,
for example the PNG (Portable Network Graphics) format, without any loss of information in the
intermediate step.

Mais conteúdo relacionado

Mais procurados

"Não sei se é sonhe, se realidade"
"Não sei se é sonhe, se realidade""Não sei se é sonhe, se realidade"
"Não sei se é sonhe, se realidade"MiguelavRodrigues
 
Sebastianismo - Frei Luís de Sousa
Sebastianismo - Frei Luís de SousaSebastianismo - Frei Luís de Sousa
Sebastianismo - Frei Luís de SousaAntónio Aragão
 
Antero de Quental
Antero de QuentalAntero de Quental
Antero de Quental010693
 
D. Madalena -Frei Luis de Sousa
D. Madalena -Frei Luis de SousaD. Madalena -Frei Luis de Sousa
D. Madalena -Frei Luis de Sousananasimao
 
Conceitos basicos multimedia
Conceitos basicos multimediaConceitos basicos multimedia
Conceitos basicos multimediaIEFP
 
Fernando Pessoa - Fingimento Artístico/Poético
Fernando Pessoa - Fingimento Artístico/PoéticoFernando Pessoa - Fingimento Artístico/Poético
Fernando Pessoa - Fingimento Artístico/PoéticoAlexandra Canané
 
Alberto Caeiro - poema I do guardador de rebanhos
Alberto Caeiro - poema I do guardador de rebanhosAlberto Caeiro - poema I do guardador de rebanhos
Alberto Caeiro - poema I do guardador de rebanhosBruno Meirim
 
O artigo de apreciação crítica
O artigo de apreciação críticaO artigo de apreciação crítica
O artigo de apreciação críticaFernanda Monteiro
 
Multimédia. O que é?
Multimédia. O que é?Multimédia. O que é?
Multimédia. O que é?flwring
 
Noite Fechada, de Cesário Verde
Noite Fechada, de Cesário VerdeNoite Fechada, de Cesário Verde
Noite Fechada, de Cesário VerdeDina Baptista
 
Bases sobre a teoria da cor aplicada aos sistemas digitais
Bases sobre a teoria da cor aplicada aos sistemas digitaisBases sobre a teoria da cor aplicada aos sistemas digitais
Bases sobre a teoria da cor aplicada aos sistemas digitaisgonsaloejoao
 
Maria de Noronha-Frei Luis de Sousa
Maria de Noronha-Frei Luis de SousaMaria de Noronha-Frei Luis de Sousa
Maria de Noronha-Frei Luis de Sousananasimao
 
Processos fonológicos
Processos fonológicosProcessos fonológicos
Processos fonológicosSílvia Faim
 
Cesario Verde Ave Marias Ana Catarina E Ana Sofia
Cesario Verde   Ave Marias   Ana Catarina E Ana SofiaCesario Verde   Ave Marias   Ana Catarina E Ana Sofia
Cesario Verde Ave Marias Ana Catarina E Ana SofiaJoana Azevedo
 

Mais procurados (20)

áLvaro de campos
áLvaro de camposáLvaro de campos
áLvaro de campos
 
Fernando Pessoa-Ortónimo
Fernando Pessoa-OrtónimoFernando Pessoa-Ortónimo
Fernando Pessoa-Ortónimo
 
"Não sei se é sonhe, se realidade"
"Não sei se é sonhe, se realidade""Não sei se é sonhe, se realidade"
"Não sei se é sonhe, se realidade"
 
Sebastianismo - Frei Luís de Sousa
Sebastianismo - Frei Luís de SousaSebastianismo - Frei Luís de Sousa
Sebastianismo - Frei Luís de Sousa
 
Antero de Quental
Antero de QuentalAntero de Quental
Antero de Quental
 
D. Madalena -Frei Luis de Sousa
D. Madalena -Frei Luis de SousaD. Madalena -Frei Luis de Sousa
D. Madalena -Frei Luis de Sousa
 
Bitmap x Vetor
Bitmap x VetorBitmap x Vetor
Bitmap x Vetor
 
Conceitos basicos multimedia
Conceitos basicos multimediaConceitos basicos multimedia
Conceitos basicos multimedia
 
Fernando Pessoa - Fingimento Artístico/Poético
Fernando Pessoa - Fingimento Artístico/PoéticoFernando Pessoa - Fingimento Artístico/Poético
Fernando Pessoa - Fingimento Artístico/Poético
 
Autopsicografia e Isto
Autopsicografia e IstoAutopsicografia e Isto
Autopsicografia e Isto
 
Alberto Caeiro - poema I do guardador de rebanhos
Alberto Caeiro - poema I do guardador de rebanhosAlberto Caeiro - poema I do guardador de rebanhos
Alberto Caeiro - poema I do guardador de rebanhos
 
O artigo de apreciação crítica
O artigo de apreciação críticaO artigo de apreciação crítica
O artigo de apreciação crítica
 
Multimédia. O que é?
Multimédia. O que é?Multimédia. O que é?
Multimédia. O que é?
 
Noite Fechada, de Cesário Verde
Noite Fechada, de Cesário VerdeNoite Fechada, de Cesário Verde
Noite Fechada, de Cesário Verde
 
A métrica e a rima
A métrica e a rimaA métrica e a rima
A métrica e a rima
 
Bases sobre a teoria da cor aplicada aos sistemas digitais
Bases sobre a teoria da cor aplicada aos sistemas digitaisBases sobre a teoria da cor aplicada aos sistemas digitais
Bases sobre a teoria da cor aplicada aos sistemas digitais
 
Maria de Noronha-Frei Luis de Sousa
Maria de Noronha-Frei Luis de SousaMaria de Noronha-Frei Luis de Sousa
Maria de Noronha-Frei Luis de Sousa
 
Processos fonológicos
Processos fonológicosProcessos fonológicos
Processos fonológicos
 
Modelos de Cor
Modelos de Cor Modelos de Cor
Modelos de Cor
 
Cesario Verde Ave Marias Ana Catarina E Ana Sofia
Cesario Verde   Ave Marias   Ana Catarina E Ana SofiaCesario Verde   Ave Marias   Ana Catarina E Ana Sofia
Cesario Verde Ave Marias Ana Catarina E Ana Sofia
 

Destaque

Docencia y tecnología
Docencia y tecnologíaDocencia y tecnología
Docencia y tecnologíaRonald Mora
 
Question 1 evaluation
Question 1   evaluationQuestion 1   evaluation
Question 1 evaluationEllenWright
 
Presentacion magdalena
Presentacion magdalenaPresentacion magdalena
Presentacion magdalenaJanet Ramírez
 
Hackathon Neuquen "Desde el Habeas Data al Open Data"
Hackathon Neuquen "Desde el Habeas Data al Open Data"Hackathon Neuquen "Desde el Habeas Data al Open Data"
Hackathon Neuquen "Desde el Habeas Data al Open Data"Gustavo Giorgetti
 
Principios de la taxonomía
Principios  de  la  taxonomíaPrincipios  de  la  taxonomía
Principios de la taxonomíaGiuliana Tinoco
 
Bolsas De Plastico
Bolsas De PlasticoBolsas De Plastico
Bolsas De Plasticoimmalola
 
Adherencia en cardiopatia isquemica abril10
Adherencia en cardiopatia isquemica  abril10Adherencia en cardiopatia isquemica  abril10
Adherencia en cardiopatia isquemica abril10José López Chicharro
 
Simpósio nossas deficiências - FMJ
Simpósio nossas deficiências - FMJ  Simpósio nossas deficiências - FMJ
Simpósio nossas deficiências - FMJ Alexandre Moreira
 
AL FILO DE LA NAVAJA DE TARAMUNDI EN: DE LOS LAGOS DE COVADONGA AL MIRADOR DE...
AL FILO DE LA NAVAJA DE TARAMUNDI EN: DE LOS LAGOS DE COVADONGA AL MIRADOR DE...AL FILO DE LA NAVAJA DE TARAMUNDI EN: DE LOS LAGOS DE COVADONGA AL MIRADOR DE...
AL FILO DE LA NAVAJA DE TARAMUNDI EN: DE LOS LAGOS DE COVADONGA AL MIRADOR DE...ALFONSO CASO DE LOS COBOS MARTINEZ
 
Informática jurídica
Informática jurídicaInformática jurídica
Informática jurídicaEdgar7Gosme
 
KüTüPhanecilik KulüBü
KüTüPhanecilik KulüBüKüTüPhanecilik KulüBü
KüTüPhanecilik KulüBüderslopedi
 
Curso Duette
Curso Duette Curso Duette
Curso Duette LENTICON
 
Estruturas de repetição (parte 01)
Estruturas de repetição (parte 01)Estruturas de repetição (parte 01)
Estruturas de repetição (parte 01)Eder Samaniego
 

Destaque (20)

Preguntas de la prueba
Preguntas de la pruebaPreguntas de la prueba
Preguntas de la prueba
 
Docencia y tecnología
Docencia y tecnologíaDocencia y tecnología
Docencia y tecnología
 
Relajación
Relajación Relajación
Relajación
 
Question 1 evaluation
Question 1   evaluationQuestion 1   evaluation
Question 1 evaluation
 
Presentacion magdalena
Presentacion magdalenaPresentacion magdalena
Presentacion magdalena
 
Hackathon Neuquen "Desde el Habeas Data al Open Data"
Hackathon Neuquen "Desde el Habeas Data al Open Data"Hackathon Neuquen "Desde el Habeas Data al Open Data"
Hackathon Neuquen "Desde el Habeas Data al Open Data"
 
Presentación1
Presentación1Presentación1
Presentación1
 
Principios de la taxonomía
Principios  de  la  taxonomíaPrincipios  de  la  taxonomía
Principios de la taxonomía
 
Componentes de una pc
Componentes de una pcComponentes de una pc
Componentes de una pc
 
Bolsas De Plastico
Bolsas De PlasticoBolsas De Plastico
Bolsas De Plastico
 
Practica 13 io
Practica 13 ioPractica 13 io
Practica 13 io
 
Adherencia en cardiopatia isquemica abril10
Adherencia en cardiopatia isquemica  abril10Adherencia en cardiopatia isquemica  abril10
Adherencia en cardiopatia isquemica abril10
 
Simpósio nossas deficiências - FMJ
Simpósio nossas deficiências - FMJ  Simpósio nossas deficiências - FMJ
Simpósio nossas deficiências - FMJ
 
AL FILO DE LA NAVAJA DE TARAMUNDI EN: DE LOS LAGOS DE COVADONGA AL MIRADOR DE...
AL FILO DE LA NAVAJA DE TARAMUNDI EN: DE LOS LAGOS DE COVADONGA AL MIRADOR DE...AL FILO DE LA NAVAJA DE TARAMUNDI EN: DE LOS LAGOS DE COVADONGA AL MIRADOR DE...
AL FILO DE LA NAVAJA DE TARAMUNDI EN: DE LOS LAGOS DE COVADONGA AL MIRADOR DE...
 
Arcis carcavilla-1
Arcis carcavilla-1Arcis carcavilla-1
Arcis carcavilla-1
 
Informática jurídica
Informática jurídicaInformática jurídica
Informática jurídica
 
KüTüPhanecilik KulüBü
KüTüPhanecilik KulüBüKüTüPhanecilik KulüBü
KüTüPhanecilik KulüBü
 
La memoria
La memoriaLa memoria
La memoria
 
Curso Duette
Curso Duette Curso Duette
Curso Duette
 
Estruturas de repetição (parte 01)
Estruturas de repetição (parte 01)Estruturas de repetição (parte 01)
Estruturas de repetição (parte 01)
 

Semelhante a BASES SOBRE A TEORIA DA COR APLICADA AOS SISTEMAS DIGITAIS

Teoria Cor
Teoria CorTeoria Cor
Teoria Cormartha
 
Aplicações Informáticas B cor e sistdigitais.pptx
Aplicações Informáticas B cor e sistdigitais.pptxAplicações Informáticas B cor e sistdigitais.pptx
Aplicações Informáticas B cor e sistdigitais.pptxDanielLima356312
 
Bases sobre a teoria da cor (1)
Bases sobre a teoria da cor (1)Bases sobre a teoria da cor (1)
Bases sobre a teoria da cor (1)Mafalda Galvão
 
Bases sobre a Teoria da Cor
Bases sobre a Teoria da CorBases sobre a Teoria da Cor
Bases sobre a Teoria da CorDiogo Palma
 
Bases sobre a teoria da cor aplicada aos Sistemas Informaticos
Bases sobre a teoria da cor aplicada aos Sistemas InformaticosBases sobre a teoria da cor aplicada aos Sistemas Informaticos
Bases sobre a teoria da cor aplicada aos Sistemas InformaticosMisa96
 
Bases sobre a teoria da cor aplicada aos
Bases sobre a teoria da cor aplicada aosBases sobre a teoria da cor aplicada aos
Bases sobre a teoria da cor aplicada aosMisa96
 
Bases sobre a teoria da cor aplicada aos
Bases sobre a teoria da cor aplicada aosBases sobre a teoria da cor aplicada aos
Bases sobre a teoria da cor aplicada aosMisa96
 
Modelo rgb 1
Modelo rgb 1Modelo rgb 1
Modelo rgb 1skupuz
 
Bases sobre a teoria da cor aplicada aos sistemas informáticos
Bases sobre a teoria da cor aplicada aos sistemas informáticosBases sobre a teoria da cor aplicada aos sistemas informáticos
Bases sobre a teoria da cor aplicada aos sistemas informáticoslamasduarte13
 
Bases sobre a teoria da cor aplicada aos sistemas digitais
Bases sobre a teoria da cor aplicada aos sistemas digitaisBases sobre a teoria da cor aplicada aos sistemas digitais
Bases sobre a teoria da cor aplicada aos sistemas digitaisbrunodaniel12a
 
Bases da teoria da cor
Bases da teoria da corBases da teoria da cor
Bases da teoria da corBrunopduarte
 
Computacao grafica
Computacao graficaComputacao grafica
Computacao graficaHélio Jovo
 

Semelhante a BASES SOBRE A TEORIA DA COR APLICADA AOS SISTEMAS DIGITAIS (20)

Modulo
ModuloModulo
Modulo
 
Teoria Cor
Teoria CorTeoria Cor
Teoria Cor
 
Teoria cor(2)
Teoria cor(2)Teoria cor(2)
Teoria cor(2)
 
Teoria cor(2)
Teoria cor(2)Teoria cor(2)
Teoria cor(2)
 
Teoria Cor
Teoria CorTeoria Cor
Teoria Cor
 
Aplicações Informáticas B cor e sistdigitais.pptx
Aplicações Informáticas B cor e sistdigitais.pptxAplicações Informáticas B cor e sistdigitais.pptx
Aplicações Informáticas B cor e sistdigitais.pptx
 
Cores - Colors
Cores  -  ColorsCores  -  Colors
Cores - Colors
 
Bases sobre a teoria da cor (1)
Bases sobre a teoria da cor (1)Bases sobre a teoria da cor (1)
Bases sobre a teoria da cor (1)
 
Unidade4 Parte I
Unidade4   Parte IUnidade4   Parte I
Unidade4 Parte I
 
Teoria da cor3
Teoria da cor3Teoria da cor3
Teoria da cor3
 
Bases sobre a Teoria da Cor
Bases sobre a Teoria da CorBases sobre a Teoria da Cor
Bases sobre a Teoria da Cor
 
Bases sobre a teoria da cor aplicada aos Sistemas Informaticos
Bases sobre a teoria da cor aplicada aos Sistemas InformaticosBases sobre a teoria da cor aplicada aos Sistemas Informaticos
Bases sobre a teoria da cor aplicada aos Sistemas Informaticos
 
Bases sobre a teoria da cor aplicada aos
Bases sobre a teoria da cor aplicada aosBases sobre a teoria da cor aplicada aos
Bases sobre a teoria da cor aplicada aos
 
Bases sobre a teoria da cor aplicada aos
Bases sobre a teoria da cor aplicada aosBases sobre a teoria da cor aplicada aos
Bases sobre a teoria da cor aplicada aos
 
Modelo rgb 1
Modelo rgb 1Modelo rgb 1
Modelo rgb 1
 
Cores
CoresCores
Cores
 
Bases sobre a teoria da cor aplicada aos sistemas informáticos
Bases sobre a teoria da cor aplicada aos sistemas informáticosBases sobre a teoria da cor aplicada aos sistemas informáticos
Bases sobre a teoria da cor aplicada aos sistemas informáticos
 
Bases sobre a teoria da cor aplicada aos sistemas digitais
Bases sobre a teoria da cor aplicada aos sistemas digitaisBases sobre a teoria da cor aplicada aos sistemas digitais
Bases sobre a teoria da cor aplicada aos sistemas digitais
 
Bases da teoria da cor
Bases da teoria da corBases da teoria da cor
Bases da teoria da cor
 
Computacao grafica
Computacao graficaComputacao grafica
Computacao grafica
 

BASES SOBRE A TEORIA DA COR APLICADA AOS SISTEMAS DIGITAIS

  • 1. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 1 3.2 BASES SOBRE A TEORIA DA COR APLICADA AOS SISTEMAS DIGITAIS Luz e Cor Para entender as cores, é preciso antes falar de luz. A luz branca (praticamente a totalidade da luz proveniente do Sol) é composta de radiações de diversos comprimentos de onda. Cada comprimento de onda corresponde a uma cor – ou seja, ao ser captado individualmente pelos nossos olhos, ele é convertido em impulsos eléctricos que fazem o cérebro perceber aquela cor. Fig. 1 – Espectro electromagnético Por exemplo, o vermelho tem um comprimento de onda de 700 nm ou 0,7µm. A cor de um material é determinada pelas médias de frequência dos pacotes de onda que as suas moléculas constituintes reflectem. Um objecto terá determinada cor se não absorver justamente os raios correspondentes à frequência daquela cor. Considerando as cores como luz, a cor branca resulta da sobreposição de todas as cores, enquanto o preto é a ausência de luz. Uma luz branca pode ser decomposta em todas as cores (o espectro) por meio de um prisma. Na natureza, esta decomposição origina um arco-íris. Cores Primárias e cores Secundárias Cor primária é uma cor que não pode ser decomposta noutras cores. Nunca é obtida a partir da mistura de outras cores. As cores primárias são um conceito, baseado na resposta do olho humano à luz. O olho humano normal possui três tipos de receptores, chamados cones, que respondem a comprimentos de onda diferentes: vermelha e laranja, verde e amarelo e azul e violeta. O primeiro tipo é denominado R (red), G (green) e B (blue). Foram eles que deram origem ao sistema RGB, que será analisado mais à frente. As cores, vermelho, verde e azul são consideradas cores primárias em fontes de luz, pois cada uma delas pode estimular os cones de forma praticamente independente, proporcionando uma ampla gama de cores. Quando duas cores primárias são misturadas em partes iguais, duas a duas, elas geram outras três cores: Ciano, Magenta e Amarelo, chamadas cores secundárias.
  • 2. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 2 Cores complementares Duas cores são complementares se, ao serem misturadas, produzem o preto, o branco ou uma graduação de cinza. Uma cor primária tem sempre uma cor secundária como complementar e vice- versa. A cor secundária complementar de uma cor primária é aquela formada pelas outras duas cores primárias. As cores complementares são as que mais diferem umas das outras. Nos sistemas RGB e CMY, as primárias de um sistema são secundárias do outro e vice-versa. Fig. 2 – Cores primárias e cores complementares Cada cor é sempre a intermediária entre as duas vizinhas. Em posição diametralmente opostas estão as cores complementares. Modelo CIE XYZ A Commission Internationale de l’Eclairage, CIE, propôs este modelo em 1931 como standard de medida de cor, a partir de uma série de experiências realizadas por David W. Wright e John Guild. O modelo baseia-se nas três cores primárias da luz, vermelho, verde e azul com valores estímulo X, Y e Z respectivamente. Dado que o olho humano tem três tipos de cones que respondem a diferentes comprimentos de onda, este modelo representa numa figura tridimensional todas as cores visíveis pelo olho humano. Fig. 3- Diagrama de cromaticidade XYZ
  • 3. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 3 − As cores espectrais puras são representadas por uma curva em forma de ferradura; − A base da ferradura (magenta) representa cores não-espectrais; − O branco é um ponto no interior da ferradura; − As restantes cores são também pontos interiores. − A saturação corresponde à distância do ponto branco; − O matiz corresponde à intersecção da recta que passa pelo ponto com a ferradura; − A luminância corresponde ao eixo z. Ref: http://upload.wikimedia.org/wikipedia/en/5/52/Chromaticity_diagram_full.pdf http://en.wikipedia.org/wiki/Chromaticity_diagram#The_CIE_xy_chromaticity_diagram_and_the_C IE_xyY_color_space Modelo RYB Nas artes plásticas usa-se um sistema de cores diferente, chamado sistema RYB, que tem em conta os pigmentos existentes. Nesse sistema o (Red) Vermelho, o (Blue) Azul e o (Yellow) Amarelo são tratados como cores primárias. A teoria das cores diz que misturando cores primárias, pode-se obter qualquer cor. Modelo RYB CORES SECUNDÁRIAS: Verde = Azul + Amarelo Laranja = Amarelo + Vermelho Violeta = Azul + Vermelho Modelo RGB CORES SECUNDÁRIAS: Ciano = Azul + Verde Magenta = Azul + Vermelho Amarelo = Vermelho + Verde Fig. 4 – Modelos de cor RYB e RGB Como o sistema RYB não representa todas as cores perceptíveis pelo olho humano actualmente são considerados dois modelos de classificação de cores: o modelo aditivo (ou luminoso) RGB e o modelo subtractivo (ou reflexivo) CMY. O sistema CMYK consiste no modelo CMY acrescido de Preto (K) e é usado pela indústria gráfica em vários sistemas de impressão.
  • 4. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 4 Modelo RGB O modelo de cores RGB é um modelo aditivo no qual o vermelho, o verde e o azul são combinados de várias maneiras para reproduzir outras cores. O nome do modelo e a abreviatura RGB vêm das três cores primárias: vermelho, verde e azul (Red, Green e Blue, em inglês), e só foi possível devido ao desenvolvimento tecnológico de tubos de raios catódicos – com os quais foi possível fazer a representação de cores. Fig. 5 – Modelo de cor RGB O propósito principal do sistema RGB é a reprodução de cores em dispositivos electrónicos como monitores, TV, "datashows", scanners e câmaras digitais, assim como na fotografia tradicional. O modelo de cores RGB é baseado na teoria de visão colorida tricromática, de Young-Helmholtz, e no triângulo de cores de Maxwell. Funcionamento Uma cor no modelo de cores RGB é descrita pela indicação da quantidade de vermelho, verde e azul que contém. Cada uma pode variar entre o mínimo, 0, (completamente escuro) e máximo, 255, (completamente intenso), conforme mostra a Fig. 6. Este é um exemplo de uma cor RGB, com as componentes: RGB (213,111,56) Fig. 6 –Variação de cada cor; Cor resultante de uma combinação de RGB Quando todas as cores estão no mínimo, o resultado é preto. Se todas estão no máximo, o resultado é branco. A representação com 24-bit Os valores de RGB são uma codificação de 24 bit por pixel (bpp) que constituem uma imagem. Cada uma das cores, R, G e B é codificada com 8 bit, ou seja, com um valor de 0 a 255, que representa a intensidade de vermelho, verde e azul, como já foi visto anteriormente. Esta representação de cor é um standard na representação de imagem em
  • 5. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 5 dispositivos gráficos, também conhecido como True Color, comum a vários formatos de imagem, tais como BMP ou JPG. Permite a representação de cerca de 16,7 milhões de combinações diferentes de cor. Fig. 7 – A representação das cores num dispositivo gráfico R G B COR VALOR HEXADECIMAL 0 0 0 PRETO #000000 255 0 0 VERMELHO #FF0000 0 255 0 VERDE #00FF00 0 0 255 AZUL #0000FF 255 255 0 AMARELO #FFFF00 0 255 255 CIANO #00FFFF 255 0 255 MAGENTA #FF00FF 255 255 255 BRANCO #FFFFFF 100 100 100 CINZA #646464 Neste modelo, as cores são complementares às do sistema CMYK - Ciano (Cyan), Magenta (Magenta), Amarelo (Yellow) e Preto (blacK) e a mistura das três, forma o Branco. Modelo CMY(K) Este sistema (subtractivo ou de cor pigmento) consiste na mistura das cores secundárias da luz (também chamadas de primárias em artes plásticas), Ciano (Cyan), Magenta (Magenta), Amarelo (Yellow), CMY. Como o sistema CMY não reproduz fielmente os tons mais escuros, é necessária a aplicação de preto "puro", (blacK/Key). Este sistema é utilizado por impressoras, na indústria gráfica e em fotocopiadores. Fig. 8 – Modelo de cor CMY
  • 6. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 6 Como se pode verificar na Fig. 3, o Ciano é a cor oposta ao Vermelho, significa que actua como um filtro que absorve essa cor (-R +G +B). Da mesma forma, Magenta é a oposta ao Verde (+R -G +B) e Amarelo é a oposta ao Azul (+R +G -B). Assim, as cores primárias de pigmento combinadas duas a duas, na mesma proporção, geram o seguinte resultado: + = Magenta + Amarelo = Vermelho + = Magenta + Ciano = Azul + = Ciano + Amarelo = Verde Focos de luz primária combinados dois a dois geram o seguinte resultado: + = Azul + Vermelho = Magenta + = Vermelho + Verde = Amarelo + = Verde + Azul = Ciano As cores primárias de luz são as cores secundárias de pigmento, tal como as secundárias de luz são as primárias de pigmento. Modelo HSV (HSB) O modelo HSV (Hue, Saturation, Value – Tonalidade, Saturação, Valor), também conhecido por HSB (Hue, Saturation, Brightness – Tonalidade, Saturação, Brilho), define um modelo de cor em função de três parâmetros, constituintes de um cone: Matiz (tonalidade): Verifica o tipo de cor, abrangendo todas as cores do espectro, desde o vermelho até o violeta. Varia entre os valores 0° e 360°, podendo em algumas aplicações ser normalizado de 0 a 100%. − 0° ou 360° VERMELHO ; − 60° AMARELO ; − 120° VERDE ; − 180° CIANO ; − 240° AZUL ; − 300° MAGENTA. Saturação: Quanto menor este valor, mais cinza é a imagem. Quanto maior o valor, mais "berrante" é a imagem. Varia entre 0 e 100%. Valor, ou brilho: Define o brilho da cor. Varia de 0 a 100%. Fig. 9 - Cone de cores do espaço HSV
  • 7. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 7 Este sistema foi criado em 1978, por Alvy Ray Smith. Consiste numa transformação não linear, i.e, uma conversão que depende do dispositivo que a representa. As cores são definidas por trios (h, s, v) e são dependentes das cores Red, Green e Blue primárias do espaço RGB do dispositivo gráfico específico, e da compressão gamma[1] usada para representar as quantidades dessas cores primárias. Modelo YUV YUV é um espaço de cor habitualmente usado em sistemas de vídeo a cores, NTSC, PAL, SECAM e vídeo composto. Define um espaço de cor tendo em conta a percepção humana, em termos de uma componente de luminância (Y) e duas componentes de crominância (UV). Fig. 10 - Plano de cores U-V, Y' = 0.5, representado com gamut[2] RGB O modelo YUV está más próximo do modelo de percepção humana do que o RGB usado em hardware gráfico de computador, mas mais afastado do espaço de cor HSV. Existem outras nomenclaturas, por vezes ambíguas, para sistemas similares ou coincidentes, designadas por termos como, Y'UV, YUV, YCbCr, YPbPr, etc… Outros Modelos MUNSELL http://www.xrite.com/top_munsell.aspx L.a.b. (LAB) http://www.optics.arizona.edu/opti588/reading/CIE_Lab_color_space.pdf NCS http://www.ncscolour.com/en/lm/colour-knowledge/how-ncs-works/ncs-notation/ [1] http://en.wikipedia.org/wiki/Gamma_correction [2] Gamut ou cor gamut é um subconjunto completo de cores.
  • 8. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 8 Pantone Existem diferentes sistemas comerciais de definição de cores, sendo o mais conhecido deles, o sistema Pantone, onde as cores são referenciadas por números. Fig. 11 – Um excerto de um Pantone O Pantone Matching System, foi criado em 1963 com o objectivo de alcançar um standard para a comunicação e reprodução de cores nas artes gráficas. Baseia-se na edição de uma série de catálogos em papel ou outros suportes, tabelando uma codificação estandardizada, onde cada cor específica é referenciada por um número único. A limitação do Gamut A representação da gama completa de cores, gamut, que o olho humano consegue distinguir é demasiado grande. Os modelos de representação de cor mais usados, RGB e CMYK, possuem limitações na representação de toda essa gama que nós conseguimos efectivamente ver, conforme se esquematiza na imagem seguinte. Fig. 12 – Gamuts RGB e CMY sobre diagrama de cromaticidade CIE A Fig. 12 mostra claramente uma sobreposição das gamas de cor dos modelos RGB e CMYK, sobre o diagrama de cromaticidade CIE de 1931, que representa a gama completa da percepção humana de cor. O gamut exato de um modelo de cor depende de dispositivo que o representa. Todo o dispositivo gráfico, monitor, scanner, impressora, tem o seu gamut individual. http://www.youtube.com/watch?v=0AYNOF7gSFg&feature=related
  • 9. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 9 Estas diferenças no gamut podem criar problemas na reprodução de cor em gráficos ou páginas gerados por computador, a um nível profissional. Este é um problema inerente à produção de gráficos produzidos por computador. Cores HTML As cores HTML são definidas usando uma notação hexadecimal (Hex) para combinar valores de Vermelho, Verde e Azul (RGB). Esses valores podem variar, para cada cor, entre 0 (Hex 00) e 255 (Hex FF). Os valores Hex são escritos juntando 3 grupos de dois dígitos hexadecimais, antecedidos por um # (triplet). Vejamos os exemplos: Cor HEX CorRGB Cor #000000 rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255) Um exemplo de aplicação O código seguinte representa o conteúdo de um ficheiro .htm. <html> <body> <p style="background-color:#AA00FF"> Cor da linha definido em hexadecimal. </p> <p style="background-color:rgb(255,100,0)"> Cor da linha definido com RGB. </p> <p style="background-color:cyan"> Cor da linha definida por nome da cor. </p> </body> </html> O resultado da abertura desse ficheiro no browser, será: Cor da linha definido em hexadecimal. Cor da linha definido com RGB. Cor da linha definida por nome da cor. Como já foi visto, existe uma analogia entre este modelo e o modelo de cores HTML e o modelo RGB, sendo então possível representar 256x256x256 = 16 777 216 cores
  • 10. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 10 diferentes. Os tons de cinzento são representados usando igual quantidade das três cores componentes. Os browsers actuais são capazes de reconhecer cerca de 150 cores pelo seu nome, conforme se pode verificar no link, www.w3schools.com/html/html_colornames.asp. No entanto, o World Wide Web Consortium (W3C) definiu uma lista de 16 nomes de cores válidos para o HTML e CSS. aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow Cores seguras Há alguns anos atrás, quando surgiu o HTML, os computadores suportavam apenas 256 cores diferentes. Por essa razão, definiu-se nessa época uma lista de 216 cores diferentes, como o padrão de cores Web, reservando 40 cores para uso exclusivo do sistema, de forma a garantir que todos os browsers pudessem representar essas cores correctamente. Convencionou-se usar apenas 6 bits de tonalidades para o vermelho, verde e azul, resultando assim 6 x 6 x 6=216 cores. Actualmente esse problema não se põe, já que qualquer computador tem a sua configuração gráfica normalmente ajustada para no mínimo, 24 bits de cor (truecolor). Fontes: http://www.w3schools.com/html/html_colors.asp http://en.wikipedia.org/wiki/Web_colors Conversão Entre Modelos de Cor Existem formas diferentes de conversão entre os vários modelos de representação de cor. Algumas podem ser encontrados em http://www.easyrgb.com/index.php?X=MATH. Exemplo: RGB para CMYK Dada uma cor RGB, deve-se converter os valores para o intervalo de [0,1], correspondendo o 0 ao 0 e 1 ao 255. Dada a cor RGB (0,150,250); Depois de converter os valores para o intervalo [0,1], aplica-se o seguinte algoritmo: C' = 1 – R; M' = 1 – G; Y' = 1 – B; If C'=1 and M'=1 and Y'=1 then CMYK = (0,0,0,1); else { K = minimum (C', M', Y'); C = (C' – K) / (1 – K); M = (M' – K) / (1 – K); Y = (Y' – K) / (1 – K); }
  • 11. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 11 Através de uma folha de cálculo pode-se facilmente aplicar o algoritmo e obter o resultado, RGB (0,150,250) CMYK (100,40,0,2). VALOR [0..1] R 0 0,000 C' 1,000 C 100% G 150 0,588 M' 0,412 M 40% B 250 0,980 Y' 0,020 Y 0% K 2% Confirmando através do programa de manipulação de imagem, GIMP, temos: Através do site http://web.forret.com/tools/color.asp podemos confirmar os resultados anteriores, bem como para os modelos, HSV e YUV. Fontes http://web.forret.com/tools/color.asp http://www.alvyray.com/Papers/hsv2rgb.htm http://www.cs.rit.edu/~ncs/color/t_convert.html http://en.literateprograms.org/RGB_to_HSV_color_space_conversion_%28C%29
  • 12. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 12 GRÁFICOS Os gráficos de computador dividem-se em duas categorias: gráficos de rastreio ou bitmap e gráficos vectoriais. Bitmap ou Raster (Rastreio) Basicamente um bitmap é um array (matriz) de pixels. Um bitmap pode ter uma “profundidade” e uma resolução. O valor de cada ponto (cor) é armazenado individualmente (pixel). Normalmente as imagens de bitmap ao serem ampliadas, os pontos ficam maiores e surgem mais visíveis as imperfeições da imagem. Também na impressão os resultados podem não ser muito bons. Características Fácil de implementar. Funciona bem com imagens complexas. Pouco flexível. Pode necessitar de muita memória. Gráficos Vectoriais As imagens vectoriais são representações de entidades geométricas como um círculo, um rectângulo ou um segmento, em vez de pixels. Estes são representados por fórmulas matemáticas (um rectângulo é definido por dois pontos, um círculo por um centro e um raio, uma curva por vários pontos e uma equação). É o processador que se encarrega de “traduzir” estas formas em informação interpretável pela placa gráfica. Assim, é possível aplicar-lhe facilmente transformações geométricas (expansão, redução, …) adequando-se à escala. Tanto ao nível da visualização como da impressão, temos sempre curvas perfeitas. As imagens vectoriais geralmente ocupam menos espaço que as imagens de bitmap. Características Funcionam bem como linhas de arte (aplicações CAD) e imagens com formas simples. Flexíveis. Requerem pouca memória. Fig. 14 – Comparação entre uma imagem bitmap e uma vectorial
  • 13. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 13 Picture Element - Pixel Um pixel corresponde ao elemento mínimo que se pode representar num ecrã de computador. Tem origem nas palavras “picture element”. Quando estes pixels são representados num ecrã em forma de matriz, formam uma imagem. Esta matriz de pixels é chamada de bitmap. Não se deve confundir pixel com os pontos visíveis no ecrã. Quando nos aproximamos junto deste, são visíveis ínfimos pontos que não são pixels, mas sim furos numa grelha metálica através da qual passa a luz que constitui a imagem visível. Numa imagem a preto e branco, cada pixel pode ser representado apenas por 1 bit, ou seja, 1 se o pixel for preto e 0 se o pixel for branco. Fig 15a - Uma imagem bitmap Fig. 15b - A mesma imagem ampliada Normalmente é necessário mais do que 1 bit por pixel para representar uma imagem. Isso depende da “profundidade” de cor da imagem. Profundidade de cor – em Bits A profundidade de cor (color depth) corresponde ao número de bits usados por pixel para armazenar em memória ou representar num monitor, a cor de um pixel numa imagem do tipo bitmap. Este conceito é conhecido também por bits por pixel (bpp). Quanto maior o valor da profundidade da cor de uma imagem, maior é a escala de cores disponível. Bits Cores 1 2 = 21 2 4 = 22 4 16 = 24 8 256 = 28 16 65 536 = 216 24 16 777 216 = 224 A Fig. 16 mostra a mesma imagem representada com diferentes profundidades de cor. Quanto maior a quantidade de bits por pixel, maior o tamanho em bytes do ficheiro que a guarda. 1 bit (preto e branco) 4 bit (16 cores)
  • 14. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 14 8 bit (256 cores) 24 bit (Truecolor) Fig. 16 – Comparação de uma imagem com diferentes profundidades de cor Padrões gráficos / “Resolução” A resolução é o termo usado para descrever o número de pixels na horizontal e na vertical, usados para mostrar uma imagem. Resoluções mais elevadas, implicam o uso de maior quantidade de pixels. A resolução de um monitor é composta por milhares de pixels. Esse valor é indicado por uma combinação, por exemplo 1024x768. Isto significa que o monitor representa 1024 pontos na horizontal e 768 na vertical, contabilizando um total de 786 432 pontos que constituem a área de imagem no monitor. Ao longo da história do desenvolvimento dos diferentes dispositivos de visualização gráfica, foram adoptados vários padrões de referência, com resoluções fixas e aspect ratio (razão entre comprimento e largura). Na tabela seguinte resumem-se alguns padrões gráficos, de dispositivos de visualização (monitores) destacando-se em cor os mais representativos. Standard Resolução (pixels) Aspect Ratio Standard Resolução (pixels) Aspect Ratio CGA 4- color 320×200 16:10 WSXGA 1600×1024 25:16 QVGA 320×240 4:3 WSXGA+ 1680×1050 16:10 EGA 640×350 64:35 UXGA 1600×1200 4:3 VGA 640×480 4:3 WUXGA 1920×1200 16:10 WGA ou WVGA 800×480 5:3 QXGA 2048×1536 4:3 SVGA 800×600 4:3 WQXGA 2560×1600 16:10 XGA 1024×768 4:3 QSXGA 2560×2048 5:4 XGA+ 1152×864 4:3 WQSXGA 3200×2048 25:16 SXGA 1280×1024 5:4 QUXGA 3200×2400 4:3 WXGA 1280×800 16:10 WQUXGA 3840×2400 16:10 WXGA 1366×768 16:9 HSXGA 5120×4096 5:4 WSXGA or WXGA+ 1440×900 16:10 WHSXGA 6400×4096 25:16 SXGA+ 1400×1050 4:3 HUXGA 6400×4800 4:3
  • 15. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 15 Refs: http://en.wikipedia.org/wiki/Computer_display_standard http://en.wikipedia.org/wiki/List_of_common_resolutions
  • 16. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 16 Formatos de Ficheiros de Imagem de Bitmap Existe uma grande variedade de formatos de ficheiros para imagens. Cada um tem as suas características específicas. Alguns, armazenam a imagem de uma forma comprimida, outros armazenam uma imagem com uma profundidade de cor específica e outros são específicos para uma determinada aplicação. Segue-se uma lista dos tipos de ficheiros mais comuns. BMP Um formato standard de ficheiro de gráficos do Microsoft Windows. Usado no Paint (Paintbrush) e outros programas. Capaz de armazenar imagens de 24-bit. JPG Um standard para imagem fotográfica comprimida, criado pelo Joint Photographics Experts Group. Tira vantagem das limitações da visão humana para atingir elevados níveis de compressão. Pequena perda de qualidade com a compressão o que permite ao utilizador estabelecer o nível de compressão desejado sem grande perda de qualidade. TIFF Tagged Image File Format (TIFF), pode armazenar vários tipos de imagens: monocromáticas, tons de cinzento, 8-bit e 24-bit RGB, etc.). Desenvolvido pela Aldus Corp nos anos 80 e mais tarde suportada pela Microsoft. TIFF é um formato com o mínimo de perda de qualidade. Hoje em dia já não apresenta vantagens sobre os novos formatos JPEG. Caiu de popularidade. Foi essencialmente usado em scanners. GIF Graphics Interchange Format (GIF) criado pela UNISYS Corp. e Compuserve, inicialmente para transmitir imagens através de linhas telefónicas via modem, nos primórdios da Internet. Usam o algoritmo de codificação de Lempel-Ziv Welch (LZW), sem perdas. Limitadas a imagens de cor de apenas 8-bit por pixel (máximo de 256 cores).
  • 17. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 17 PNG O formato PNG, é um formato de imagem desenvolvido por um consórcio de produtores de software gráfico como um formato não proprietário alternativo ao GIF. O formato PNG foi desenvolvido especialmente para ser usado em páginas Web, oferece uma gama de atributos atractivos que deveriam transformar este formato num dos mais populares. Na verdade o formato não atingiu os níveis previstos e alguns “browsers” nem sequer o suportam. Resumo FORMATO PROFUNDIDADE DE COR (bits) COMPRIMIDO (S/N) PERDAS (S/N) ALGORITMO COMPRESSÃO BMP 24 N − − JPG/JPEG/JFIF 24 S S DCT GIF 8 S N LZW TIFF 24 S N LZW PNG 24 S N DEFLATE TGA 24 S N RLE PICT/PCT/PIC 24 Formato criado e utilizado pela Apple. Suporta também gráficos vectoriais. PCX 8 Personal Computer eXchange foi o formato nativo do PC Paintbrush tendo-se tornado no mais utilizado pelo DOS. PGM 8 (256 tons cinza) Ficheiros de texto ASCII ou binário, onde estão definidos os parâmetros da imagem. Algumas imagens aparentemente de 24-bit são na verdade imagens de 32-bit. O byte extra para cada pixel é usado para armazenar um valor alpha, que representa informação sobre alguns efeitos especiais, como pixel transparency, que pode ser usado para definir uma máscara para composição de uma imagem sobre outra.
  • 18. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 18 Formatos de Ficheiros de Imagens Vectoriais SVG Scalable Vector Graphics - SVG é uma linguagem para descrever gráficos vectoriais bidimensionais, estáticos e dinâmicos (animações) em XML. Foi desenvolvido pela W3C, como um open standard. As imagens SVG são descritas num ficheiro de texto XML. Podem ser editadas com qualquer editor de texto. Os browsers modernos suportam este formato, com excepção do Internet Explorer, onde é necessário instalar pluggins para o interpretar, como o Adobe SVG Viewer, http://www.adobe.com/svg/viewer/install/ A maioria dos programas de edição de gráficos vectoriais suporta este formato. Existe em versão compactada, o SVGZ. CDR Drawing (vector image) criado para o CorelDRAW. Formato proprietário usado pela Corel não reconhecido pela maioria dos programas de edição de gráficos. AI Adobe Illustrator Artwork (AI) é um formato proprietário desenvolvido pela Adobe Systems para representação de desenhos vectoriais. É suportado por vários programas de edição. WMF/ EMF Windows Metafile (WMF) é um formato do Microsoft Windows. Este formato é portável entre as várias aplicações da Microsoft e pode suportar componentes vectoriais e bitmaps. A maioria dos Clipart do Windows está neste formato. Existe uma versão melhorada, mais recente, designada por Enhanced Metafile (EMF). CGM Computer Graphics Metafile (CGM) é um formato para gráficos vectoriais 2D, rastreio e texto. Foi criado para suportar várias aplicações, originalmente usado para bibliotecas de clipart. É actualmente usado pelo AutoCAD. Todos os elementos gráficos que constituem um desenho podem ser especificados num ficheiro de texto, compilável num ficheiro binário. Este formato é transversal entre plataformas e aplicações diferentes. Foi superado por formatos mais recentes, como o SVG e DXF. PICT/PC T/PIC PICT é um formato de gráficos desenvolvidos para o computador Apple Macintosh como um formato standard. Suporta também imagens de bitmap e texto, transversal entre aplicações Mac, muito utilizado pelo programa de desenho QuickDraw. DXF AutoCAD DXF (Drawing Interchange Format, ou Drawing Exchange Format) é um formato desenvolvido pela Autodesk, para suportar a interoperacionalidade entre o AutoCAD e uma extensa lista de outros programas. DWG DWG ("drawing") é um formato usado para armazenar desenho 2D e 3D. É o formato nativo de várias aplicações CAD, como o AutoCAD, IntelliCAD ou Caddie. PLT Ficheiro de gráficos vectoriais usado por plotters criado para software AutoCAD. ODG (Open Document Graphics) - ODG é um formato usado pelo OpenOffice para armazenar desenhos criados pelo programa Draw. É um standard open. SWF "Small Web Format" ou "Shockwave Flash" da Macromedia. Um formato que ocupa pouco espaço, desenvolvido essencialmente para publicação na Web. Os ficheiros SWF podem conter animação e interactividade. São actualmente muito utilizados. Um exemplo de um ficheiro SVG <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>
  • 19. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 19 Software habitual Existe uma grande quantidade de programas de tratamento de imagem de rastreio e também imagem vectorial. Segue-se uma lista de apenas alguns dos mais utilizados. Tratamento de imagem de bitmap Tratamento de imagens vectoriais Adobe Photoshop GIMP (Free) Xara Paint Shop Pro (Free) Paint Net (Free) Adobe Illustrator Adobe Freehand Corel Draw Inkscape (Free) Algoritmos de Compressão Com o evoluir dos sistemas de captura e síntese de imagem, cedo se constatou que um ficheiro de imagem “pura” (.bmp, mapa de bits) ocupa bastante espaço (comp x larg x 3 Byte), chegando facilmente aos MegaBytes. Houve necessidade de criar ficheiros em que os dados fossem comprimidos, de forma reduzir o espaço físico ocupado por esses ficheiros. Surgiram então vários algoritmos de compressão. Existem dois tipos de algoritmos de compressão de imagem: lossless (sem perda) e lossy (com perda). Compressão sem perdas (Lossless) O algoritmo reduz o tamanho do ficheiro sem reduzir a qualidade da imagem. No entanto, a taxa de compressão deste algoritmo não é muito grande. Compressão com perdas (Lossy) O algoritmo tira vantagem das limitações da visão humana descartando informação invisível. Muitos destes algoritmos têm vários níveis de compressão. Para níveis mais elevados de compressão, a deterioração da imagem pode tornar-se perceptível. Vejamos alguns dos mais conhecidos, já referidos quando se resumiu algumas das características dos formatos mais comuns de ficheiros de imagem. RLE - Run-Length Encoding É uma forma simples de compressão de dados que no essencial contabiliza os dados repetidos numa sequência de dados, e apresenta esses dados de uma outra forma mais condensada. Não é muito eficiente, se o ficheiro não apresenta muitas repetições de dados. Exemplo Consideremos uma sequência de texto plano. WWWWWWWWWWWWBWWWWWWWWWWWWBBBWWWWWWWWWWWWWWWWWWWWWWWWBWWWWWWWWWWWWWW Se aplicarmos o algoritmo (RLE) a linha acima passaria a ser representada por, 12W1B12W3B24W1B14W Passamos de 67 caracteres originalmente para apenas 18. Como é óbvio, este algoritmo pode ser aplicado também a ficheiros binários.
  • 20. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 20 LZW - Lempel–Ziv–Welch É um algoritmo universal de compressão de dados sem perda criado por Abraham Lempel, Jacob Ziv e Terry Welch. É um algoritmo de implementação rápida mas não muito eficiente. LZ77 e LZ78 LZ77 e LZ78 são os nomes de dois algoritmos de compressão de dados sem perda, da autoria de Abraham Lempel e Jacob Ziv, que são a base da maioria das variações LZ, e incluem o LZW, LZSS, LZMA e outros. DCT - Discrete Cosine Transform O algoritmo DCT (Discrete Cosine Transform) exprime uma sequência finita de pontos, como somas de funções co-seno oscilando entre frequências diferentes. Baseia-se nas Transformadas de Fourrier e tem utilização em enumeras áreas científicas e de engenharia. Por exemplo, na compressão áudio, com o formato MP3 e na compressão de imagens com o formato JPEG. Fig. 17 – DCT aplicado a uma imagem DEFLATE É um algoritmo de compressão de dados, sem perdas, que usa uma combinação do LZ77 e codificação de Huffman. Foi originalmente desenvolvido por Phil Katz para a versão 2 do compactador PKZIP. O Deflate não tem patente registada e é de utilização livre, tendo sido utilizado como algoritmo de compressão, em ficheiros gzip, zip, 7-zip e em ficheiros de imagem PNG. Refs: http://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Welch http://www.cs.cf.ac.uk/Dave/Multimedia/node214.html http://michael.dipperstein.com/lzw/index.html http://cnx.org/content/m11092/latest/ http://www.cs.cf.ac.uk/Dave/Multimedia/node234.html http://en.wikipedia.org/wiki/DEFLATE
  • 21. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 21 Anti-aliasing Em processamento digital de sinal, anti-aliasing é a técnica de minimizar a distorção conhecida por aliasing quando se pretende representar sinal de alta resolução em resolução mais reduzida. Anti-aliasing é utilizado em fotografia digital, gráficos de computador, áudio digital e muitas outras aplicações. Na representação de imagens, anti-aliasing consiste num processo de disfarçar os contornos agudos nas imagens para fazer desaparecer o “efeito escada” das linhas. O algoritmo usado para o efeito, procura os extremos na imagem e a seguir disfarça os pixels adjacentes com tons mais claros. No exemplo abaixo (Fig. 18) pode ver-se uma imagem sem o efeito e outra resultante da aplicação do efeito de anti-aliasing. Imagem Original (x6) Imagem após Anti-aliasing (x6) Fig. 18 – Anti-aliasing Dithering Dithering consiste no processo de converter uma imagem com uma determinada profundidade de cor noutra com memos profundidade. Portanto, existe perda de qualidade, mas em contrapartida ganha-se no espaço ocupado pela imagem. Imagem Original Dithering para 256 cores Quando se aplica o método de dithering numa imagem, este converte as cores que não pode representar juntando duas ou mais cores que mais se aproximam, para gerar uma única cor, próxima das originais.
  • 22. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 22 Um formato “curioso” Portable PixMap (PPM) Portable BitMap (PBM) Portable GrayMap (PGM) http://en.wikipedia.org/wiki/Portable_Gray_Map Each format differs in what colors it is designed to represent: • PBM is for bitmaps (black and white, no grays) • PGM is for grayscale • PPM is for "pixmaps" which represent full RGB color. File Descriptor Type Encoding P1 Portable bitmap ASCII P2 Portable graymap ASCII P3 Portable pixmap ASCII P4 Portable bitmap Binary P5 Portable graymap Binary P6 Portable pixmap Binary PBM example A simple example of the PBM format is as follows: P1 # This is an example bitmap of the letter "J" 6 10 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 1 0 0 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 The string P1 identifies the file format. The hash sign introduces a comment. The next two numbers give the width and the height. Then follows the matrix with the pixel values (in the monochrome case here, only zeros and ones). Here is the resulting image: Here it is again magnified 20 times:
  • 23. APIB-12B 3.2 SISTEMAS MULTIMEDIA - IMAGEM 23 PGM example The PGM and PPM formats (both ASCII and binary versions) have an additional parameter for the maximum value in a line between the X and Y dimensions and the actual pixel data. P2 # Shows the word "FEEP" (example from Netpbm man page on PGM) 24 7 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 3 3 3 0 0 7 7 7 7 0 0 11 11 11 11 0 0 15 15 15 15 0 0 3 0 0 0 0 0 7 0 0 0 0 0 11 0 0 0 0 0 15 0 0 15 0 0 3 3 3 0 0 0 7 7 7 0 0 0 11 11 11 0 0 0 15 15 15 15 0 0 3 0 0 0 0 0 7 0 0 0 0 0 11 0 0 0 0 0 15 0 0 0 0 0 3 0 0 0 0 0 7 7 7 7 0 0 11 11 11 11 0 0 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 PPM example P3 # The P3 means colors are in ASCII, then 3 columns and 2 rows, then 255 for max color, then RGB triplets 3 2 255 255 0 0 0 255 0 0 0 255 255 255 0 255 255 255 0 0 0 The image (expanded) The P6 binary format of the same image will store each color component of each pixel with one byte (thus three bytes per pixel) in the order red, green, then blue. The file will be smaller but the color information will not be readable by humans. The PPM format is not compressed and thus requires more space and bandwidth than a compressed format would require. For example, the above 192x128 PNG image has a file size of 187 bytes. When converted to a 192x128 PPM image, the file size is 73848 bytes. The PPM format is generally an intermediate format used for image work before converting to a more efficient format, for example the PNG (Portable Network Graphics) format, without any loss of information in the intermediate step.