Universidade do Vale do ParaíbaColégio Técnico Antônio Teixeira FernandesDisciplina Introdução a Computação Gráfica

(ICG)

Material IPrimitivas Gráficas em 2D, Conceito de pontos pixel, Sistema de

1

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

Computação Gráfica (CG)

• Vem a ser a forma de se fazer umarepresentação da realidade graficamente naresolução de computadores.

2

• A CG vem auxiliando nas mais diversasáreas do conhecimento; facilitando avisualização e simulação de eventos sociais,culturais e científicos.

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

3

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.

Simulação de crescimento tumoral

Criação de texturas de pelos de animais

Criação de realidade virtual simulação de deslocamento

Simulador de Gestação

4

simulação de deslocamento humano.

Imagem do leito de um rio

em relevo

Criação de modelagem orgânica digital

Sistema de informações geográficas

5

Auto-CAD – Arquitetura e Edificações (AutoDesk)

Simulador Neuro

Cirúrgico

Cena de Praça pública (CCRV)

6Vista Lateral (Praça Publica CCRV)

Entretenimento (Jogos em 2D)

Tiro ao Alvo Corrida

Estatística e Cinema

7

0

10

20

30

40

50

60

70

80

90

1° Trim 2° Trim 3° Trim 4° Trim

LesteOesteNorte

Gráfico (Estatística)Cinema cena do filme (toyStoy -

1995) -Estúdio: Walt Disney Pictures / Pixar Animation

Studios

Estatística e Cinema

8

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

Filme Shrek

2004 - Produtora(s): DreamWorks SKG, Pacific Data Images (PDI)

9

Simulação de Funcionamento de Máquinas usando modelo Virtual AutoDesk.Projeto trem de pouso

aeronave

Cena confeccionada pelos alunos André e Rafael – 2008

10Software - CCRV

Cena vista de outro ângulo

11

Software - CCRV

Caça F16 2009

12

Caça F16 2009 (Francisco)

13

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

modo 2D.

14

modo 2D.

Primitivas Gráficas – 2D

Chamamos de primitivas gráficas oscomandos e funções que manipulamealteram os elementos gráficos de umaimagem. Tambémentram na definição os

15

imagem. Tambémentram na definição oselementos básicos de gráficos a partir dosquais são construídos outros, maiscomplexos.(HetemAnnibal Jr.,2006).

Pontos

• O ponto é a unidade gráfica fundamental e também pode ser chamada de pixel.

16

Propriedades de um pixel :

- Posição no plano gráfico (x,y)

- Cor

Representação de pixel

• (x,y) preto

(coordenada - x)

(coordenada - y)

17

(coordenada - x)

Para se obter umpixel é necessário informar o par ordenado(x,y), que possibilita as coordenadas de linha e coluna ondeserá pintada a grade do vídeo; de acordo coma resoluçãoespecificada no sistema operacional.

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

y-Li

nhas

-0

0 – Colunas - x

18

19

20

21

Pintando um pixel na práticausando C#

Para se tratar elementos gráficos podemos usarum objeto denominadoGraphicsque possibilitausar primitivas gráficas.

22

OBJETO Ponto

Linha

Retângulo

Elipse

Arcos

Graphics

PaintEventArgs

Método Paint()

private void Form1_Paint(object sender, PaintEventArgse)

{

// Instruções gráficas

// Chamadas de funções // Chamadas de funções

}

O método Paint(), permite acessar o controlador gráfico do hardware, permitindo Reproduzir, Pontos, Linhas, Retas etc.

23

Criando um pontoPara se desenhar umponto usa-se a

propriedade Graphics do objeto(PaintEventArgs).

Exemplo:

24

Exemplo:e.Graphics.DrawLine(<ObjPen>, x, y, x+1, y);

Onde x coordenada da coluna; e y coordenadada linha a função RGBem ObjPen determina acor do pixel que será plotado na tela.

Objeto da Classe Color

Color cor = new Color();

cor = Color.FromArgb(<Alfa>,<R>, <G>, <B>);

Cana Alfa determina a transparência do ponto, os valores RGB indicam as intensidades.

25

Objeto da classe Pen

Define parâmetros da caneta que reproduz os pontos no vídeo.

Pen <Objeto> = new Pen(<cor>,<ExpN>);

<ExpN> - Determina a espessura.

26

Tons monocromáticos0

127

27

255

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

0 255

