Universidade do Vale do Paraba Colgio Tcnico Antnio

  • Slides: 107
Download presentation
Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação

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 2 D, 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: //www 1. univap. br/~wagner Prof. Responsável Wagner Santos C. de Jesus 1

Computação Gráfica (CG) • Vem a ser a forma de se fazer uma representação

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

Algumas áreas de atuação da computação gráfica • • • Engenharia – Simulação e

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

Simulação de crescimento tumoral Criação de texturas de pelos de animais Simulador de Gestação

Simulação de crescimento tumoral Criação de texturas de pelos de animais Simulador de Gestação Criação de realidade virtual simulação de deslocamento humano. Imagem do leito de um rio em relevo 4

Criação de modelagem orgânica digital Sistema de informações geográficas Simulador Neuro Cena de Praça

Criação de modelagem orgânica digital Sistema de informações geográficas Simulador Neuro Cena de Praça pública (CCRV) Cirúrgico Auto-CAD – Arquitetura e Edificações (Auto. Desk) 5

Vista Lateral (Praça Publica CCRV) 6

Vista Lateral (Praça Publica CCRV) 6

Entretenimento (Jogos em 2 D) Tiro ao Alvo Corrida Estatística e Cinema Gráfico (Estatística)

Entretenimento (Jogos em 2 D) Tiro ao Alvo Corrida Estatística e Cinema Gráfico (Estatística) Cinema cena do filme (toy. Stoy 1995) -Estúdio: Walt Disney Pictures / Pixar Animation 7 Studios

Desenho confeccionado em Auto. Cad 2 D usando conceitos de primitivas básicas. 8

Desenho confeccionado em Auto. Cad 2 D usando conceitos de primitivas básicas. 8

Filme Shrek 2004 - Produtora(s): Dream. Works SKG, Pacific Data Images (PDI) Projeto trem

Filme Shrek 2004 - Produtora(s): Dream. Works SKG, Pacific Data Images (PDI) Projeto trem de pouso aeronave Simulação de Funcionamento de Máquinas usando modelo Virtual Auto. Desk. 9

Cena confeccionada pelos alunos André e Rafael – 2008 Software - CCRV 10

Cena confeccionada pelos alunos André e Rafael – 2008 Software - CCRV 10

Cena vista de outro ângulo Software - CCRV 11

Cena vista de outro ângulo Software - CCRV 11

Caça F 16 2009 12

Caça F 16 2009 12

Caça F 16 2009 (Francisco) 13

Caça F 16 2009 (Francisco) 13

Introdução aos métodos de Computação Gráfica em modo 2 D. 14

Introdução aos métodos de Computação Gráfica em modo 2 D. 14

Primitivas Gráficas – 2 D Chamamos de primitivas gráficas os comandos e funções que

Primitivas Gráficas – 2 D 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). 15

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

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 16

Representação de pixel (coordenada - y) • (x, y) preto (coordenada - x) Para

Representação de pixel (coordenada - y) • (x, y) preto (coordenada - x) 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. 17

Eixo de coordenadas (800 x 600) ou (1024 x 768) y- Linhas - 0

Eixo de coordenadas (800 x 600) ou (1024 x 768) y- Linhas - 0 0 – Colunas - x 18

Sinal de vídeo Analógico Linha impar Linha par 19

Sinal de vídeo Analógico Linha impar Linha par 19

Exibição do vídeo O video é exibido lendo-se eletronicamente o sinal de vídeo e

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

Vídeo Digital 21

Vídeo Digital 21

Pintando um pixel na prática usando C++ Builder Para se tratar elementos gráficos podemos

Pintando um pixel na prática usando C++ Builder Para se tratar elementos gráficos podemos usar um objeto denominado Canvas que possibilita usar primitivas gráficas. OBJETO Canvas Ponto Linha Retângulo Elipse Arcos 22

Criando um ponto Para se desenhar um ponto usa-se a propriedade Pixels do objeto

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); Ondexcoordenadadacoluna; ey coordenada da linha a função RGB determina a cor do pixel que será plotado na tela. 23

