Aula 5 - Processamento de Imagens e

Primitivas
Introdução

O processamento de imagens é parte fundamental do processo

de criação. Existem, basicamente, dois tipos de imagens a
saber: A Imagem Matricial também conhecida como Mapa de
Bits ( Bitmap ) e a Imagem Vetorial ( Vetor ).

Imagem Matricial

A Imagem Matricial é formada por dados, por bits que são

representados por pontos ( pixels ) retangulares ou quadrados
que em conjunto formam a imagem. Quando maior for o
número de pontos melhor será a sua definição e
consequentemente a qualidade da imagem.

Os pontos são distribuídos em uma grade de pontos  que é

preenchida com informações e cores, formando a imagem
conforme abaixo:

A quantidade de pixels de uma imagem é determinada pelo

tipo de mídia ao qual se destina a imagem. Para a Web o
padrão é 72 ppi ( Pixels por Polegada ). Para material
impresso é usado 300 dpi ( Pontos por Polegada ) mas essas
medidas de resolução podem mudar de acordo com o tipo de
impressão e diversos outros fatores de impressão.

Os softwares Photoshop, Corel Painter e Fire Works podem

ser usados para criação de Imagens Matriciais.

Imagem Vetorial

A Imagem Vetorial é formada por elementos geométricos

( pontos, curvas, linhas, polígonos ) e desta forma é o
resultado de um cálculo matemático baseado em coordenadas
que determinam uma trajetória. Ao criarmos uma Imagem
Vetorial usamos as coordenadas para  posicionamento,
tamanho e forma do objeto criado.

Na Imagem Vetorial o objeto não é criado pelo preenchimento

de pontos em uma grade mas através de cálculos geométricos
sendo que a imagem resultante não fica limitada a uma grade
de pontos e por conta disso pode ser dimensionada sem perda
de qualidade ou distorção na imagem. Isso é possível porque o
objeto tem seu tamanho, seu posicionamento e forma
recalculados automaticamente sem comprometimento da
qualidade da imagem.

Primitivas Básicas

As primitivas são os elementos gráficos mais simples que

podem ser criados dentro de uma aplicação. A partir dessas
primitivas são construídos cenários, personagens e objetos em
uma aplicação de computação gráfica.

Formas 2D

Podemos citar, entre as primitivas básicas, as seguintes

opções:

Ponto - É o elemento mais simples a ser criado em qualquer

produto de computação gráfica. O ponto pode ter sua cor e
tamanho alterados mas nada muito além disso. 

Linha - É o elemento que se constitui como um segmento

criado entre dois pontos. Pode ser compreendido como uma
sequencia de pontos, a linha pode ter sua espessura, estilo, cor
e comprimento alterados.

Polilinha -  É um elemento composto por vários segmentos de

linhas abertas.
Polígono - É um elemento fechado cujos diferentes lados são
constituídos por diversas linhas.

Elipse - É um elemento circular que pode ser um círculo

perfeito ou um círculo achatado,

Arco - É um elemento que é um segmento de uma Elipse que,

por sua vez, estará aberta.

Estas formas estão presentes em todos os softwares de

computação gráfica.
Primitivas 3D

Quando trabalhamos com imagens digitais, em certas ocasiões

precisaremos simular o efeito de profundidade do cenário, ou
seja, será preciso indicar ao usuário que existe aii um terceiro
plano ou um ambiente 3D.

A simulação deste tipo de efeito não deverá ser criada em um

software 3D mas eles facilitam o trabalho pois possuem
recursos específicos para simulação de objetos que trabalham
com as coordenadas X, Y e Z.

Segue abaixo as primitivas 3D mais comuns usadas em

produtos de computação gráfica.

Cubo - Elemento construído com seis faces quadradas, pode

ser considerado o elemento 3D mais básico.

Esfera - Elemento com raios circulares repetidos em todos os

ângulos a partir de seu ponto central. Pode ser a base para
muitos outros elementos dentro de um projeto.
Cilindro - Elemento composto por uma séria de círculos
sobrepostos em empilhados. Este elemento também pode
servir de base para diversos  outros objetos.

Cone - Elemento com base similar ao cilindro mas que

apresenta a outra extremidade com o diâmetro igual a zero
formando uma ponta. 

Tubo - Elemento que é um cilindro que apresenta uma área

aberta em sua parte central.

Estas figuras primitivas estão presentes em todas as

ferramentas de modelagem 3D.
Quando criamos um objeto 3D devemos considerar os três
planos do ambiente para a composição do objeto, observando
as 3 coordenadas X Y Z.

Composições com Primitivas

As primitivas servem de base para a composição de objetos

2D ou 3D. Usando as primitivas podemos construir quaisquer
objetos através da combinação e modelagem de composição
do objeto a partir de um conjunto de primitivas.

Exemplos:

 Criar uma figura de um coração a partir da composição

de duas elipses e um triangulo.

 Criar um boneco a partir da composição de um círculo

para a cabeça e um conjunto de retângulos para o
tronco, os braços e as pernas.

 Criar uma árvore a partir de um conjunto de elipses e

um retângulo ou um cilindro.

Dica:

Em todos os casos, antes mesmo de usar uma ferramenta de

software de modelagem, é importante fazer um rascunho ou
um esboço inicial do objeto que se pretende criar na
ferramenta.

Simbolismo no uso das primitivas

As primitivas vem sendo usadas, ao longo do tempo, para

diversos elementos visuais, simbolizando conceitos e
sensações que dão sentido ao material que está sendo criado.
Na verdade as primitivas são usadas em nosso dia a dia e nem
percebemos. Abaixo temos alguns exemplos do uso das
primitivas em situações do dia a dia.

 Sinais de Transito
 Símbolos de Masculino e Feminino na porta de
banheiros
 Painéis de botoes de equipamentos como rádios ou
som.
Atividade 1 )

Discussão:

É possível a criação de objetos 2D em um ambiente 3D? De

que forma isso seria feito?

Resposta: Através da manipulação da coordenada Z,

preenchendo com o valor zero. Assim criamos um objeto com
aparência 2D embora seja, na verdade, um objeto 3D com a
coordenada Z preenchida com o valor zero, ou seja, um objeto
criado sem a projeção do eixo Z.

Programação de Primitivas e Objetos 3D

Podemos criar objetos 3D através do uso de bibliotecas como

a OpenGL, WebGL ou a VRML. Estas linguagens de
programação possuem recursos para a criação e animação de
objetos 3D através de bibliotecas de funções.

No site https://www.khronos.org/ pode ser feito o download

da versão gratuita dessas bibliotecas para uso em projetos.

A WebGL faz uso dos recursos mais recentes do Javascript e

do HTML5. Basicamente a WebGL usa o elemento Canvas do
HTML5 junto com funções da OpenGL para criação e
animação de objetos 3D em uma página HTML5.

No site https://www.w3schools.com/html/default.asp/, da w3c

school temos um tutorial de HTML5 que aborda o elemento
canvas.

Atividade 2 )

Executar os scripts abaixo para uso do elemento Canvas em

HTML5.

https://www.w3schools.com/html/html5_canvas.asp

Atividade 3 )

Executar o tutorial do WebGl disponível no endereço:

http://vision.ime.usp.br/~acmt/hakyll/posts/2014-02-26-
webgl-criando-triangulo.html