Intensidade – Imagens Monocromáticas

28

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

Color cor = new Color();

29

Color cor = new Color();

cor = Color.FromArgb(<ExpA>,<ExpN1,<ExpN2>,<ExpN3>);

<ExpA> - Determina canal Alfa (Transparência do

ponto).

<ExpN1> - Determina a Intensidade no canal R.

<ExpN2> - Determina a Intensidade no canal G.

<ExpN3> - Determina a Intensidade no canal B.

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

Pintap(Inteiro : x,y,cor)inicio

cor = Caneta(cor);

30

cor = Caneta(cor);Desenhapixels(x,y,cor);

fim

Linhas Retas

• Para se desenhar uma reta é necessário usarprimitivasgráficas,ondeasprimitiva vema

31

primitivasgráficas,ondeasprimitiva vemaser um conjunto de algoritmos para serealizar elementos gráficos mais complexos.

Conceito Matemático de reta

bmxy +=

1≤m

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.

se

32

1≥m

01

01

xx

yym

−−= 11 mxyb −=

Ângulo entre 45º e 90º com eixo x.

Dados dois pontos no planoP1 e P2, pode-se obter m e bda seguinte maneira.

se

(1) (2)

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

1y

33

0x 1x

0y

DDA – Digital Diferencial Analyser(Analisador Diferencial Digital)

Trata-se de umalgoritmo que respeita asequações de coeficiente angular e linearmostrados anteriormente; Porem esse

34

mostrados anteriormente; Porem essealgoritmo torna-se ineficiente emalgunscaso mostrando uma certa descontinuidadenas retas desenhadas.

Algoritmo DDA (codificado)

retaDDA( real : x0, y0, x1, y1)Inicio

dx <- x1 - x0dy <- y1 - y0x <- x0y <- y0s <- 0se (dx > dy) entao

s <- dxsenao

(100,200)

(100,100) (500,100)

Exemplos valores (x0,y0)-(x1,y1)

35

senao s <- dy

fim_sexi <- dx / syi <- dy / s Pintap( x,y, cor)Para x de 0 ate s faca

x <- x + xiy <- y + yi

Pintap( x,y, cor)fim_para

fim

(300,600)

Breseham

Esse algoritmo baseia-se no argumentode que umsegmento de reta, ao ser plotado,deve ser contínuo, os pixels que compõemosegmentodevemservizinhos; Issofarácom

36

segmentodevemservizinhos; Issofarácomque os pontos das retas sejampróximos nãohavendo separação entre os pixels pintados.

C#, Breseham

Em linguagens modernas esse algoritmojá se encontra implementado e melhorado.Não havendo necessidadede uma nova

37

Não havendo necessidadede uma novaimplementação.

Algoritmo

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

Inicio

Cor = Intensidade(Alfa,cor);

38

Cor = Intensidade(Alfa,cor);

Caneta(cor,0);

DesenhaLinha(cor,x0,y0,x1,y1);

fim

Implementação do Segmento de Reta Segmento de Reta

Breseham C#

39

Métodos para segmentos de retas

DrawLine() : Determinar o ponto Inicial e pontoFinal para o traçado de umsegmento de reta.

40

Exemplo :

DrawLine(<Cor>, x0,y0,x1,y1);

Exemplo Prático

x0 x1> C, x0 – 1y0 y1 > L, y0 – 1

^

^

Onde C => representa o número de colunas disponíveis na tela.L => representa o número de linhas disponíveis na tela.

41

p1(100,100)

p2(100,200)

L => representa o número de linhas disponíveis na tela.

Espessura de uma linha

Classe: Pen Permite ativar a canetagráfica; determinando a espessura dada porumnúmero inteiro <ExpN>do ponto.

Exemplo:

42

Exemplo:

Pen caneta = newPen(Cor, <ExpN>);

Espessura

Tipos de linhas

43

Estilos da Linha

Tipo Linha

SOLID

DASH

44

DOT

DASHDOT

DASHDOTDOT

NULL

Exemplo Prático

float[] flinha = { 5, 2, 15, 4 };

Pen caneta = new Pen(Color.Black, 2);

caneta.DashPattern = flinha;caneta.DashPattern = flinha;

e.Graphics.DrawLine(caneta, 100,100,100,200);

45

Exemplo Prático - 2

float[] dash = { 5, 1};

Pen caneta = new Pen(Color.Black, 1);