Tons monocromáticos 0 127 255 0 255 Faixa de tons de cinza => C,

Tons monocromáticos 0 127 255 0 255 Faixa de tons de cinza => C, portanto 0 <= C <= 255 24

Intensidade – Imagens Monocromáticas 25

Intensidade – Imagens Monocromáticas 25

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

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

Exemplo da criação de um ponto no vídeo - algoritmo Pintap(real : x, y,

Exemplo da criação de um ponto no vídeo - algoritmo Pintap(real : x, y, cor) inicio pixels[x][y] <- cor; fim 27

Linhas Retas • Para se desenhar uma reta é necessário usar primitivas gráficas, onde

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

Conceito Matemático de reta Onde (m) Coeficiente ângular em relação ao eixo x. se

Conceito Matemático de reta Onde (m) Coeficiente ângular em relação ao eixo x. se ngulo entre 0º e 45º com eixo x, o Coeficiente linear b dá o valor do eixo y. se ngulo entre 45º e 90º com eixo x. Dados dois pontos no plano P 1 e P 2, pode-se obter m e b da seguinte maneira. (1) (2) 29

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

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

DDA – Digital Diferencial Analyser (Analisador Diferencial Digital) Trata-se de um algoritmo que respeita

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

Algoritmo DDA (codificado) reta. DDA( real : x 0, y 0, x 1, y

Algoritmo DDA (codificado) reta. DDA( real : x 0, y 0, x 1, y 1) Inicio dx <- x 1 - x 0 dy <- y 1 - y 0 Exemplos x <- x 0 y <- y 0 (100, 100) s <- 0 se (dx > dy) entao s <- dx (100, 200) 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 + yi Pintap( x, y, cor) fim_para fim valores (x 0, y 0)-(x 1, y 1) (500, 100) (300, 600) 32

Breseham Esse algoritmo baseia-se no argumento de que um segmento de reta, ao ser

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

Algoritmo de Breseham 1. 2. 3. 4. 5. 6. 7. 8. Calcula-se Calculam-se variáveis

Algoritmo de Breseham 1. 2. 3. 4. 5. 6. 7. 8. Calcula-se Calculam-se variáveis auxiliares: Coloca-se nas variáveis o ponto inicial: x = e y = Plota-se o ponto (x, y) Calcula-se os parâmetros de decisão: Se p for negativo então x = x + 1, passa-se para passo 8. Se p for positivo ou zero, então x = x + 1, y = y + 1, Repetem-se os passos 6 a 7 até que o ponto seja alcançado 34

C++ Builder, Breseham Em linguagens modernas esse algoritmo já se encontra implementado e melhorado.

C++ Builder, Breseham Em linguagens modernas esse algoritmo já se encontra implementado e melhorado. Não havendo necessidade de uma nova implementação. 35

Algoritmo reta. Breseham (inteiro: x 0, y 0, x 1, y 1) Inicio Mover.

Algoritmo reta. Breseham (inteiro: x 0, y 0, x 1, y 1) Inicio Mover. Ate(x 0, y 0) Pintar. Ate(x 1, x 1) fim 36

Métodos para segmentos de retas Move. To() : Determina o ponto inicial para um

Métodos para segmentos de retas Move. To() : Determina o ponto inicial para um segmento de reta. Exemplo : Canvas->Move. To(x 0, y 0); 37

Método: Line. To(): Determina o ponto final para o segmento de reta. Exemplo :

Método: Line. To(): Determina o ponto final para o segmento de reta. Exemplo : Canvas->Line. To(x 1, y 1); 38

Exemplo Prático Canvas->Move. To(100, 100); Canvas->Line. To(100, 200); (100, 100) (100, 200) 39

Exemplo Prático Canvas->Move. To(100, 100); Canvas->Line. To(100, 200); (100, 100) (100, 200) 39

Espessura de uma linha Propriedade : Pen Permite ativar a caneta gráfica; em conjunto

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 40

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

Cor da linha (Color) Propriedade : Color determina a cor da linha usando padrão RGB(). Exemplo : Canvas->Pen->Color = RGB(255, 0, 0); 41

Tipos de linhas Para usar os tipos de linhas usando objeto Canvas implementado em

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 = ; 42

Estilos da Linha Tipo Linha PS_SOLID PS_DASH PS_DOT PS_DASHDOTDOT PS_NULL 43

Estilos da Linha Tipo Linha PS_SOLID PS_DASH PS_DOT PS_DASHDOTDOT PS_NULL 43

Criando um retângulo Método Rectangle() : Cria um retângulo com a indicação de dois

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); 44

Círculos e Elipses 45

Círculos e Elipses 45

Círculos Traçado de um círculos: Um circulo vem a ser um conjunto de pontos

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. Obtemos a seguinte definição. io a R Centro Essa definição não tem como ser usada em computação gráfica. 46

Definição válida para a computação gráfica. y =f(x) ou x = g(y), Isolando-se as

Definição válida para a computação gráfica. y =f(x) ou x = g(y), Isolando-se as variáveis teremos 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. 47

Para podermos criar um algoritmo que desenhe o seguimento circular devemos converte as expressões

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. Funções trigonométricas: É um ângulo que varia entre 48

Precisão dependente do raio do círculo 3 2 4 1 5 8 6 7

Precisão dependente do raio do círculo 3 2 4 1 5 8 6 7 Octante 1 2 3 4 5 6 7 8 Xn x y y -x -x -y -y x Yn y x -x y -y -x x -y 49

Algoritmo do segmento de arcos e círculos usando funções trigonométricas sentido horário. d. Arc(Inteiro:

Algoritmo do segmento de arcos e círculos usando funções trigonométricas sentido horário. d. Arc(Inteiro: Xc, Yc, raio, Ti, Tf, cor) Inicio mover. Ate(Xc, Yc) para teta de Ti ate Tf faca x <- Xc + raio * cos(teta) y <- Yc + raio * sin(teta) Pintap(x, y, cor) fim_para fim Para forma um circulo 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. deverá estar entre 0 e 2 50

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

Observação As 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. 51

O algoritmo apresentado anteriormente conhecido como funções polares; irá apresentar falha de precisão quando

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++. 52

Implementando arcos precisos Método : Arc() - Desenha círculos e arcos. Sintaxe : Arc(Esq,

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); 53

Elipses Traçado de uma Elipse: Uma elipse é definida como um conjunto de pontos

Elipses Traç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 é: Onde São as posições dos focos, São as do ponto P distância até os focos. Essa definição não tem como ser usada em computação gráfica. p=(x, y) 54

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

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

Quadrante de simetria numa elipse 2 1 3 4 Quadrante 1 Xn x Yn

Quadrante de simetria numa elipse 2 1 3 4 Quadrante 1 Xn x Yn y 2 -x y 3 -x -y 4 x -y 56

Algoritmo do segmento de arcos para confecção da elipse usando funções trigonométricas sentido horário.

Algoritmo do segmento de arcos para confecção da elipse usando funções trigonométricas sentido horário. d. Elipse(Inteiro: Xc, Yc, Rx, Ry, Ti, Tf, cor) Inicio mover. Ate(Xc, Yc) para teta de Ti ate Tf faca x <- Xc + Ry * cos(teta) y <- Yc + Rx * sin(teta) Pintap(x, y, cor) fim_para fim Para forma um circulo 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. deverá estar entre 0 e 2 57

O algoritmo apresentado anteriormente conhecido como funções polares; irá apresentar falha de precisão quando

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++. 58

Ponto Médio para Elipse Método : Ellipse() desenha uma elipse nas coordenadas especificadas. Exemplo

Ponto Médio para Elipse Método : Ellipse() desenha uma elipse nas coordenadas especificadas. Exemplo : Canvas->Ellipse(Xc, Yc, Rx, Ry); 59

Preenchimento de áreas Ao se desenhar um objeto além de seu contorno o mesmo

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

Propriedade Brush, Color Permite realizar o preenchimento em um determinado objeto retângulo, círculo etc.

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, 100, 50 ); 61

Preenchimento Hachura Style : Propriedade que permite realizar um estilo de preenchimento em uma

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 = bs. Diag. Cross; Canvas->Rectangle(100, 200, 200 ); 62

Tabela da propriedade : Style Obs: São preenchimentos válidos apenas para o objeto Canvas.

Tabela da propriedade : Style Obs: São preenchimentos válidos apenas para o objeto Canvas. 63

Usando Textura Podemos preencher uma figura usando um arquivo com uma imagem ou desenho.

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 *Obj. Bmp = new Graphics: : TBitmap; 64

Usando o método Load. From. File() Esse método irá carregar uma imagem ao fundo

Usando o método Load. From. File() Esse método irá carregar uma imagem ao fundo da figura. Exemplo : Obj. Bmp->Load. From. File("/Textura. bmp"); 65

Propriedade Brush, Bitmap Envolve toda uma imagem na área de uma figura. Exemplo :

Propriedade Brush, Bitmap Envolve toda uma imagem na área de uma figura. Exemplo : Canvas->Brush->Bitmap = Obj. Bmp; 66

Exemplo : Graphics: : TBitmap *Brush. Bmp = new Graphics: : TBitmap; try {

Exemplo : Graphics: : TBitmap *Brush. Bmp = new Graphics: : TBitmap; try { Brush. Bmp->Load. From. File(“Textura. bmp"); Canvas->Brush->Bitmap = Brush. Bmp; Canvas->Ellipse(10, 200, 300, 400); } __finally { Canvas->Brush->Bitmap = NULL; delete Brush. Bmp; } 67

Associando figuras a imagens Exemplo : TCanvas *p. Canvas = Image 1 ->Canvas; p.

Associando figuras a imagens Exemplo : TCanvas *p. Canvas = Image 1 ->Canvas; p. Canvas->Brush->Style = bs. Vertical; p. Canvas->Brush->Color = RGB(0, 0, 255); p. Canvas->Rectangle(0, 0, Image 1 ->Width, Image 1 ->Height); 68

Desenhando Graficamente um texto Wwy. Ssig }Subida } Descida } Altura Linha de base

Desenhando Graficamente um texto Wwy. Ssig }Subida } Descida } Altura Linha de base Tamanho da fonte 69

