Prof. Fabiano Taguchi...Pixels–Dispostos na tela de um computador formando uma matriz;...
47
16/10/2014 1 Prof. Fabiano Taguchi [email protected] http://fabianotaguchi.wordpress.com ELEMENTOS MULTIMÍDIA Tipos de mídia estáticas
Transcript of Prof. Fabiano Taguchi...Pixels–Dispostos na tela de um computador formando uma matriz;...
16/10/2014
1
Prof. Fabiano Taguchi
[email protected]://fabianotaguchi.wordpress.com
ELEMENTOS MULTIMÍDIATipos de mídia estáticas
16/10/2014
2
Palavras e símbolos, sejam falados ou escritos
são os sistemas mais comum de comunicação.
Um texto pode ser:• Plain text;
• Rich text;
• Hyper text.
16/10/2014
3
16/10/2014
4
Tabela ASCII estendida – ISO 8859;
Variantes:ISO 8859 2– Checo, eslovaco e croata;
ISO 8859 5 – Grego moderno;
ISO 8859 8 – Hebreu;
ISO 10646 – 32 bits;
UNICODE – 16 bits.
16/10/2014
5
A representação visual de uma letra é um glifo.
Uma face é uma família com muitos tamanhos etipos de caracteres.
Fonte consiste em um conjunto de caracteres deum único tamanho e estilo que pertence a umaúnica face.
Fontes podem ser armazenadas em:
- Sistema operacional;
- Nos arquivos de texto.
16/10/2014
6
FONTES VETORIAIS
São ideias para arquivos multimídia, pois nãoperdem qualidade quando têm o tamanhoalterado.
FONTES RASTER
Também conhecidas como bitmap, sãoarmazenadas como uma série de imagens, sendouma para cada caractere, e perdem muitaqualidade quando tem seu tamanho alterado.
16/10/2014
7
FONTES TRUE TYPE
São as fontes mais utilizadas, elas se adaptam aomonitor e impressora, não perdendo qualidadequando visualizada em qualquer um dosdispositivos.
16/10/2014
8
Ambos são tratados como texto
Os símbolos trazem consigo uma mensagemembutida, assim como os ícones, que exercem afunção de âncoras em um documento multimídia.
Bookman Old
Comic Sans MS
Garamond
Verdana
16/10/2014
9
Evite o alinhamento de texto à direita;
Evite o uso de hífen;
Linhas curtas facilitam a leitura;
Não exagere na formatação de fontes;
Não escreva somente em letras minúsculas;
Cuide com os posicionamento.
TXT = texto apenas com acentuação e semcompactação;
RTF = Possui suporte para imagem, porém semcompactação;
DOC = Texto com recursos de formatação ecompactação.
PDF = Texto formatado e com suporte paraimagens;
HTML = Formatado, sem compactação e comsuporte para multimídia.
16/10/2014
10
Tratamento e melhoria de imagensMedicina, controle de qualidade, biologia, sistemasde monitoramento e controle de segurança,geologia, sensoriamento remoto...
Classificação perante imagensImpressão digital, interpretação automática detextos, visão artificial, robótica, exploraçãoautomatizada...
16/10/2014
11
Imagem – Conjunto de pontos denominadospixels;
Pixels – Dispostos na tela de um computadorformando uma matriz;
Mapa de bits – Cada elemento da matriz possuiuma informação referente à cor;
Resolução – Número de elementos que aimagem possui na horizontal e vertical.
Matriz de pixels
16/10/2014
12
O campo visual humano consegue distinguir umamatriz de 3000 X 3000 pixels diferentes, vejamosanalogias:
• Televisão comum: 512 X 480 pixels
• Televisão HD: 2000 X 1100 pixels
• Monitores variam
Descreve a relação entre suas dimensõeshorizontais e verticais. Exemplos:
• Monitores convencionas 4:3 (800 x 600)
• Monitores LCD Widescreen 16:9
16/10/2014
13
O ser humano consegue distinguir três espectrosde cores diferentes:
• Vermelho;
• Verde;
• Azul.
16/10/2014
14
Consiste em um padrão subtrativo baseado emcores primárias, sendo que cada cor primáriatambém seja codificada em 8 bits.
• Ciano;
• Magenta;
• Amarelo.
16/10/2014
15
Cada cor primária é codificada em 8 bits.
Nem todas as cores vistas no monitor conseguem fielmente serem impressas!
Alguns softwares permite que sejam importados filtros CMYK para mostrar no monitor como
realmente a imagem será impressa
16/10/2014
16
SISTEMAS DE VISÃO ARTIFICIAL
• Não faz uso de cores primárias, e sim deinformação das cores:
• (4) Matiz - Cor;
• (4) Saturação – Pureza da cor, sem misturas;
• (8) Intensidade – Brilho da cor.
YIQ (Intensidade, Fase e Quadratura) – NTSC;
YUV (Intensidade, Luminância e Valor) – PAL;
YCbCr (Intensidade, Azul e Vermelho) ;
CIELAB (Luminância e Crominância).
16/10/2014
17
CANAL DA COR: Cada cor primária;
AMOSTRAGEM DA COR: Intensidade de cadacor;
QUANTIZAÇÃO DA COR: Número de bits porcanal;
QUADRO: Imagem gerada em um ciclo.
No padrão RGB cada cor primária necessita de 8bits para codificação, isso corresponde que cadacor possui 256 níveis de luminância.
Chamamos o sistema RGB de sistema de corverdadeira pois são quantizadas em 24 bits,gerando cerca de 16 milhões de cores.
16/10/2014
18
Padrão RGB utiliza 24 bits para codificar um pixel
Redundância de cores parecidas faz uso de 5 bits
por cores.
Este sistema faz o uso de 256 níveis de cinza porpixel, sendo que:
• Nível 0 -> Preto
• Nível 255 -> Branco
16/10/2014
19
Este sistema garante que cada pixel sejarepresentado por um único bit, sendo:
• 0 para branco
• 1 para preto
Faz uso de 1 a 8 bits, gerando 256 coresdiferentes. Neste modo de codificação cada pixelassume um valor presente em uma paleta decores.
Ideal para ambientes multimídia
16/10/2014
20
A função de uma paleta de cores é de exibir umatabela de cores mais usadas em códigos compoucos bits.
16/10/2014
21
É uma outra técnica utilizada para redução decores, onde são retirados pixels durante oprocesso de armazenamento das imagens erecuperados durante sua exibição.
16/10/2014
22
CANAL ALFA DO SISTEMA DE CORES
Este canal também faz uso de 8 bits paracodificação e representa o nível de transparênciade uma imagem.
Sistemas de cor verdadeira fazem de uso de 24bits para representação da imagem + 8 bits para ocanal alfa.
CANAL ALFA DO SISTEMA DE CORES
Para sistemas que faz uso de 15 bits pararepresentação de imagens, o canal alfa utiliza acodificação de 1 bit, dessa forma assume totaltransparência ou não.
16/10/2014
23
As cores representam um papel importante noprocesso de comunicação. Devemos sempre nosatentar as padronizações de cores existentes.
• VERMELHO = Parar
• VERDE = Seguir
• AZUL = Tranquilidade
• BRANCO = Paz
Resoluções / Cores 16 256 32K 16M
640 ×××× 480 150K 300K 600K 900K
800 ×××× 600 235K 469K 936K 1407K
1024 ×××× 768 384K 768K 1536K 2304K
16/10/2014
24
SAÍDA INTERATIVA
CRT – Feixe de elétrons;
LED – Matriz de pequenas luzes;
LCD – Refração da luz através de 2 painéis;
Não consegue mostrar o preto absoluto.
Plasma – Pequenas células que contem UV;
Sofre com danos e manchas.
16/10/2014
25
SAÍDA PERMANENTE
Plotters;
Impressoras;
Gravadores de vídeo.
16/10/2014
26
ENTRADA GRÁFICA 2D
Mesa digitalizadora, scanners, câmeras de vídeo
ENTRADA GRÁFICA 3D
Scanners 3D.
16/10/2014
27
Fatores que diferenciam imagens:
- Cores suportadas;
- Resoluções;
- Grau de compressão.
16/10/2014
28
TIFF – Grande em tamanho, mas boa qualidade;
GIF – Ocupam pouco espaço (256 cores);
BMP – Padrão Windows (16 milhões de cores);
JPEG – Diferentes graus de compressão;
PNG – Indicado para jogos.
• Comum: 72 dpi
• Aconselhável: 96 dpi
• Impressão: 300 dpi
16/10/2014
29
DOMÍNIO ESPACIAL
- Recuperação da imagem;
- Recorte, cópia ou colagens;
- Conversão de formatos;
- Separação de cores;
- Combinação de imagens;
- Retoque em imagens;
- Pintura sobre imagens.
16/10/2014
30
DOMÍNIO DA FREQUENCIA
- Mudança de escala;
- Rotação da imagem;
- Distorção da imagem;
- Filtragem;
- Suavização e realce;
- Compressão de imagens.
Também conhecidos como desenhos, são imagensgeradas a partir de equações geométricas (curvas,elipses, polígonos entre outros elementos).
16/10/2014
31
CGM – Padrão bidimensional;
DXF e DWG – Software CAD;
WMF – Formato vetorial padrão do Windows;
EMF – Evolução do padrão WMF (32 bits);
SVG - Padrão desenvolvido pelo W3C e podemser comprimidos sem perda de dados.
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<rect fill="#FF0000" stroke-width="5" x="177" y="230.000001" width="136" height="128.999999" id="svg_1" stroke="#000000"/>
<line fill="none" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="176" y1="228" x2="241" y2="141" id="svg_2" stroke="#000000"/>
<line fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="243" y1="143" x2="316" y2="232" id="svg_3"/>
</g>
</svg>
16/10/2014
32
https://code.google.com/p/svg-edit/.
Tamanho menor que o dos arquivos deimagens;
Conservação da precisão;
O processamento é feito de forma maiseficiente.
16/10/2014
33
Desenhos formados por uma única equação:
• Reta;
• Polígono;
• Parábolas;
• Elipse;
• Curvas de Béizer.
As transformações podem ser lineares ou nãolineares. Essas transformações objetivam atingiruma maior perfeição nos desenhos.
16/10/2014
34
16/10/2014
35
16/10/2014
36
DXF -> Modelos CAD;
DWG -> Formato nativo do CAD;
3DS -> Formato usado pelo AutoDesk 3D;
MAX -> Formato usado pelo software Studio Max;
SKP -> Formato do software Google SketchUp;
BLEND -> Formato do software Blender;
WRL -> Linguagem para realidade virtual.
16/10/2014
37
Baseada em:
• MODELOS GEOMÉTRICOS
• MODELOS PROCEDIMENTAIS
• MODELOS VOLUMÉTRICOS
Contém as informações de geometria de umacena com objetos, facetas, arestas e vértices. Alémdas informações adicionas como a superfície danatureza (cor, texturas e material).
16/10/2014
38
Descrevem objetos de geometria complexa, sendodescritos por algoritmos. Esses modelos sãoutilizados para imitar fenômenos naturais. Podemser:
• Fractais: Relevo, hidrografia ou formas abstratas;
• Graftais: Plantas;
• Sistema de partículas: Fogo, água, névoa
• Modelos físicos: Baseado nas propriedades físicas deobjetos reais.
16/10/2014
39
Descrevem tanto a superfície como o interior dosobjetos, sendo que o espaço é dividido em cubos,com cor e transparência individual.
Adequado para construção de tomografias e
subsolos.
16/10/2014
40
RENDERIZAÇÃO
Geometria e materiais;
Câmeras;
Luzes;
Parâmetros da imagem.
16/10/2014
41
Determinam como a cena será projetada, osparâmetros típicos para uma câmera são: posição,alvo e abertura.
Uma câmera ainda pode sofrer translações,rotação e ação de zoom.
Fio de arame;
Linhas ocultas;
Elaboração poligonal.
16/10/2014
42
Nesta situação a imagem possui apenas as arestaspoligonais, sem nenhum tipo de textura, muitoutilizada pois possui uma rápida visualização.
É similar ao modelo fio de arame, porem possuiuma textura branca sólida.
16/10/2014
43
Produz imagens em alta qualidade (imagem fotorealista), e é suficiente para a grande maioria dasanimações.
PONTUAL -> Luz para todas as direções;
SOLARES -> Raios paralelos em todas direções;
DIRECIONAIS -> Emitem luz em determinadasdireções;
DISTRIBUÍDAS -> Emitem luz a partir de uma área.
16/10/2014
44
16/10/2014
45
Arte final de um desenho, consiste na definiçãodas cores usadas para preencher cada imagem.
• Cores;
• Imagem 2D;
• Mapas de rugosidade;
• Transparências;
• Reflexos e sombras.
16/10/2014
46
Técnica avançada, onde permite que o usuáriopossa realizar a imersão, navegação e interaçãoem um ambiente sintético gerado porcomputador.
VMRL -> Virtual Reality Modeling Language
16/10/2014
47
1) O que é uma cor?
2) Explique o que é matiz, brilho e saturação em um fonteluminosa.
3) O que é um processo subtrativo de cores? Como é possívelobter o vermelho através deste processo?
4) Quais são as diferenças entre uma imagem vetorial e umapor bitmap?
5) No que consiste o processo de renderização?
6) Explique e exemplifique o que são fontes com serifa e semserifa. Qual dessas fontes é adequado para ser utilizadaem um texto impresso e em um texto voltado para Web?
7) Apresente quatro recomendações referentes à utilizaçãode textos em uma aplicação multimídia.
8) Explique o que é matiz, brilho e saturação em um fonteluminosa.
9) No que consiste a técnica de dithering?
10) Qual seria o tamanho aproximado da imagem abaixo?