caneta.DashPattern = dash;caneta.DashPattern = dash;

e.Graphics.DrawLine(caneta, 100,100,100,200);

46

Exemplo Prático - 3

float[] dashdot = {5, 2, 1, 2};

Pen caneta = new Pen(Color.Black, 1);

caneta.DashPattern = dashdot;caneta.DashPattern = dashdot;

e.Graphics.DrawLine(caneta, 100,100,100,200);

47

Criando um retângulo

Método DrawRectangle() : Cria um retângulo com a indicação do ponto e as dimensões.

Exemplo :

48

DrawRectangle(Pen, <ExpN1>,<ExpN2>,<ExpN3>,<ExpN4>);

<ExpN1>: Corresponde a Coluna da janela.

<ExpN2>: Corresponde a Linha da janela.

<ExpN3>: Corresponde a Largura da janela.

<ExpN4>: Corresponde a Altura da janela.

Exemplo Prático

Color cor = new Color();

cor = Color.FromArgb(0, 0, 255);

e.Graphics.DrawRectangle(new Pen(cor,0), 100,50,100,50);e.Graphics.DrawRectangle(new Pen(cor,0), 100,50,100,50);

49

Círculos e Elipses

50

Círculos e Elipses

Círculos

Traçado de um círculos:

Um circulo vem a ser um conjunto de pontos que estão a umamesma distância de um ponto; essa distância é também chamadaderaio. E o ponto distante de todos os outros é o centro.

Obtemos a seguinte

51

Centro( ) ( ) 222 ryyxx cc =−+−

Obtemos a seguinte definição.

Essa definição não tem como ser usada em computação gráfica.

Definição válida para a computação gráfica.

y =f(x) ou x = g(y), Isolando-se as variáveis teremos

−−±= 22 )( cc yyrxx g(y)

52

−−±= 22 )( cc

cc

xxryy 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.

Para podermos criar umalgoritmo quedesenhe o seguimento circular devemos converte asexpressões anteriores emcoordenadas polares. Comofunção de raio e de umângulo.

+= θcosrxx

Funções trigonométricas:

53

+=+=

θθ

sen

cos

ryy

rxx

c

c

θ π20aÉ um ângulo que varia entre

Precisão dependente do raio do círculo

Octante Xn Yn

1 x y

2 y x

3 y -x1

23

4

4/0 πθ até−

54

3 y -x

4 -x y

5 -x -y

6 -y -x

7 -y x

8 x -y

14

5

6 7

8

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)

Xc, Yc – Centro Arco

Raio – Distância do centro nos pontos que formam o arco

Ti, Tf – valores iniciais e

55

y <- Yc + raio * sin(teta)Pintap(x,y,cor)

fim_parafim

θ

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

θ

π

ObservaçãoAs Variáveis Ti e Tf, serão iniciadas com valores em graus que

deverão ser transformada em radiano no momento de suaimplementação; que será equivalente a teta.

π

56

º180

παθ =

O algoritmo apresentado anteriormenteconhecido como funções polares; iráapresentar falha de precisão quando seaumentar o raio podemtornar imprecisõesno traçado do circulo ou arco; Pararesolveresseproblemaexisteum algoritmo

57

no traçado do circulo ou arco; Pararesolveresseproblemaexisteum algoritmoconhecido como ponto médio para círculos.Esse algoritmo já se encontraimplementado emC#.

ElipsesTraçado de uma Elipse:

Uma elipse é definida como um conjunto de pontos cuja soma dasdistâncias para dois pontos fixos é constantes. Onde os doispontos fixossão chamados de foco da elipse. Sua definição matemática é:

22

22

21

2121 )()()()( yyxxyyxxdd −+−+−+−=+

58

),(),( 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ãotem como ser usadaem computaçãográfica.

Para se obter um algoritmo que satisfaça as definições em computação gráfica.

Se faz necessário uma definiçãof(x) e g(y).Coordenada polar

+= θcosxc ryy

59

+=+=

θθ

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.

Quadrante de simetria numa elipse

Quadrante Xn Yn

1 x y

2 -x y12

60

3 -x -y

4 x -y

43

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)

Xc, Yc – Centro Arco

Rx, Ry – Raio da elipse na direção x e y. Rx < Ry

Ti, Tf – valores iniciais e finais de θ

61

y <- Yc + Rx * sin(teta)Pintap(x,y,cor)

