Download - Material I-Bimestre
![Page 1: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/1.jpg)
1
Universidade do Vale do ParaíbaColégio Técnico Antônio Teixeira FernandesDisciplina Introdução a Computação Gráfica
(ICG)
Material I-BimestrePrimitivas Gráficas em 2D, Conceito de pontos pixel, Sistema de
cores,linhas retas,Algoritmo DDA,Breseham,Linhas cores e espessuras, Traçando círculos e elipses,Coordenadas polares, preenchimento de áreas, transformações geométricas em duas
dimensões, Tratamento Imagens BMP(Mapa de Bits)
Site : http://www1.univap.br/~wagner
Prof. Responsável
Wagner Santos C. de Jesus
![Page 2: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/2.jpg)
2
Computação Gráfica (CG)
• Vem a ser a forma de se fazer uma representação da realidade graficamente na resolução de computadores.
• A CG vem auxiliando nas mais diversas áreas do conhecimento; facilitando a visualização e simulação de eventos sociais, culturais e científicos.
![Page 3: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/3.jpg)
3
Algumas áreas de atuação da computação gráfica
• Engenharia – Simulação e CAD
• Bioengenharia – Simulação de crescimento tumoral
• Medicina – Sistemas de eletrocardiograma e Tomografias
• Arte e Cinema – (Efeitos especiais e personagens). Representação de quadros e esculturas
• Fotografia – Processamento de imagens
• Geografia – Sistema informações geográficas
• Arquitetura – Sistemas especializados em plantas de edificações.
• Entretenimento e cultura – Jogos e vídeo games.
• Matemática, Física e estatística.
![Page 4: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/4.jpg)
4
Simulação de crescimento tumoral
Criação de texturas de pelos de animais
Criação de realidade virtual simulação de deslocamento humano.
Imagem do leito de um rio
em relevo
Simulador de Gestação
![Page 5: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/5.jpg)
5
Criação de modelagem orgânica digital
Sistema de informações geográficas
Auto-CAD – Arquitetura e Edificações (AutoDesk)
Simulador Neuro
Cirúrgico
Cena de Praça pública (CCRV)
![Page 6: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/6.jpg)
6Vista Lateral (Praça Publica CCRV)
![Page 7: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/7.jpg)
7
0
10
20
30
40
50
60
70
80
90
1° Trim 2° Trim 3° Trim 4° Trim
LesteOesteNorte
Entretenimento (Jogos em 2D)
Tiro ao Alvo Corrida
Gráfico (Estatística)Cinema cena do filme (toyStoy -
1995) -Estúdio: Walt Disney Pictures / Pixar Animation
Studios
Estatística e Cinema
![Page 8: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/8.jpg)
8
Desenho confeccionado em AutoCad 2D usando conceitos de primitivas básicas.
![Page 9: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/9.jpg)
9
Filme Shrek
2004 - Produtora(s): DreamWorks SKG, Pacific Data Images (PDI)
Simulação de Funcionamento de Máquinas usando modelo Virtual AutoDesk.Projeto trem de pouso
aeronave
![Page 10: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/10.jpg)
10
Cena confeccionada pelos alunos
André e Rafael – 2008
Software - CCRV
![Page 11: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/11.jpg)
11
Cena vista de outro ângulo
Software - CCRV
![Page 12: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/12.jpg)
12
Caça F16 2009
![Page 13: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/13.jpg)
13
Caça F16 2009 (Francisco)
![Page 14: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/14.jpg)
14
Introdução aos métodos de Computação Gráfica em
modo 2D.
![Page 15: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/15.jpg)
15
Primitivas Gráficas – 2D
Chamamos de primitivas gráficas os comandos e funções que manipulam e alteram os elementos gráficos de uma imagem. Também entram na definição os elementos básicos de gráficos a partir dos quais são construídos outros, mais complexos.(Hetem Annibal Jr.,2006).
![Page 16: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/16.jpg)
16
Pontos
• O ponto é a unidade gráfica fundamental e também pode ser chamada de pixel.
Propriedades de um pixel :
- Posição no plano gráfico (x,y)
- Cor
![Page 17: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/17.jpg)
17
Representação de pixel
• (x,y) preto
(coordenada - x)
(coordenada - y)
Para se obter um pixel é necessário informar o par ordenado (x,y), que possibilita as coordenadas de linha e coluna onde será pintada a grade do vídeo; de acordo com a resolução especificada no sistema operacional.
![Page 18: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/18.jpg)
18
Eixo de coordenadas (800x600) ou (1024x768)y-
Lin
has
- 0
0 – Colunas - x
![Page 19: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/19.jpg)
19
Sinal de vídeo Analógico
Linha par
Linha impar
![Page 20: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/20.jpg)
20
Exibição do vídeo
O video é exibido lendo-se eletronicamente o sinal de vídeo e transformando-o no movimento do feixe de elétrons que varre a tela do monitor analógico.
![Page 21: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/21.jpg)
21
Vídeo Digital
![Page 22: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/22.jpg)
22
Pintando um pixel na práticausando C++ Builder
Para se tratar elementos gráficos podemos usar um objeto denominado Canvas que possibilita usar primitivas gráficas.
CanvasOBJETO Ponto
Linha
Retângulo
Elipse
Arcos
![Page 23: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/23.jpg)
23
Criando um ponto
Para se desenhar um ponto usa-se a propriedade Pixels do objeto Canvas.
Exemplo:Canvas->Pixels[x][y] = RGB(0,0,0);
Onde x coordenada da coluna; e y coordenada da linha a função RGB determina a cor do pixel que será plotado na tela.
![Page 24: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/24.jpg)
24
Tons monocromáticos0
255
127
Faixa de tons de cinza => C, portanto 0 <= C <= 255
0 255
![Page 25: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/25.jpg)
25
Intensidade – Imagens Monocromáticas
![Page 26: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/26.jpg)
26
Demonstração da Tabela RGB abaixo.RGB(0,0,0)
![Page 27: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/27.jpg)
27
Exemplo da criação de um ponto no vídeo - algoritmo
Pintap(real : x,y,cor) inicio pixels[x][y] <- cor; fim
![Page 28: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/28.jpg)
28
Linhas Retas
• Para se desenhar uma reta é necessário usar primitivas gráficas, onde as primitiva vem a ser um conjunto de algoritmos para se realizar elementos gráficos mais complexos.
![Page 29: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/29.jpg)
29
Conceito Matemático de reta
bmxy
1m
1m
Onde (m) Coeficiente ângular em relação ao eixo x.
Ângulo entre 0º e 45º com eixo x, o Coeficiente linear b dá o valor do eixo y.
01
01
xx
yym
11 mxyb
Ângulo entre 45º e 90º com eixo x.
Dados dois pontos no plano P1 e P2, pode-se obter m e b da seguinte maneira.
se
se
(1) (2)
![Page 30: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/30.jpg)
30
As formulas (1) e (2) serão base para construir os algoritmos de retas
0x 1x
0y
1y
![Page 31: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/31.jpg)
31
DDA – Digital Diferencial Analyser(Analisador Diferencial Digital)
Trata-se de um algoritmo que respeita as equações de coeficiente angular e linear mostrados anteriormente; Porem esse algoritmo torna-se ineficiente em alguns caso mostrando uma certa descontinuidade nas retas desenhadas.
![Page 32: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/32.jpg)
32
Algoritmo DDA (codificado)
retaDDA( real : x0, y0, x1, y1)Inicio dx <- x1 - x0 dy <- y1 - y0 x <- x0 y <- y0 s <- 0 se (dx > dy) entao s <- dx senao s <- dy fim_se xi <- dx / s yi <- dy / s Pintap( x,y, cor) Para x de 0 ate s faca x <- x + xi
y <- y + yiPintap( x,y, cor)
fim_para fim
(100,200)
(300,600)
(100,100) (500,100)
Exemplos valores (x0,y0)-(x1,y1)
![Page 33: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/33.jpg)
33
Breseham
Esse algoritmo baseia-se no argumento de que um segmento de reta, ao ser plotado, deve ser contínuo, os pixels que compõem o segmento devem ser vizinhos; Isso fará com que os pontos das retas sejam próximos não havendo separação entre os pixels pintados.
![Page 34: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/34.jpg)
34
Algoritmo de Breseham
1. Calcula-se
2. Calculam-se variáveis auxiliares:
3. Coloca-se nas variáveis o ponto inicial: x = e y =
4. Plota-se o ponto (x,y)
5. Calcula-se os parâmetros de decisão:
6. Se p for negativo então x = x + 1, passa-se para passo 8.
7. Se p for positivo ou zero, então x = x + 1, y = y + 1,
8. Repetem-se os passos 6 a 7 até que o ponto seja alcançado
0101 yyyexxx xyye 222
xyp 2ypp 2
xypp 22),( 11 yx
0x 0y
![Page 35: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/35.jpg)
35
C++ Builder, Breseham
Em linguagens modernas esse algoritmo já se encontra implementado e melhorado. Não havendo necessidade de uma nova implementação.
![Page 36: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/36.jpg)
36
Algoritmo
retaBreseham (inteiro:x0,y0,x1,y1)
Inicio
MoverAte(x0,y0)
PintarAte(x1,x1)
fim
![Page 37: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/37.jpg)
37
Métodos para segmentos de retas
MoveTo() : Determina o ponto inicial para um segmento de reta.
Exemplo :
Canvas->MoveTo(x0,y0);
![Page 38: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/38.jpg)
38
Método:LineTo():
Determina o ponto final para o segmento de reta.
Exemplo :
Canvas->LineTo(x1,y1);
![Page 39: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/39.jpg)
39
Exemplo Prático
Canvas->MoveTo(100,100);
Canvas->LineTo(100,200);
(100,100)
(100,200)
![Page 40: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/40.jpg)
40
Espessura de uma linha
Propriedade : Pen Permite ativar a caneta gráfica; em conjunto com Width que determina espessura de um seguimento de reta.
Exemplo :
Canvas->Pen->Width = x ;
Espessura
![Page 41: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/41.jpg)
41
Cor da linha (Color)
Propriedade : Color determina a cor da linha usando padrão RGB().
Exemplo :
Canvas->Pen->Color = RGB(255,0,0);
![Page 42: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/42.jpg)
42
Tipos de linhas
Para usar os tipos de linhas usando objeto Canvas implementado em C++, usa-se as propriedades Pen,Style; determina o tipo de linha que será usada em uma figura.
Sintaxe :
Canvas->Pen->Style = <Estilo da linha>;
![Page 43: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/43.jpg)
43
Estilos da Linha
Tipo Linha
PS_SOLID
PS_DASH
PS_DOT
PS_DASHDOT
PS_DASHDOTDOT
PS_NULL
![Page 44: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/44.jpg)
44
Criando um retângulo
Método Rectangle() : Cria um retângulo com a indicação de dois pontos.
Exemplo :
Canvas->Rectangle(5, 5, 100, 50);
![Page 45: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/45.jpg)
45
Círculos e Elipses
![Page 46: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/46.jpg)
46
Círculos
Traçado de um círculos:
Um circulo vem a ser um conjunto de pontos que estão a uma mesma distância de um ponto; essa distância é também chamada de raio. E o ponto distante de todos os outros é o centro.
Centro
Raio
222 ryyxx cc
Obtemos a seguinte definição.
Essa definição não tem como ser usada em computação gráfica.
![Page 47: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/47.jpg)
47
Definição válida para a computação gráfica.
y =f(x) ou x = g(y), Isolando-se as variáveis teremos
22
22
)(
)(
cc
cc
xxryy
yyrxx g(y)
f(x)
Essa definição quando um segmento de círculo fica quase horizontal ou vertical um incremento e x ou y tornará o arco descontinuo.
![Page 48: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/48.jpg)
48
Para podermos criar um algoritmo que desenhe o seguimento circular devemos converte as expressões anteriores em coordenadas polares. Como função de raio e de um ângulo.
sen
cos
ryy
rxx
c
c
20aÉ um ângulo que varia entre
Funções trigonométricas:
![Page 49: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/49.jpg)
49
Precisão dependente do raio do círculo
Octante Xn Yn
1 x y
2 y x
3 y -x
4 -x y
5 -x -y
6 -y -x
7 -y x
8 x -y
1
23
4
5
6 7
8
4/0 até
![Page 50: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/50.jpg)
50
Algoritmo do segmento de arcos e círculos usando funções trigonométricas sentido horário.
dArc(Inteiro:Xc,Yc, raio,Ti,Tf, cor)Inicio moverAte(Xc,Yc) para teta de Ti ate Tf faca x <- Xc + raio * cos(teta)
y <- Yc + raio * sin(teta) Pintap(x,y,cor)
fim_parafim
Xc, Yc – Centro Arco
Raio – Distância do centro nos pontos que formam o arco
Ti, Tf – valores iniciais e finais de
Cor : poderá ser três variáveis inteiras para receber valores RGB.
Para forma um circulo deverá estar entre 0 e 2
![Page 51: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/51.jpg)
51
ObservaçãoAs Variáveis Ti e Tf, serão iniciadas com valores em graus
que deverão ser transformada em radiano no momento de sua implementação; que será equivalente a teta.
º180
![Page 52: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/52.jpg)
52
O algoritmo apresentado anteriormente conhecido como funções polares; irá apresentar falha de precisão quando se aumentar o raio podem tornar imprecisões no traçado do circulo ou arco; Para resolver esse problema existe um algoritmo conhecido como ponto médio para círculos.Esse algoritmo já se encontra implementado em C++.
![Page 53: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/53.jpg)
53
Implementando arcos precisos
Método : Arc() - Desenha círculos e arcos.
Sintaxe :
Arc(Esq,top,Dir,Bai,Dir,Top,Esq,Top)
Exemplo : Canvas->Arc(100,200,300,400,500,600,700,800);
![Page 54: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/54.jpg)
54
ElipsesTraçado de uma Elipse:
Uma elipse é definida como um conjunto de pontos cuja soma das distâncias para dois pontos fixos é constantes. Onde os dois pontos fixos são chamados de foco da elipse. Sua definição matemática é:
22
22
21
2121 )()()()( yyxxyyxxdd
),(),( 2211 yxeyx21eddOnde São as posições dos focos,
São as do ponto P distância até os focos.p=(x,y)
1d 2dEssa definição não tem como ser usada em computação gráfica.
![Page 55: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/55.jpg)
55
Para se obter um algoritmo que satisfaça as definições em computação gráfica.
Se faz necessário uma definição f(x) e g(y). Coordenada polar
sen
cos
yc
xc
rxx
ryy
rx e ry referem-se aos raios da elipse na direção x e y, (xc, yc) é o centro da elipse. é um ângulo que vária entre 0 e 2 O número de passos deverá aumentar com o raio.
![Page 56: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/56.jpg)
56
Quadrante de simetria numa elipse
Quadrante Xn Yn
1 x y
2 -x y
3 -x -y
4 x -y
1
43
2
![Page 57: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/57.jpg)
57
Algoritmo do segmento de arcos para confecção da elipse usando funções trigonométricas sentido horário.
dElipse(Inteiro:Xc,Yc, Rx,Ry,Ti,Tf, cor)Inicio moverAte(Xc,Yc) para teta de Ti ate Tf faca x <- Xc + Ry * cos(teta)
y <- Yc + Rx * sin(teta) Pintap(x,y,cor)
fim_parafim
Xc, Yc – Centro Arco
Rx, Ry – Raio da elipse na direção x e y. Rx < Ry
Ti, Tf – valores iniciais e finais de
Cor : poderá ser três variáveis inteiras para receber valores RGB.
Para forma um circulo deverá estar entre 0 e 2
![Page 58: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/58.jpg)
58
O algoritmo apresentado anteriormente conhecido como funções polares; irá apresentar falha de precisão quando se aumentar o raio podem tornar imprecisões no traçado do circulo ou arco; Para resolver esse problema existe um algoritmo conhecido como ponto médio para Elipse.Esse algoritmo já se encontra implementado em C++.
![Page 59: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/59.jpg)
59
Ponto Médio para Elipse
Método : Ellipse() desenha uma elipse nas coordenadas especificadas.
Exemplo :
Canvas->Ellipse(Xc,Yc, Rx, Ry);
![Page 60: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/60.jpg)
60
Preenchimento de áreas
Ao se desenhar um objeto além de seu contorno o mesmo poderá possuir cores em seu interior podendo ser visualizadas. Em C++ encontramos implementados esse algoritmos o que normalmente se usa é o preenchimento recursivo.
![Page 61: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/61.jpg)
61
Propriedade Brush, Color
Permite realizar o preenchimento em um determinado objeto retângulo, círculo etc.
Exemplo :
Canvas->Brush->Color = RGB(0,255,0);
Canvas->Rectangle(10,10, 100, 50 );
![Page 62: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/62.jpg)
62
Preenchimento Hachura
Style : Propriedade que permite realizar um estilo de preenchimento em uma figura.
Exemplo :
Canvas->Brush->Color = RGB(255,0,0);
Canvas->Brush->Style = bsDiagCross;
Canvas->Rectangle(100, 100,200, 200 );
![Page 63: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/63.jpg)
63
Tabela da propriedade : Style
Obs: São preenchimentos válidos apenas para o objeto
Canvas.
![Page 64: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/64.jpg)
64
Usando Textura
Podemos preencher uma figura usando um arquivo com uma imagem ou desenho.
Para realizar essa técnica usa-se um objeto da classe Graphics.
Exemplo :Graphics::TBitmap *ObjBmp = new Graphics::TBitmap;
![Page 65: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/65.jpg)
65
Usando o método LoadFromFile()
Esse método irá carregar uma imagem ao fundo da figura.
Exemplo :
ObjBmp->LoadFromFile("/Textura.bmp");
![Page 66: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/66.jpg)
66
Propriedade Brush, Bitmap
Envolve toda uma imagem na área de uma figura.
Exemplo :
Canvas->Brush->Bitmap = ObjBmp;
![Page 67: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/67.jpg)
67
Exemplo : Graphics::TBitmap *BrushBmp = new Graphics::TBitmap;try{ BrushBmp->LoadFromFile(“Textura.bmp");
Canvas->Brush->Bitmap = BrushBmp; Canvas->Ellipse(10,200,300,400);
}__finally{
Canvas->Brush->Bitmap = NULL; delete BrushBmp;
}
![Page 68: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/68.jpg)
68
Associando figuras a imagens
Exemplo :
TCanvas *pCanvas = Image1->Canvas;
pCanvas->Brush->Style = bsVertical;
pCanvas->Brush->Color = RGB(0,0,255);
pCanvas->Rectangle(0, 0, Image1->Width, Image1->Height);
![Page 69: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/69.jpg)
69
Desenhando Graficamente um texto
WwySsig }Subida} Descida
Linha de base
}Altura
Tamanho da fonte
![Page 70: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/70.jpg)
70
Criação de textos
TextOutA() : Permite desenhas um texto nas coordenadas especificadas.
Sintaxe : Canvas->TextOutA(x,y,String);
Exemplo :
Canvas->TextOutA(100,200,”Tchuk”);
![Page 71: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/71.jpg)
71
Modificando atributos do textoPropriedade : Font
Propriedades Valores
Color RGB()
Size Tamanho da fonte
Name Nome da fonte : (Times New Roman)
Style fsBold,fsItalic,fsUnderline,fsStrikeOut
![Page 72: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/72.jpg)
72
Exemplo prático de texto formatado
Canvas->Font->Color = RGB(255,0,0); Canvas->Font->Size = 50; Canvas->Font->Name = "Times New Roman"; Canvas->Font->Style = TFontStyles() << fsBold << fsStrikeOut
<< fsUnderline; Canvas->TextOutA(100,200,“Bom Dia !!!");
![Page 73: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/73.jpg)
73
Transformações Geométricas – 2D
Chamamos de transformação o ato de levar um objeto de um ponto para outro, num sistema de referências. As transformações mais usadas são :
• Translação• Rotação • Escala.
![Page 74: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/74.jpg)
74
Translação Chamamos de translação o ato de levar um
objeto de um ponto para outro, num sistema de referência. Dado um ponto original (x,y) ; existe um ponto (x’,y’) translação, que corresponde ao ponto original dado por:
{x’=x+tx
y’=y+ty
(tx, ty) – É chamado de
vetor de translação ou vetor de deslocamento tx quantos pixels a figura está deslocada na horizontal e ty quantos pixels a figura esta deslocada na vertical.
![Page 75: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/75.jpg)
75
Aplicação de uma translação
x0
y0+ty
x1
y1+ty
y1’
y0’
Translação
![Page 76: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/76.jpg)
76
Implementação de uma translação
int x0 = 10; int y0 = 10;
int x1 = 100; int y1 =50;
ty = 70;
Canvas->Rectangle(x0,y0,x1,y1 );
Canvas->Rectangle(x0,y0+ty,x1,y1+ty );
Vetor de translação horizontal
![Page 77: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/77.jpg)
77
Rotação
Dá-se o nome de rotação ao ato de girar um objeto de um ângulo, num sistema de referência.
cossen'
sencos'
yxy
yxx
![Page 78: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/78.jpg)
78
Exemplo de Aplicação de Rotação em torno de um eixo.
Origem (xc,yc)
(100,200) {
x’=xc + r * cos(180+teta)
y’=yc + r * sen(180+teta)
teta = 90 graus
r(x’,y’)
Para ajuste no primeiro quadrante os valores devem ser negativos.
![Page 79: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/79.jpg)
79
Implementação em C++ de Rotação em torno de um eixo de referência
Canvas->Font->Size = 50;
Canvas->Font->Color = RGB(0,0,255);
Canvas->TextOutA(100,200,".");
double r = 50;
double x1 = 100 + r * cos((180 * 3.141592) / 180);
double y1 = 200 + r * sin((180 * 3.141592) / 180);
Canvas->Font->Color = RGB(255,0,0);
Canvas->TextOutA(x1,y1,".");
![Page 80: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/80.jpg)
80
Escala
Quando se aplica uma transformação de escala a um objeto, o resultado é um novo objeto semelhante ao original, mas “esticado” ou “encolhido”. Pode-se aplicar escala com valores diferentes para cada dimensão; por exemplo, dobrar um objeto na direção horizontal e dividir na vertical.
![Page 81: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/81.jpg)
81
Formalização da Escala
Uma escala é determinada pelo vetor de escala (Sx ,Sy). Onde Sx é a escala aplicada na direção x, e Sy é a escala aplicada na direção y.
Equação : x’= xsx
y’= ysy{
![Page 82: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/82.jpg)
82
Aplicando Escala
x0 x1
y0
y1 * Sy
* Sx
y’
x’
![Page 83: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/83.jpg)
83
Implementação de escala em uma figura.
int x0=100; int y0=200; int x1=300; int y1=250; int sx=2; int sy=2; Canvas->Pen->Color = RGB(255,0,0); Canvas->Brush->Style = bsCross; Canvas->Brush->Color = RGB(0,0,255); Canvas->Rectangle(x0,y0,x1,y1); ShowMessage(" "); Canvas->Rectangle(x0,y0,x1*sx,y1*sy );
![Page 84: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/84.jpg)
84
Introdução : Processando Imagens Bitmap
• Processamento de imagem é qualquer forma de processamento de dados no qual a entrada e saída são imagens tais como fotografias ou quadros de vídeo.
![Page 85: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/85.jpg)
85
Formação da Imagem
![Page 86: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/86.jpg)
86
![Page 87: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/87.jpg)
87
![Page 88: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/88.jpg)
88
![Page 89: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/89.jpg)
89
Processamento computacional envolvendo imagens
Processar Imagem
Processamento
de
Imagens
Processamento de Imagens – Estuda as transformações de imagens, que pode ser de uma imagem em outra ou a estimação de
parâmetros da imagem.
![Page 90: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/90.jpg)
90
Computação Gráfica (CG)
Processamento
em CG
Cone de raio 1
altura 1, pós observador, pós
iluminação, fundo, etc.
Estuda os métodos de se criar imagens sintéticas a partir de especificações.
![Page 91: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/91.jpg)
91
Tipo Bitmap
• Device Independent Bitmap (DIB) ou Windows Bitmap (BMP) é um formato de gráficos por mapa de bits (composto por pixeis) usado pelos gráficos de subsistema (GDI) do Microsoft Windows, e é usada geralmente como um formato de gráficos nessa plataforma.
GDI - Graphics Device Interface
![Page 92: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/92.jpg)
92
Importante:
• Um arquivo do tipo BMP é mais seguro para ser manipulado por não ter compressão de informações em seu formato causando a perda de qualidade na imagem ou figura.
![Page 93: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/93.jpg)
93
Abrindo um arquivo de imagem.
• Primeiro o objeto da classe Image deve ser instanciado.
Image1->Picture->LoadFromFile("C:/PImagem/bolas.bmp");
![Page 94: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/94.jpg)
94
Fazendo leitura da Imagem
• Uma das técnica mais simples para realizar a leitura de uma imagem é chamada de varredura horizontal. Onde pega-se o tamanho da área ocupada pela imagem e realiza-se a leitura dos pixels até o final de cada linha fazendo isso até o final da imagem.
![Page 95: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/95.jpg)
95
Exemplo : Varredura Horizontal
Altura
(height)
Largura (width)
1
1
y
x)(
)(arg
linhasAltura
colunasuraL
(Xn+1,Yn+1)
![Page 96: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/96.jpg)
96
Capturando o tamanho da imagemWidth e Height
// Cria um ponteiro do tipo Imagem.
Graphics::TBitmap *Bmp = new Graphics::TBitmap;
// Exibe imagem na tela
Tela->Picture->LoadFromFile("C:/Caminho/bolas.bmp");
// Aponta para o endereço da imagem
Bmp = Tela->Picture->Bitmap;
// Captura o tamanho da imagem
int largura = Bmp->Width;
int altura = Bmp->Height;
![Page 97: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/97.jpg)
97
Identificando a cor do pixel.
Criar um objeto da classe TColor.
Exemplo : TColor captura_cor;
Esse objeto irá permitir reconhecer cores da imagem no formato RGB.
![Page 98: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/98.jpg)
98
Método Descrição
GetRValue(cor) Retorna intensidade de cor vermelha.
GetGValue(cor) Retorna intensidade de cor verde.
GetBValue(cor) Retorna intensidade de cor azul.
Exemplo :
byte r,g,b;
TColor captura_cor;
captura_cor = Bmp->Canvas->Pixels[x][y];r = GetRValue(captura_cor); g = GetGValue(captura_cor);b = GetBValue(captura_cor);
![Page 99: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/99.jpg)
99
Criando a varredura por arranjos simples.
).( S
S, área retangular da imagem.
S
A, são arranjos simples de S elementos tomados 2 a 2.(par ordenado)
},{ 1 nnn yxZSeja: Z
x
y
![Page 100: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/100.jpg)
100
Graphics::TBitmap *Bmp = new Graphics::TBitmap; Tela->Picture->LoadFromFile("C:/PImagem/taco.bmp"); Image1->Picture->LoadFromFile("C:/PImagem/taco.bmp"); Bmp = Tela->Picture->Bitmap; TColor captura_cor; byte r,g,b; int largura = Bmp->Width; int altura = Bmp->Height;
for(int coluna=0;coluna<=largura;coluna++) { for(int linha=0;linha<=altura;linha++){ captura_cor = Bmp->Canvas->Pixels[coluna][linha];
r = GetRValue(captura_cor); g = GetGValue(captura_cor); b = GetBValue(captura_cor); if(r == 255 && g == 0 && b ==0) Bmp->Canvas->Pixels[coluna][linha] = RGB(0,0,0);
} } Bmp->SaveToFile("C:/PImagem/taconovo.bmp");
Exemplo : (Troca a imagem de cor)
![Page 101: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/101.jpg)
101
Capturando cores objeto da classe TColorDialog (Dialog)
Retorna com os tons nas faixas RGB correspondente a cor selecionada.
![Page 102: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/102.jpg)
102
Método Execute()
Realiza a abertura da caixa de dialogo (ColorDialog1), para escolha da cor desejada.
boolean logico = Cd->Execute();
![Page 103: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/103.jpg)
103
Capturando a cor selecionada.
TColor cor = ColorDialog1->Color;
Byte r = GetRValue(cor);
Byte g = GetGValue(cor);
Byte b = GetBValue(cor);
Captura as cores escolhidas nas faixas adequadas.
![Page 104: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/104.jpg)
104
TPerformanceGraph (Sample)
Cria uma área para representação de gráficos de funções matemáticas periódicas.
Onde as grades representam uma determinada escala para representações e leituras dos gráficos.
![Page 105: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/105.jpg)
105
Método: DataPoint()
Realiza a atribuição de pontos e cor na área do objeto, PerformanceGraph permitindo plotar um gráfico com deslocamento no período.
Sintaxe :
Obj_perf->DataPoint(<cor>,<ponto> );
![Page 106: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/106.jpg)
106
Update()
Realiza a impressão do ponto no gráfico.
Sintaxe :
Obj_perf->Update();
![Page 107: Material I-Bimestre](https://reader035.vdocuments.pub/reader035/viewer/2022082210/56814ab6550346895db7ca8d/html5/thumbnails/107.jpg)
107
Exemplo: de gráfico da f(x) = x2, onde –10 <= x <= 30
int b = 30;
for(int x = -10;x<=b;x++) {
int y = pow(x,2);
Pg->DataPoint(RGB(255,0,0),abs(y));
Pg->Update();
Pg->Refresh();
}0
100
200
300
400
500
600
700
800
900
1000
1 4 7
10 13 16 19 22 25 28 31 34 37 40
O programa acima irá imprimir uma parábola como mostra a figura, acima.