1 universidade do vale do paraíba colégio técnico antônio teixeira fernandes disciplina...

105
1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas 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

Upload: internet

Post on 17-Apr-2015

102 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

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: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

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: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

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: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

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 7: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

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: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

8

Desenho confeccionado em AutoCad 2D usando conceitos de primitivas básicas.

Page 9: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

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: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

10

Cena confeccionada pelos alunos André e Rafael – 2008

Software - CCRV

Page 11: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

11

Cena vista de outro ângulo

Software - CCRV

Page 12: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

12

Introdução aos métodos de Computação Gráfica em

modo 2D.

Page 13: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

13

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, p3).

Page 14: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

14

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 15: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

15

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 16: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

16

Eixo de coordenadas (800x600) ou (1024x768)y-

Lin

has

- 0

0 – Colunas - x

Page 17: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

17

Sinal de vídeo Analógico

Linha par

Linha impar

Page 18: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

18

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 19: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

19

Vídeo Digital

Page 20: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

20

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 21: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

21

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 22: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

22

Tons monocromáticos0

255

127

Faixa de tons de cinza => C, portanto 0 <= C <= 255

0 255

Page 23: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

23

Intensidade – Imagens Monocromáticas

Page 24: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

24

Demonstração da Tabela RGB abaixo.RGB(0,0,0)

Page 25: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

25

Exemplo da criação de um ponto no vídeo - algoritmo

Pintap(real : x,y,cor) inicio pixels[x][y] <- cor; fim

Page 26: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

26

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 27: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

27

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 28: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

28

As formulas (1) e (2) serão base para construir os algoritmos de retas

0x 1x

0y

1y

Page 29: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

29

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 30: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

30

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 31: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

31

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 32: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

32

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 33: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

33

C++ Builder, Breseham

Em linguagens modernas esse algoritmo já se encontra implementado e melhorado. Não havendo necessidade de uma nova implementação.

Page 34: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

34

Algoritmo

retaBreseham (inteiro:x0,y0,x1,y1)

Inicio

MoverAte(x0,y0)

PintarAte(x1,x1)

fim

Page 35: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

35

Métodos para segmentos de retas

MoveTo() : Determina o ponto inicial para um segmento de reta.

Exemplo :

Canvas->MoveTo(x0,y0);

Page 36: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

36

Método:LineTo():

Determina o ponto final para o segmento de reta.

Exemplo :

Canvas->LineTo(x1,y1);

Page 37: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

37

Exemplo Prático

Canvas->MoveTo(100,100);

Canvas->LineTo(100,200);

(100,100)

(100,200)

Page 38: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

38

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 39: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

39

Cor da linha (Color)

Propriedade : Color determina a cor da linha usando padrão RGB().

Exemplo :

Canvas->Pen->Color = RGB(255,0,0);

Page 40: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

40

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 41: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

41

Estilos da Linha

Tipo Linha

PS_SOLID

PS_DASH

PS_DOT

PS_DASHDOT

PS_DASHDOTDOT

PS_NULL

Page 42: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

42

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 43: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

43

Círculos e Elipses

Page 44: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

44

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 45: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

45

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 46: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

46

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 47: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

47

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 48: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

48

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 49: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

49

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 50: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

50

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 51: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

51

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 52: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

52

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 53: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

53

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 54: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

54

Quadrante de simetria numa elipse

Quadrante Xn Yn

1 x y

2 -x y

3 -x -y

4 x -y

1

43

2

Page 55: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

55

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 56: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

56

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 57: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

57

Ponto Médio para Elipse

Método : Ellipse() desenha uma elipse nas coordenadas especificadas.

Exemplo :

Canvas->Ellipse(Xc,Yc, Rx, Ry);

Page 58: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

58

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 59: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

59

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 60: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

60

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 61: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

61

Tabela da propriedade : Style

Obs: São preenchimentos válidos apenas para o objeto

Canvas.

Page 62: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

62

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 63: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

63

Usando o método LoadFromFile()

Esse método irá carregar uma imagem ao fundo da figura.

Exemplo :

ObjBmp->LoadFromFile("/Textura.bmp");

Page 64: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

64

Propriedade Brush, Bitmap

Envolve toda uma imagem na área de uma figura.

Exemplo :

Canvas->Brush->Bitmap = ObjBmp;

Page 65: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

65

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 66: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

66

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 67: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

67

Desenhando Graficamente um texto

WwySsig }Subida} Descida

Linha de base

}Altura

Tamanho da fonte

Page 68: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

68

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 69: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

69

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 70: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

70

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 71: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

71

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 72: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

72

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 73: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

73

Aplicação de uma translação

x0

y0+ty

x1

y1+ty

y1’

y0’

Translação

Page 74: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

74

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 75: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

75

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 76: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

76

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 77: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

77

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 78: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

78

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 79: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

79

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 80: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

80

Aplicando Escala

x0 x1

y0

y1 * Sy

* Sx

y’

x’

Page 81: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

81

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 82: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

82

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 83: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

83

Formação da Imagem

Page 84: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

84

Page 85: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

85

Page 86: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

86

Page 87: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

87

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 88: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

88

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 89: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

89

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 90: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

90

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 91: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

91

Abrindo um arquivo de imagem.

• Primeiro o objeto da classe Image deve ser instanciado.

Image1->Picture->LoadFromFile("C:/PImagem/bolas.bmp");

Page 92: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

92

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 93: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

93

Exemplo : Varredura Horizontal

Altura

(height)

Largura (width)

1

1

y

x)(

)(arg

linhasAltura

colunasuraL

(Xn+1,Yn+1)

Page 94: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

94

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 95: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

95

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 96: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

96

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 97: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

97

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 98: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

98

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 99: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

99

Capturando cores objeto da classe TColorDialog (Dialog)

Retorna com os tons nas faixas RGB correspondente a cor selecionada.

Page 100: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

100

Método Execute()

Realiza a abertura da caixa de dialogo (ColorDialog1), para escolha da cor desejada.

boolean logico = Cd->Execute();

Page 101: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

101

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 102: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

102

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 103: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

103

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 104: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

104

Update()

Realiza a impressão do ponto no gráfico.

Sintaxe :

Obj_perf.Update();

Page 105: 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material I-Bimestre Primitivas

105

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.