fim_parafim

θ

finais de

Cor : poderá ser três variáveis inteiras para receber valores RGB.

Para forma um circulo deverá estar entre 0 e 2

θ

π

O algoritmo apresentado anteriormenteconhecido como funções polares; iráapresentar falha de precisão quando seaumentar o raio podemtornar imprecisões notraçadodo circulo ou arco; Para resolveresseproblemaexisteumalgoritmoconhecidocomo

62

traçadodo circulo ou arco; Para resolveresseproblemaexisteumalgoritmoconhecidocomoponto médio para Elipse.Esse algoritmo já se encontra implementadoemC#.

Ponto Médio para Elipse

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

Exemplo:

63

Exemplo:

e.Graphics.DrawEllipse(Xc,Yc, Lx, Ay);

Lx = Largura da região rectangular

Ay = Altura da região retangular

Aplicação de método para desenho de uma Ellipse

Exemplo:

Color cor = new Color();Color cor = new Color();

cor = Color.FromArgb(255, 0, 0);

e.Graphics.DrawEllipse(new Pen(cor, 0), 100, 100, 200, 100);

64

Conceito de Preenchimento de Preenchimento de

Áreas

65

Preenchimento de áreas (Sólidas)

Ao se desenhar umobjeto alémde seu contorno omesmo poderá possuir cores emseu interior podendo servisualizadas. Em C# encontramosimplementadosesse

66

visualizadas. Em C# encontramosimplementadosessealgoritmos o que normalmente se usa é o preenchimentorecursivo.

Propriedade Brush, Color

Permite realizar o preenchimento emumdeterminado objeto retângulo, círculo etc.

Exemplo :

67

SolidBrush fundo = new SolidBrush(Color.Blue);

Pen pen = new Pen(Color.Black, 0);

e.Graphics.DrawEllipse(pen, 100, 100, 200, 100);

e.Graphics.FillEllipse (fundo, 100, 100, 200, 100);

Preenchimento com HachuraHachura

68

Preenchimento Hachura (HatchBrush)

Para se confeccionar o modelo dehachura, usa-se umobjeto da classeHatchBrush.

Sinatxe:

69

Sinatxe:

HatchBrush preech = new HatchBrush(<TipoH>, <CorL>,

<CorF>);

<TipoH>: Tipo de Hachura a ser aplicado.

<CorL> : Cor das linhas da Hachura.

<CorF> : Cor de preenchimento sólido de fundo.

Tabela da propriedade : Hachuras

(*)

70

Obs: São preenchimentos válidos apenas para o objetoMétodos disponíveis no controlador Gráfico.

Observação

Para que a classe HatchBrush, funcionecorretamente é necessário, acrescentar opacote.

using System.Drawing.Drawing2D;

No cabeçalho do programa.

71

Exemplo prático de Aplicação da Hachura

HatchBrush hashura = new HatchBrush(

HatchStyle.Vertical, //

DarkDownwardDiagonal,DarkDownwardDiagonal,

Color.Red,

Color.FromArgb(255, 128, 255, 255));

e.Graphics.FillEllipse(hashura, 0, 0, 100, 60);72

Aplicação de Imagens como Texturacomo Textura

73

Usando Textura

Podemos preencher uma figura usando umarquivo comuma imagemou desenho.

Para realizar essa técnica usa-se umobjetoda classe Bitmap, encapsulado a classeTextureBrush.

74

TextureBrush.

Exemplo :

Bitmap <ObjBitmap> = new Bitmap(<Caminho>);

Criação do Objeto da Classe TextureBrush

Permite encapsulamento do objeto contendo aimagemque tomará a forma geométrica da figuradesenhada.

75

desenhada.

Exemplo :

Bitmap bitmap = new Bitmap("Textura.jpg");

TextureBrush tBrush = new TextureBrush(bitmap);

Exemplo :

Bitmap bitmap = new Bitmap("Textura.jpg");

TextureBrush tBrush = new TextureBrush(bitmap);

e.Graphics.FillEllipse(tBrush, 100, 20, 200, 100);

76

Desenhando Graficamente um texto

WwySsig} Subida} Descida} Altura

77

WwySsig } Descida

Linha de base

}

Tamanho da fonte

Criação de textos

DrawString(): Permite desenhas umtextonas coordenadas especificadas.

Sintaxe:DrawString(<Texto>,<oFont>,<oCor>,x,y);

