Introdu˘c~ao a Computa˘c~ao Gr a ca [5COP100] · 2015-04-07 · Qual o modelo que descreve um...

Introducao a Computacao Grafica [5COP100]

Dr. Sylvio Barbon Junior

Departamento de Computacao - UEL

1o Semestre de 2015

Assunto

Aula 2Princıpios basicos de imagens de duas

dimensoes

2 de 27

Aula 2 - Princıpios basicos de imagens de duas dimensoes

Sumario

• Raster e Vector graphics;

• Programas em Java 2D;• Geometria de Objetos:◦ Basica;◦ Java 2D;

• Transformacoes Geometricas em Java 2D;

• Coordenadas Homogeneas;

• Aplicacoes de Transformacoes;

• Animacao e movimento baseado em Transformacao;

• Movimento em Java 2D;

• Interpolacao para mudancas contınuas;

• Interpolacao em Java 2D.3 de 27


Raster vs Vector Graphics

Figura: Imagem original, vetorizada e raster [Klawonn, 2012]

4 de 27


Vector vs Raster Graphics

• Qual o modelo que descreve um objeto antes de sua renderizacao?

• Vector, Vetorizada ou vector-oriented:◦ Modelada pela combinacao de linhas, retangulos, cırculos, elipses e

arcos;◦ A relacao entre as formas e expressa via equacoes matematicas;◦ Possibilita a mudanca de escala sem perda de qualidade;◦ Ideal para logotipos, posteres etc.◦ Adobe Illustrator, Corel Draw e Inkscape.◦ Formatos: AI, CDR, CGM, SVG, VML entre outros

5 de 27



Figura: Imagem vector [des, 2015]

6 de 27



• Raster ou pixel-oriented:◦ Formada por uma matriz de pixels, cada ponto tem um valor de cor

associado;◦ E dependente de resolucao;◦ Todas as formas sao convertidas em pixels;◦ Photoshop, Gimp, MS Paint◦ GIF, BMP, TIFF, JPEG, XCF, JPEG e outros varios.

7 de 27



Figura: Imagem raster [des, 2015]

8 de 27



• scan conversion: conversao de vector-oriented para imagem raster

• aliasing effect: ocorre na forma de bordas serrilhadas chamadasde jaggies ou staircasing. Uso de tecnicas anti-aliasing paracorrecao.

9 de 27



Figura: Correcao anti-aliasing [ali, 2015]

10 de 27



Figura: Imagem Vector e diferentes resolucoes de raster [Klawonn, 2012]

11 de 27


Programas em Java 2D

• Java 2D e uma API pertencente ao kernel a partir do Java 2;• Apresenta algumas extensoes do pacote AWT (Abstract

Windowing Toolkit) e Swing;

Figura: API Java 2D [Klawonn, 2012]12 de 27

Listing 1: Primeiro Exemplo Java 2D [Klawonn, 2012]

import j a v a . awt . ∗ ;p u b l i c c l a s s SimpleJava2DExample extends Frame

{SimpleJava2DExample ( ){

addWindowListener ( new MyFinishWindow ( ) ) ;}

p u b l i c v o i d p a i n t ( G r a p h i c s g ){

Graphics2D g2d = ( Graphics2D ) g ;g2d . d r a w S t r i n g ( ” H e l l o w o r l d ! ” , 3 0 , 5 0 ) ;

}

p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g v ){

SimpleJava2DExample f = new SimpleJava2DExample ( ) ;f . s e t T i t l e ( ”The f i r s t Java 2D program ” ) ;f . s e t S i z e ( 3 5 0 , 8 0 ) ;f . s e t V i s i b l e ( t r u e ) ;

}}13 de 27


Objetos Geometricos Basicos

• Pontos: sao definidos pelas coordenadas x e y.

• Linhas, polylines ou curvas: sao definidas por um ou mais pontos

• areas ou poligonos: podem ser preenchidas por cores ou texturas;

• curvas: sao definidas como polinomios parametricos

Figura: Curva quadratica e cubica [Klawonn, 2012]

13 de 27


Objetos Geometricos Basicos

• E possıvel criar polıgonos complexos com a combinacao de outrasareas mais simples usando operacoes como uniao (union),interseccao (intersection), diferenca (difference) e diferencasimetrica (symmetric difference).

Figura: Images das operacoes de Uniao, Interseccao, Diferenca e Deferencasimetrica entre um cırculo e um retangulo. [Klawonn, 2012]

14 de 27


Objetos Geometricos Basicos em Java 2D

• Classe abstrata Shape

Figura: Exemplo de formas do Java 2D API. [Klawonn, 2012]

15 de 27

Listing 2: Exemplos Java 2D [Klawonn, 2012]

Line2D . Double l i n e = new Line2D . Double ( x1 , y1 ,x2 , y2 ) ;

QuadCurve2D . Double qc = new QuadCurve2D . Double ( x1 , y1 ,c t r l x , c t r l y , x2 , y2 ) ;

CubicCurve2D . Double cc = new CubicCurve2D . Double ( x1 , y1 ,c t r l x 1 , c t r l y 1 , c t r l x 2 , c t r l y 2 , x2 , y2 ) ;

16 de 27


Objetos Geometricos Basicos em Java 2D

Figura: Exemplo General Path. [Klawonn, 2012]

16 de 27

