Computação Gráfica - 03 - univasf.edu.brjorge.cavalcanti/comput_graf03_Cores.pdf · • Uso de...
Transcript of Computação Gráfica - 03 - univasf.edu.brjorge.cavalcanti/comput_graf03_Cores.pdf · • Uso de...
Computação Gráfica - 03
Prof. Jorge [email protected]
www.univasf.edu.br/~jorge.cavalcanti
www.twitter.com/jorgecav
Universidade Federal do Vale do São FranciscoCurso de Engenharia da Computação
13/11/2018Computação Gráfica – Parte 06Página 2
Cores em Computação Gráfica
• Uso de cores permite melhorar a legibilidade dainformação, possibilita gerar imagens realistas, focaratenção do observador, passar emoções e muitomais.
• Colorimetria – Conjunto de técnicas que permitemdefinir e comparar cores. Estuda como o olhohumano percebe cada cor.
• Qualquer cor pode ser definida por três parâmetros:intensidade, tonalidade cromática e saturação.
13/11/2018Computação Gráfica – Parte 06Página 3
Cores em Computação Gráfica
• Intensidade – indica o grau de intensidade luminosada superfície examinada, normalmente associada oubrilho ou claridade do material.
• Tonalidade cromática – Caracteriza o comprimento daonda dominante da cor, também chamado de matiz.
• Saturação – mede a pureza da cor, ou seja o quantoela é saturada em um só tom.
13/11/2018Computação Gráfica – Parte 06Página 4
Processo de formação de cores
• Percepção de cores
– As diferentes cores, ou espectros luminosos, que podem serpercebidos pelo sistema visual humano correspondem a umapequena faixa de freqüências do espectro eletromagnético, queinclui as ondas de rádio, microondas, os raios infravermelhos eos raios X, como mostrado na figura abaixo:
13/11/2018Computação Gráfica – Parte 06Página 5
Processo de formação de cores
• Percepção visual do mundo baseada nas coresdos objetos
– Alguns animais só enxergam em preto e branco
– Outros conseguem ver cores para nós invisíveis
• Conseguimos distinguir algumas dezenas detons de cinza
• Discernimos vários milhões de coresdiferentes
• Só percebemos as cores na presença de luz
13/11/2018Computação Gráfica – Parte 06Página 6
O que são Modelos de Cores ?
• Você precisa de um método para definir cores.
• Os modelos de cores fornecem diversosmétodos para definir cores, cada modelodefinindo usando componentes de coresespecíficos.
• Há vários modelos de cores que podem serescolhidos ao se criar um gráfico.
13/11/2018Computação Gráfica – Parte 06Página 7
Sistemas de cores aditivas
• Usados nos monitores de vídeo e TV.
• A cor é gerada pela mistura de vários comprimentosde onda luminosa, provocando uma sensação de corquando atinge o olho.
• No processo aditivo, o preto é gerado pela ausênciade qualquer cor, indicando que nenhuma luz étransmitida.
• O branco é a mistura de todas elas.
13/11/2018Computação Gráfica – Parte 06Página 8
Modelo de cor RGB
• O modelo de cor RGB define a cor usandoos seguintes componentes:
– vermelho (R)
– verde (G)
– azul (B)
• Os componentes R, G e b são asquantidades de luz vermelha, verde e azulque uma cor RGB tem e são medidos emvalores que variam de 0 a 255.
13/11/2018Computação Gráfica – Parte 06Página 9
Modelo de cor RGB
• Os monitores usam o modelo de cor RGB. Quandovocê adiciona luz vermelha, azul e verde juntas, deforma que o valor de cada componente seja 255,aparece a cor branca.
• Quando o valor de cada componente é 0, oresultado é preto puro.
13/11/2018Computação Gráfica – Parte 06Página 10
Modelo de cor RGB
• A representação da cor C de cada pixel de umaimagem pode ser obtida matematicamente por:
– C = r.R + g.G + b. B
13/11/2018Computação Gráfica – Parte 06Página 11
O cubo RGB
13/11/2018Computação Gráfica – Parte 06Página 12
O cubo RGB
13/11/2018Computação Gráfica – Parte 06Página 13
Canais RGB
13/11/2018Computação Gráfica – Parte 06Página 14
Canais RGB
13/11/2018Computação Gráfica – Parte 06Página 15
Sistemas de cores subtrativas
• Usados nas impressões e pinturas. Possui como coresprimárias o Azul Ciano, o Magenta e Amarelo (CMY).
• No processo subtrativo, cores da luz branca sãoabsorvidas.
• A luz branca ao atingir um objeto tem parte absorvidae parte refletida.
• O branco corresponde a ausência de qualquer cor e opreto a mistura de todas.
13/11/2018Computação Gráfica – Parte 06Página 16
Modelo de cor CMYK
• O modelo de cor CMYK define a cor usando osseguintes componentes:
• ciano (C)
• magenta (M)
• amarelo (Y)
• preto (K)
• Os componentes C M Y K são quantidades de tintaciano, magenta, amarelo e preto que uma cor CMYKcontém e são medidos em porcentagem de 0 a 100.
13/11/2018Computação Gráfica – Parte 06Página 17
Modelo de cor CMYK
• Os materiais impressos são reproduzidos usando omodelo de cor CMYK.
• Ao combinar ciano, magenta, amarelo e preto, deforma que o valor de cada componente seja 100, oresultado é preto.
• Quando o valor de cada componente é 0, oresultado é branco puro.
13/11/2018Computação Gráfica – Parte 06Página 18
Modelo de cor CMYK
13/11/2018Computação Gráfica – Parte 06Página 19
Combinações de cores
+
+
+
=
=
=
Subtrativas
+
+
+
=
=
=
Aditivas
Para Visualizar as combinações de cores nos Sistemas RGB E CMYK – Clique em http://www.htwins.net/lightmix/
13/11/2018Computação Gráfica – Parte 06Página 20
Modelo de cor HSV (HSB)
• Um modelo de cor que define três componentes:matiz (H), saturação (S) e brilho (V - Value).
• O matiz determina a cor ou tonalidade (amarelo,laranja, vermelho, etc.);
• O brilho determina a intensidade percebida (cormais clara ou mais escura);
– Distância para o preto.
• A saturação determina a profundidade ou “pureza”da cor (de esmaecida a intensa).
– Distância para o cinza.
13/11/2018Computação Gráfica – Parte 06Página 21
Modelo de cor HSV
• O matiz descreve o pigmento de uma cor eé medido em graus de 0 a 359.
– Por exemplo: 0 grau é vermelho; 60 graus,amarelo; 120 graus, verde;, 180 graus, ciano;240 graus, azul e 300 graus, magenta.
– A saturação descreve a vivacidade ou oesmaecimento de uma cor e é medida emporcentagem de 0 a 100 (quanto maior aporcentagem, maior a vivacidade da cor).
– O brilho descreve a quantidade de branco queuma cor contém e é medido em porcentagem de0 a 100 (quanto maior a porcentagem, maior obrilho da cor).
13/11/2018Computação Gráfica – Parte 06Página 22
• Por utilizar um sistema de cores que são mais intuitivasdo que combinações de cores primárias, é maisadequada para ser usada na especificação de cores emnível de interface com o usuário.
Modelo de cor HSV
13/11/2018Computação Gráfica – Parte 06Página 23
Modelo de cor HSV
13/11/2018Computação Gráfica – Parte 06Página 24
O modelo HSL
• Também utiliza os conceitos de matiz (Hue), purezade cor (Saturação) e luminosidade (Lightness).
• É um modelo comumente usado em aplicações degráficas por causa da forma como as cores sãoemuladas neste modelo, que se aproxima mais decomo o ser humano produz a percepção da cor.
• Permite que se pense em termos de cores mais“claras” e mais “escuras”;
• As cores são especificadas através de um ângulo.
13/11/2018Computação Gráfica – Parte 06Página 25
O modelo HSL
• A escala de “cinzas” encontra-se em S=0; nessemodelo, os matizes com máxima saturação possuem L= 0.5, e como no modelo HSV, são definidos naextremidade do hexágono.
13/11/2018Computação Gráfica – Parte 06Página 26
Sistemas de Cores
• Vantagens dos modelo HSV/HSL
– Simplicidade e facilidade de implementação;
– Popularidade entre os programadores decomputação gráfica.
• Desvantagem do modelo HSV/HSL
– A cor produzida pode variar de umdispositivo para outro.
13/11/2018Computação Gráfica – Parte 06Página 27
Uso de cores nas imagens
• A cor, como elemento fundamental em qualquerprocesso de comunicação merece atenção especial.
• Ela interfere nos sentidos, emoções e intelecto. Seuuso correto pode resultar numa rápida e corretaassimilação da informação.
• O uso de cores permite:
– Mostrar as coisas conforme são vistas na natureza.
– Representar associações simbólicas.
– Chamar e direcionar a atenção.
– Determinar um estado de espírito.
– Tornar a imagem mais fácil de ser memorizada.
13/11/2018Computação Gráfica – Parte 06Página 28
• Quantas cerejas?
Uso de cores nas imagens
13/11/2018Computação Gráfica – Parte 06Página 29
Uso de cores nas imagens
• Por se tratar de um recurso tão poderoso, o uso decor deve ser feito com cautela.
• Algumas observações sobre uso de cores:
– Uma escolha não adequada de cores pode interferir nalegibilidade da imagem;
– As cores podem apresentar características distintas emcondições diferentes;
– As cores devem ser selecionadas de modo a não causaremfadiga nos olhos do usuário e nem deixá-lo confuso.
– http://www.dokimos.org/ajff/
– http://fuzzymartian.tripod.com/
– http://www.angelfire.com/super/badwebs/
13/11/2018Computação Gráfica – Parte 06Página 30
Cores na WEB – ColorBrewer 2.0
13/11/2018Computação Gráfica – Parte 06Página 32
Cores na WEB – w3schools.com
13/11/2018Computação Gráfica – Parte 06Página 33
Tabela de Contrastes
13/11/2018Computação Gráfica – Parte 06Página 34
Tabela de Contrastes
Não use vermelho sobre azul.
Essas cores são opostas no
final do espectro
eletromagnético, dificultando
para os seus olhos focarem
ambas as cores.