Criação de textos Text. Out. A() : Permite desenhas um texto nas coordenadas especificadas.

Criação de textos Text. Out. A() : Permite desenhas um texto nas coordenadas especificadas. Sintaxe : Canvas->Text. Out. A(x, y, String); Exemplo : Canvas->Text. Out. A(100, 200, ”Tchuk”); 70

Modificando atributos do texto Propriedade : Font Propriedades Valores Color RGB() Size Tamanho da

Modificando atributos do texto Propriedade : Font Propriedades Valores Color RGB() Size Tamanho da fonte Name Nome da fonte : (Times New Roman) Style fs. Bold, fs. Italic, fs. Underline, fs. Strike. Out 71

Exemplo prático de texto formatado Canvas->Font->Color = RGB(255, 0, 0); Canvas->Font->Size = 50; Canvas->Font->Name

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 = TFont. Styles() << fs. Bold << fs. Strike. Out << fs. Underline; Canvas->Text. Out. A(100, 200, “Bom Dia !!!"); 72

Transformações Geométricas – 2 D Chamamos de transformação o ato de levar um objeto

Transformações Geométricas – 2 D 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. 73

Translação Chamamos de translação o ato de levar um objeto de um ponto para

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+t y’=y+t (tx, ty) – É chamado de x y 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. 74

Aplicação de uma translação y 0+ty y 1+ty y 0’ y 1’ x 0

Aplicação de uma translação y 0+ty y 1+ty y 0’ y 1’ x 0 x 1 Translação 75

Implementação de uma translação int x 0 = 10; int y 0 = 10;

Implementação de uma translação int x 0 = 10; int y 0 = 10; int x 1 = 100; int y 1 =50; Vetor de translação horizontal ty = 70; Canvas->Rectangle(x 0, y 0, x 1, y 1 ); Canvas->Rectangle(x 0, y 0+ty, x 1, y 1+ty ); 76

Rotação Dá-se o nome de rotação ao ato de girar um objeto de um

Rotação Dá-se o nome de rotação ao ato de girar um objeto de um ângulo, num sistema de referência. 77

Exemplo de Aplicação de Rotação em torno de um eixo. Para ajuste no primeiro

Exemplo de Aplicação de Rotação em torno de um eixo. Para ajuste no primeiro quadrante os valores devem ser negativos. x’=xc + r * cos(180+teta) y’=yc + r * sen(180+teta) { (100, 200) r Origem (xc, yc) (x’, y’) teta = 90 graus 78

Implementação em C++ de Rotação em torno de um eixo de referência Canvas->Font->Size =

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->Text. Out. A(100, 200, ". "); double r = 50; double x 1 = 100 + r * cos((180 * 3. 141592) / 180); double y 1 = 200 + r * sin((180 * 3. 141592) / 180); Canvas->Font->Color = RGB(255, 0, 0); Canvas->Text. Out. A(x 1, y 1, ". "); 79

Escala Quando se aplica uma transformação de escala a um objeto, o resultado é

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

Formalização da Escala Uma escala é determinada pelo vetor de escala (Sx Sy). Onde

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’= xs y’= ys x y 81

Aplicando Escala y 0 y 1 * Sy y’ x 0 x 1 *

Aplicando Escala y 0 y 1 * Sy y’ x 0 x 1 * Sx x’ 82

Implementação de escala em uma figura. int x 0=100; int y 0=200; int x

Implementação de escala em uma figura. int x 0=100; int y 0=200; int x 1=300; int y 1=250; int sx=2; int sy=2; Canvas->Pen->Color = RGB(255, 0, 0); Canvas->Brush->Style = bs. Cross; Canvas->Brush->Color = RGB(0, 0, 255); Canvas->Rectangle(x 0, y 0, x 1, y 1); Show. Message(" "); Canvas->Rectangle(x 0, y 0, x 1*sx, y 1*sy ); 83

Introdução : Processando Imagens Bitmap • Processamento de imagem é qualquer forma de processamento

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

Formação da Imagem 85

Formação da Imagem 85

86

86

87

87

88

88

Processamento computacional envolvendo imagens Processar Imagem Processamento de Imagens – Estuda as transformações de

Processamento computacional envolvendo imagens Processar Imagem 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. 89

Computação Gráfica (CG) Cone de raio 1 altura 1, pós observador, pós iluminação, fundo,

Computação Gráfica (CG) Cone de raio 1 altura 1, pós observador, pós iluminação, fundo, etc. Processamento em CG Estuda os métodos de se criar imagens sintéticas a partir de especificações. 90

Tipo Bitmap • Device Independent Bitmap (DIB) ou Windows Bitmap (BMP) é um formato

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 91

Importante: • Um arquivo do tipo BMP é mais seguro para ser manipulado por

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

Abrindo um arquivo de imagem. • Primeiro o objeto da classe Image deve ser

Abrindo um arquivo de imagem. • Primeiro o objeto da classe Image deve ser instanciado. Image 1 ->Picture->Load. From. File("C: /PImagem/bolas. bmp"); 93

Fazendo leitura da Imagem • Uma das técnica mais simples para realizar a leitura

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

Exemplo : Varredura Horizontal Largura (width) (Xn+1, Yn+1) Altura (height) 95

Exemplo : Varredura Horizontal Largura (width) (Xn+1, Yn+1) Altura (height) 95

Capturando o tamanho da imagem Width e Height // Cria um ponteiro do tipo

Capturando o tamanho da imagem Width e Height // Cria um ponteiro do tipo Imagem. Graphics: : TBitmap *Bmp = new Graphics: : TBitmap; // Exibe imagem na tela Tela->Picture->Load. From. File("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; 96

Identificando a cor do pixel. Criar um objeto da classe TColor. Exemplo : TColor

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

Método Get. RValue(cor) Get. GValue(cor) Get. BValue(cor) Descrição Retorna intensidade de cor vermelha. Retorna

Método Get. RValue(cor) Get. GValue(cor) Get. BValue(cor) Descrição Retorna intensidade de cor vermelha. Retorna intensidade de cor verde. Retorna intensidade de cor azul. Exemplo : byte r, g, b; TColor captura_cor; captura_cor = Bmp->Canvas->Pixels[x][y]; r = Get. RValue(captura_cor); g = Get. GValue(captura_cor); b = Get. BValue(captura_cor); 98

Criando a varredura por arranjos simples. A, são arranjos simples de S elementos tomados

Criando a varredura por arranjos simples. A, são arranjos simples de S elementos tomados 2 a 2. (par ordenado) S, área retangular da imagem. Seja: Z x S y 99

Exemplo : (Troca a imagem de cor) Graphics: : TBitmap *Bmp = new Graphics:

Exemplo : (Troca a imagem de cor) Graphics: : TBitmap *Bmp = new Graphics: : TBitmap; Tela->Picture->Load. From. File("C: /PImagem/taco. bmp"); Image 1 ->Picture->Load. From. File("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 = Get. RValue(captura_cor); g = Get. GValue(captura_cor); b = Get. BValue(captura_cor); if(r == 255 && g == 0 && b ==0) Bmp->Canvas->Pixels[coluna][linha] = RGB(0, 0, 0); } } Bmp->Save. To. File("C: /PImagem/taconovo. bmp"); 100

Capturando cores objeto da classe TColor. Dialog (Dialog) Retorna com os tons nas faixas

Capturando cores objeto da classe TColor. Dialog (Dialog) Retorna com os tons nas faixas RGB correspondente a cor selecionada. 101

Método Execute() Realiza a abertura da caixa de dialogo (Color. Dialog 1), para escolha

Método Execute() Realiza a abertura da caixa de dialogo (Color. Dialog 1), para escolha da cor desejada. boolean logico = Cd->Execute(); 102

Capturando a cor selecionada. TColor cor = Color. Dialog 1 ->Color; Byte r =

Capturando a cor selecionada. TColor cor = Color. Dialog 1 ->Color; Byte r = Get. RValue(cor); Byte g = Get. GValue(cor); Byte b = Get. BValue(cor); Captura as cores escolhidas nas faixas adequadas. 103

TPerformance. Graph (Sample) Cria uma área para representação de gráficos de funções matemáticas periódicas.

TPerformance. Graph (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. 104

Método: Data. Point() Realiza a atribuição de pontos e cor na área do objeto,

Método: Data. Point() Realiza a atribuição de pontos e cor na área do objeto, Performance. Graph permitindo plotar um gráfico com deslocamento no período. Sintaxe : Obj_perf->Data. Point(, ); 105

Update() Realiza a impressão do ponto no gráfico. Sintaxe : Obj_perf->Update(); 106

Update() Realiza a impressão do ponto no gráfico. Sintaxe : Obj_perf->Update(); 106

Exemplo: de gráfico da f(x) = x 2, onde – 10 <= x <=

Exemplo: de gráfico da f(x) = x 2, onde – 10 <= x <= 30 int b = 30; for(int x = -10; x<=b; x++) { int y = pow(x, 2); Pg->Data. Point(RGB(255, 0, 0), abs(y)); Pg->Update(); Pg->Refresh(); } O programa acima irá imprimir uma parábola como mostra a figura, acima. 107