introdu˘c~ao a computa˘c~ao gr a ca [5cop100] · scan conversion: convers~ao de vector-oriented...

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 of 18

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;

• Coordenadas Homogeneas;

• Aplicacoes de Transformacoes;

• Transformacoes Geometricas em Java 2D;

• Animacao e movimento baseado em Transformacao;

• Movimento em Java 2D;

• Interpolacao para mudancas contınuas;

• Interpolacao em Java 2D.3 of 18


Raster vs Vector Graphics

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

4 of 18


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 of 18



Figura: Imagem vector [des, 2015]

6 of 18



• 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 of 18



Figura: Imagem raster [des, 2015]

8 of 18



• 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 of 18



Figura: Correcao anti-aliasing [ali, 2015]

10 of 18



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

11 of 18


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 of 18

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 of 18


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 of 18


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 of 18


Objetos Geometricos Basicos em Java 2D

• Classe abstrata Shape

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

15 of 18

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 of 18


Objetos Geometricos Basicos em Java 2D

Figura: Exemplo General Path. [Klawonn, 2012]

16 of 18

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 of 18


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 of 18


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.

18 of 18

http://domopomo.weebly.com/

http://99designs.com/

introdu˘c~ao a computa˘c~ao gr a ca [5cop100] · scan conversion: convers~ao de vector-oriented...

Documents