78

DrawString(<Texto>,<oFont>,<oCor>,x,y);

<Texto>: String a ser impressa.

<oFont>: Objeto comformato da fonte do texto.

<oCor>: Objeto coma cor das letras.

x e y: Coordenadas de coluna e linha referentes aposição do texto.

Font(): determina o tipo de fonte para as letras gráficas.

Sintaxe:

Font oFont = new Font(<ExpS>,<ExpN>,<oStyle>);

<ExpS>: Tipo da fonte a ser atribuída a um objeto.

<ExpN>: Tamanho da fonte a ser atribuída.

<oStyle>: Estilo da fonte.

79

Tabela de estilo de fonte (FontStyle)

Estilo Descrição

Bold Negrito

Italic Itálico

80

Italic Itálico

Regular Formato tradicional

StrikeOut Atachado

Underline Sublinhado

Exemplo DrawString, Font

String str = "Bom Dia";

Font font = new Font("Arial", 16, FontStyle.Bold );

SolidBrush corletra = new SolidBrush(Color.Black);

float x = 150.0F;

float y = 150.0F;

e.Graphics.DrawString(str, font, corletra, x,y);

81

Transformações Geométricas – 2D

Chamamos de transformaçãoo atode levar umobjeto de umponto paraoutro, numsistemade referências. Astransformaçõesmaisusadassão:

82

transformaçõesmaisusadassão:

• Translação• Rotação • Escala.

Translação Chamamos de translação o ato de levar um

objeto de umponto para outro, numsistema dereferência. Dado umponto original (x,y) ; existe umponto (x’,y’) translação, que corresponde ao pontooriginal dado por:

(tx, ty) – É chamado de

vetor de translaçãoou vetor

83

x’=x+t x

y’=y+t y

vetor de translaçãoou vetorde deslocamentotx quantospixels a figura estádeslocada na horizontal ety

quantos pixels a figura estadeslocada na vertical.

Aplicação de uma translação

y0+ty

y1+ty

84

x0 x1

y1+ty

y1’

y0’

Translação

Conceito de desenho do retângulo

Pen Pen = new Pen(cor, 0);

e.Graphics.DrawRectangle(Pen, x1,y1,x2,y2);

<x1> - Coluna da janela.

<x2> - linha da janela.

<x2> - Largura da figura.

<y2> - Altura da figura.

85

Implementação de uma translação

int x0 = 10; int y0 = 10;

int x1 = 100; int y1 =50;

86

ty = 70;

Retangulo(x0,y0,x1,y1 );

Retangulo(x0,y0+ty,x1,y1+ty );

Vetor de translação horizontal

Problema Proposto

Implementar uma função para desenhar umretângulo e emseguida usando conceito deprimitiva implementar uma função paraprimitiva implementar uma função paradesenhar umquadrado.

87

Rotação

Dá-se o nome de rotação ao ato de girar umobjeto de umângulo, numsistema de referência.

−= θθ sencos' yxx

88

−=−=

θθθθ

cossen'

sencos'

yxy

yxx

Exemplo de Aplicação de Rotação em torno de um eixo.

(100,200)

x’=xc + r * cos(180+teta)

y’=yc + r * sen(180+teta)

Para ajuste no primeiroquadrante os valoresdevem ser negativos.

89

Origem (xc,yc)

(100,200)

teta = 90 graus

r(x’,y’)

Implementação em C# de Rotação em torno de um eixo de referência

Font font = new Font("Arial", 16, FontStyle.Bold);

SolidBrush corletra = new SolidBrush(Color.Black);

float x = 150.0F;

float y = 150.0F;

90

int raio = 50;

e.Graphics.DrawString(".", font, corletra, x, y);

int x1 = (int)(100 + raio * Math.Sin(180 * 3.14 / 180));

int y1 = (int)(200 + raio * Math.Cos(180 * 3.14 / 180));

SolidBrush corletra1 = new SolidBrush(Color.Red);

e.Graphics.DrawString(".", font, corletra1, x1, y1);

Escala

Quando se aplica uma transformação deescala a umobjeto, o resultado é umnovoobjeto semelhante ao original, mas“esticado” ou “encolhido”. Pode-se aplicar

91

“esticado” ou “encolhido”. Pode-se aplicarescala comvalores diferentes para cadadimensão; por exemplo, dobrar umobjetona direção horizontal e dividir na vertical.

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 :