Listing 3: Exemplos General Path [Klawonn, 2012]

G e n e r a l P a t h gp = new G e n e r a l P a t h ( ) ;

gp . moveTo ( 6 0 , 1 2 0 ) ;gp . l i n e T o ( 8 0 , 1 2 0 ) ; // f r o n t underbodygp . quadTo ( 9 0 , 1 4 0 , 1 0 0 , 1 2 0 ) ; // f r o n t whee lgp . l i n e T o ( 1 6 0 , 1 2 0 ) ; //midd le underbodygp . quadTo ( 1 7 0 , 1 4 0 , 1 8 0 , 1 2 0 ) ; // r e a r whee lgp . l i n e T o ( 2 0 0 , 1 2 0 ) ; // r e a r underbodygp . curveTo ( 1 9 5 , 1 0 0 , 2 0 0 , 8 0 , 1 6 0 , 8 0 ) ; // r e a rgp . l i n e T o ( 1 1 0 , 8 0 ) ; // r o o fgp . l i n e T o ( 9 0 , 1 0 0 ) ; // w ind s c r e engp . l i n e T o ( 6 0 , 1 0 0 ) ; // bonnetgp . l i n e T o ( 6 0 , 1 2 0 ) ; // f r o n t

17 de 27


Exercıcios

1. Desenhe um retangulo com as pontas arredondadas.2. Implemente um codigo para desenhar um “peixe”como da imagem

abaixo. Utilize as operacoes entre poligonos.

17 de 27


Transformacoes Geometricas

• Sao operacoes que podem ser utilizadas visando a alteracao dealgumas caracterısticas como: posicao, orientacao, forma etamanho.

• As transformacoes sao representaveis por equacoes;

• Um modelo simples e a representacao das manipulacoes por meiode matrizes (usado amplamente);

• As principais transformacoes sao:◦ Translacao (translation);◦ Escala (scale);◦ Rotacao (rotation);◦ Cisalhamento (shear);

18 de 27


Transformacoes Geometricas - Ponto e Produto

• Um ponto pode ser escrito como:

ponto = P(x , y) =(x, y)T ∈ R2

• O produto de dois vetores u e v pode descrever as trasnformacoes,seguindo a seguinte estrutura:

uT × v = (u1, ..., un)×

v1

...v2

=n∑

i=1ui × vi

19 de 27


Transformacoes Geometricas - Translacao

• A operacao de translacao pode ser descrita como:

P′

= P + T =

[xy

]+

[∆x∆y

]=

{x′

= x + ∆x

y′

= y + ∆y

• Exemplo com T = (140, 80)T

20 de 27


Transformacoes Geometricas - Escala

• A operacao de escala pode ser descrita como:

P′

= P ·T =

[xy

]·[sx 00 sy

]=

{x′

= x · sx

y′

= y · sy

• Exemplo com sx = 2 e sy = 0.5:

21 de 27


Transformacoes Geometricas - Rotacao

• A operacao de rotacao pode ser descrita como:

P′

= P ·T =

[xy

]·[

cos(θ) −sen(θ)sen(θ) cos(θ)

]=

{x′

= x·cos(θ)-y·sen(θ)

y′

= x·sen(θ)+y·cos(θ)

• Exemplo com θ =45o :

22 de 27


Transformacoes Geometricas - Cisalhamento

• A operacao de cisalhamento pode ser descrita como:

P′

= P ·T =

[xy

]·[

1 sxsy 1

]=

{x′

= x + sx ·yy′

= y + sy ·x

• Exemplo com com sx = 1 e sy = 0:

23 de 27


Coordenadas Homogeneas

• Para que as operacoes sejam combinadas facilmente, podemostrata-las como coordenadas homogeneas. Isso pode ser feitoadicionando uma terceira coordenada ao ponto. Assim, um ponto(x , y) e representado como (x , y ,W ).

• (2,3,6) e (4, 6, 12) e o mesmo ponto representado por diferentestriplas.

• Se W e a coordenada nao 0, podemos dividir (x , y ,W ) por ela,obtendo ( a

W , bW , 1).

24 de 27


Coordenadas Homogeneas

25 de 27


Exercıcio com Transformacoes

1. Implemente um aplicativo com Java 2D para movimentar o”peixe”do exercıcio 2 da primeira atividade. Lembrando que o”peixe”somente caminha em uma direcao, assim voce deveimplementar somente a translacao em uma direcao e utilizar arotacao para modificar a orientacao do objeto. Utilize o tecladopara realizar os movimentos, para tal utilize uma inner class queestenda KeyAdapter e nao esqueca de adicionar um KeyListener(addKeyListener) na classe Frame.

26 de 27


Referencias

(2015).

Aliasing.http://domopomo.weebly.com/.acessado em 23/03/2015.

(2015).

Vector e raster.http://99designs.com/.acessado em 23/03/2015.

Klawonn, F. (2012).

Introduction to computer graphics: using Java 2D and 3D.Springer Science & Business Media.

27 de 27

http://domopomo.weebly.com/

http://99designs.com/

Introdu˘c~ao a Computa˘c~ao Gr a ca [5COP100] · 2015-04-07 · Qual o modelo que descreve um...

Documents

Transcript of Introdu˘c~ao a Computa˘c~ao Gr a ca [5COP100] · 2015-04-07 · Qual o modelo que descreve um...