APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 1
3.2 BASES SOBRE A TEORIA DA COR APLICADA AOS
SISTEMAS DIGITAIS
Luz e Cor
Para ...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 2
Cores complementares
Duas cores são complementares se, ao
serem misturadas, pr...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 3
− As cores espectrais puras são representadas por uma curva em forma de ferrad...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 4
Modelo RGB
O modelo de cores RGB é um modelo aditivo no qual o vermelho, o ver...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 5
dispositivos gráficos, também conhecido como True Color, comum a vários format...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 6
Como se pode verificar na Fig. 3, o Ciano é a cor oposta ao Vermelho, signific...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 7
Este sistema foi criado em 1978, por Alvy Ray Smith. Consiste numa transformaç...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 8
Pantone
Existem diferentes sistemas comerciais de definição de cores, sendo o ...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 9
Estas diferenças no gamut podem criar problemas na reprodução de cor em gráfic...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
10
diferentes. Os tons de cinzento são representados usando igual quantidade das...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
11
Através de uma folha de cálculo pode-se facilmente aplicar o algoritmo e obte...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
12
GRÁFICOS
Os gráficos de computador dividem-se em duas categorias: gráficos de...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
13
Picture Element - Pixel
Um pixel corresponde ao elemento mínimo que se pode r...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
14
8 bit (256 cores) 24 bit (Truecolor)
Fig. 16 – Comparação de uma imagem com d...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
15
Refs:
http://en.wikipedia.org/wiki/Computer_display_standard
http://en.wikipe...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
16
Formatos de Ficheiros de Imagem de Bitmap
Existe uma grande variedade de form...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
17
PNG
O formato PNG, é um formato de imagem
desenvolvido por um consórcio de pr...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
18
Formatos de Ficheiros de Imagens Vectoriais
SVG
Scalable Vector Graphics - SV...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
19
Software habitual
Existe uma grande quantidade de programas de tratamento de ...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
20
LZW - Lempel–Ziv–Welch
É um algoritmo universal de compressão de dados sem pe...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
21
Anti-aliasing
Em processamento digital de sinal, anti-aliasing é a técnica de...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
22
Um formato “curioso”
Portable PixMap (PPM)
Portable BitMap (PBM)
Portable Gra...
APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
23
PGM example
The PGM and PPM formats (both ASCII and binary versions) have an ...
Próximos SlideShares
Carregando em…5
×

BASES SOBRE A TEORIA DA COR APLICADA AOS SISTEMAS DIGITAIS

291 visualizações

Publicada em

Cap 3.2 Aplicações Informáticas B - 12º Ano

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
291
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

BASES SOBRE A TEORIA DA COR APLICADA AOS SISTEMAS DIGITAIS

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.

×