{

92

Equação : x’= xsx

y’= ysy{

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;

Color cor = new Color();Color cor = new Color();

cor = Color.FromArgb(0, 0, 255);

retangulo(e,x0,y0,x1,y1,cor);

MessageBox.Show("ok");

retangulo(e,x0,y0,x1*sx,y1*sy,cor);

93

Aplicando Escala

y0

y1 * Sy

94

x0 x1 * Sx

y’

x’

Introdução : Processando Imagens Bitmap

• Processamento de imagemé qualquerforma deprocessamento de dadosno qual aentrada e saída são imagens tais como

95

entrada e saída são imagens tais comofotografias ou quadros de vídeo.

Formação da Imagem

96

97

98

99

Processamento computacional envolvendo imagens

Processar Imagem

100

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.

Computação Gráfica (CG)

Processamento

em CG

Cone de raio 1

altura 1, pós observador, pós

iluminação, fundo,

101

em CGiluminação, fundo, etc.

Estuda os métodos de se criar imagens sintéticas a partir de especificações.

Tipo Bitmap

• Device Independent Bitmap (DIB) ouWindows Bitmap (BMP) é umformato degráficos por mapa de bits (compostopor

102

gráficos por mapa de bits (compostoporpixeis) usado pelos gráficos de subsistema(GDI) do Microsoft Windows, e é usadageralmente como umformato de gráficosnessa plataforma.

GDI - Graphics Device Interface

Importante:

• Um arquivo do tipo BMPé mais seguroparasermanipuladopor nãoter compressão

103

parasermanipuladopor nãoter compressãode informações emseu formato causando aperda de qualidade na imagemou figura.

Abrindo um arquivo de imagem.

• Primeiro o objeto da classe Image deve ser instanciado.

104

pictureBox1.Load(“Imagem.bmp”);

Fazendo leitura da Imagem

• Uma das técnica mais simples para realizar aleitura de uma imagemé chamada de varredurahorizontal. Onde pega-se o tamanho da áreaocupadapela imagem e realiza-se a leitura dos

105

ocupadapela imagem e realiza-se a leitura dospixels até o final de cada linha fazendo isso até ofinal da imagem.

Exemplo : Varredura Horizontal

Largura (width)

βα

≤+≤+

1

1

y

x)(

)(arg

linhasAltura

colunasuraL

==

βα

106

Altura

(height)

(Xn+1,Yn+1)

Capturando o tamanho da imagemWidth e Height

// Cria um ponteiro do tipo Imagem.// Aponta para o endereço da imagemBitmap img = new Bitmap("C: \\trabalhos\\vermelho.jpg");

107

Bitmap img = new Bitmap("C: \\trabalhos\\vermelho.jpg");// Captura o tamanho da imagemint largura = img.Width;int altura = img.Height;

Método Descrição

GetPixel(i, j).R Retorna intensidade de cor vermelha.

GetPixel(i, j).G Retorna intensidade de cor verde.

GetPixel(i, j).B Retorna intensidade de cor azul.

108

Exemplo :

byte r,g,b;r = img.GetPixel(i,j).R;g = img.GetPixel(i,j).G;b = img.GetPixel(i,j).B;

Criando a varredura por arranjos simples.

).( βα=S

S, área retangular da imagem.

A, são arranjos simples de S elementos tomados 2 a 2.(par ordenado)

},{ 1+= nnn yxZSeja: Z

109

imagem.

S

x

y

Exemplo : (Troca a imagem de cor)Bitmap img = new Bitmap("C:\\trabalhos\\aulas\\ICGNOVO-2018\\im1.jpg");

int coluna = img.Width;

int linha = img.Height;

Bitmap imgnova = new Bitmap(coluna, linha);

Color cor = new Color();

for (int i = 0; i <= coluna-1; i++)

{

for (int j = 0; j <= linha-1; j++)

{

int r = img.GetPixel(i, j).R;int r = img.GetPixel(i, j).R;

int g = img.GetPixel(i, j).G;

int b = img.GetPixel(i, j).B;

if (r == 255 && g == 0 && b == 0)

cor = Color.FromArgb(255, 0, 255, 0);

else

cor = Color.FromArgb(255, r, g, b);

imgnova.SetPixel(i, j, cor);

}

}

imgnova.Save("C:\\trabalhos\\aulas\\ICGNOVO-2018\\novaImagem.jpg"); 110