Introdução a Computação Gráfica [5COP100] Dr. Sylvio Barbon Junior Departamento de Computação - UEL 1 o Semestre de 2015
Assunto Aula 2 Princípios básicos de imagens de duas dimensões 2 of 18
Sumário Raster e Vector graphics; Programas em Java 2D; Geometria de Objetos: Básica; Java 2D; Coordenadas Homogêneas; Aplicações de Transformações; Transformações Geométricas em Java 2D; Animação e movimento baseado em Transformação; Movimento em Java 2D; Interpolação para mudanças contínuas; Interpolação 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 renderização? Vector, Vetorizada ou vector-oriented: Modelada pela combinação de linhas, retângulos, círculos, elipses e arcos; A relação entre as formas é expressa via equações matemáticas; Possibilita a mudança 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
Raster vs Vector Graphics Figura: Imagem vector [des, 2015] 6 of 18
Vector vs Raster Graphics Raster ou pixel-oriented: Formada por uma matriz de pixels, cada ponto tem um valor de cor associado; É dependente de resolução; Todas as formas são convertidas em pixels; Photoshop, Gimp, MS Paint GIF, BMP, TIFF, JPEG, XCF, JPEG e outros vários. 7 of 18
Raster vs Vector Graphics Figura: Imagem raster [des, 2015] 8 of 18
Vector vs Raster Graphics scan conversion: conversão de vector-oriented para imagem raster aliasing effect: ocorre na forma de bordas serrilhadas chamadas de jaggies ou staircasing. Uso de técnicas anti-aliasing para correção. 9 of 18
Raster vs Vector Graphics Figura: Correção anti-aliasing [ali, 2015] 10 of 18
Raster vs Vector Graphics Figura: Imagem Vector e diferentes resoluções de raster [Klawonn, 2012] 11 of 18
Programas em Java 2D Java 2D é uma API pertencente ao kernel a partir do Java 2; Apresenta algumas extensões do pacote AWT (Abstract Windowing Toolkit) e Swing; 12 of 18 Figura: API Java 2D [Klawonn, 2012]
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 Geométricos Básicos Pontos: são definidos pelas coordenadas x e y. Linhas, polylines ou curvas: são definidas por um ou mais pontos áreas ou poligonos: podem ser preenchidas por cores ou texturas; curvas: são definidas como polinômios paramétricos Figura: Curva quadrática e cúbica [Klawonn, 2012] 13 of 18
Objetos Geométricos Básicos É possível criar poĺıgonos complexos com a combinação de outras áreas mais simples usando operações como união (union), intersecção (intersection), diferença (difference) e diferença simétrica (symmetric difference). Figura: Images das operações de União, Intersecção, Diferença e Deferença simétrica entre um círculo e um retângulo. [Klawonn, 2012] 14 of 18
Objetos Geométricos Básicos 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 Geométricos Básicos em Java 2D 16 of 18 Figura: Exemplo General Path. [Klawonn, 2012]
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 underbody gp. quadto ( 9 0, 1 4 0, 1 0 0, 1 2 0 ) ; // f r o n t wheel gp. l i n e T o ( 1 6 0, 1 2 0 ) ; // m i d d l e underbody gp. quadto ( 1 7 0, 1 4 0, 1 8 0, 1 2 0 ) ; // r e a r wheel gp. l i n e T o ( 2 0 0, 1 2 0 ) ; // r e a r underbody gp. curveto ( 1 9 5, 1 0 0, 2 0 0, 8 0, 1 6 0, 8 0 ) ; // r e a r gp. l i n e T o ( 1 1 0, 8 0 ) ; // r o o f gp. l i n e T o ( 9 0, 1 0 0 ) ; // w i n d s c r e e n gp. l i n e T o ( 6 0, 1 0 0 ) ; // bonnet gp. l i n e T o ( 6 0, 1 2 0 ) ; // f r o n t 17 of 18
Exercícios 1. Desenhe um retângulo com as pontas arredondadas. 2. Implemente um código para desenhar um peixe como da imagem abaixo. Utilize as operações entre poligonos. 17 of 18
Referências (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