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 de 27
Sumário Raster e Vector graphics; Programas em Java 2D; Geometria de Objetos: Básica; Java 2D; Transformações Geométricas em Java 2D; Coordenadas Homogêneas; Aplicações de Transformações; 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 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 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 de 27
Raster vs Vector Graphics Figura: Imagem vector [des, 2015] 6 de 27
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 de 27
Raster vs Vector Graphics Figura: Imagem raster [des, 2015] 8 de 27
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 de 27
Raster vs Vector Graphics Figura: Correção anti-aliasing [ali, 2015] 10 de 27
Raster vs Vector Graphics Figura: Imagem Vector e diferentes resoluções de raster [Klawonn, 2012] 11 de 27
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 de 27 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 de 27
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 de 27
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 de 27
Objetos Geométricos Básicos 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 Geométricos Básicos em Java 2D 16 de 27 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 de 27
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 de 27
Transformações Geométricas São operações que podem ser utilizadas visando a alteração de algumas características como: posição, orientação, forma e tamanho. As transformações são representáveis por equações; Um modelo simples é a representação das manipulações por meio de matrizes (usado amplamente); As principais transformações são: Translação (translation); Escala (scale); Rotação (rotation); Cisalhamento (shear); 18 de 27
Transformações Geométricas - Ponto e Produto Um ponto pode ser escrito como: ponto = P(x, y) =(x, y) T R 2 O produto de dois vetores u e v pode descrever as trasnformações, seguindo a seguinte estrutura: v 1 u T v = (u 1,..., u n )... = v 2 n i=1 u i v i 19 de 27
Transformações Geométricas - Translação A operação de translação pode ser descrita como: P = P + T = [ ] x + y Exemplo com T = (140, 80) T [ ] { x x = y y = x + x = y + y 20 de 27
Transformações Geométricas - Escala A operação de escala pode ser descrita como: P = P T = [ ] x y [ ] sx 0 = 0 s y Exemplo com s x = 2 e s y = 0.5: { x y = x s x = y s y 21 de 27
Transformações Geométricas - Rotação A operação de rotação pode ser descrita como: P = P T = [ ] x y Exemplo com θ =45 o : [ ] cos(θ) sen(θ) = sen(θ) cos(θ) { x y = x cos(θ)-y sen(θ) = x sen(θ)+y cos(θ) 22 de 27
Transformações Geométricas - Cisalhamento A operação de cisalhamento pode ser descrita como: P = P T = [ ] [ ] { x 1 sx x = x + s x y = y s y 1 y = y + s y x Exemplo com com s x = 1 e s y = 0: 23 de 27
Coordenadas Homogêneas Para que as operações sejam combinadas facilmente, podemos tratá-las como coordenadas homogêneas. Isso pode ser feito adicionando uma terceira coordenada ao ponto. Assim, um ponto (x, y) é representado como (x, y, W ). (2,3,6) e (4, 6, 12) é o mesmo ponto representado por diferentes triplas. Se W é a coordenada não 0, podemos dividir (x, y, W ) por ela, obtendo ( a W, b W, 1). 24 de 27
Coordenadas Homogêneas 25 de 27
Exercício com Transformações 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 direção, assim você deve implementar somente a translação em uma direção e utilizar a rotação para modificar a orientação do objeto. Utilize o teclado para realizar os movimentos, para tal utilize uma inner class que estenda KeyAdapter e não esqueça de adicionar um KeyListener (addkeylistener) na classe Frame. 26 de 27
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. 27 de 27