Introdução a Computação Gráfica [5COP100]

Introdução a Computação Gráfica [5COP100]
Dr. Sylvio Barbon Junior
Departamento de Computação - UEL
1o Semestre de 2015
Assunto
Aula 2
Princı́pios básicos de imagens de duas
dimensões
2 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Raster vs Vector Graphics
Figura: Imagem original, vetorizada e raster [Klawonn, 2012]
4 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Raster vs Vector Graphics
Figura: Imagem vector [des, 2015]
6 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Raster vs Vector Graphics
Figura: Imagem raster [des, 2015]
8 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Raster vs Vector Graphics
Figura: Correção anti-aliasing [ali, 2015]
10 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Raster vs Vector Graphics
Figura: Imagem Vector e diferentes resoluções de raster [Klawonn, 2012]
11 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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]
i m p o r t j a v a . awt . ∗ ;
p u b l i c c l a s s S i m p l e J a v a 2 D E x a m p l e e x t e n d s Frame
{
SimpleJava2DExample ( )
{
a d d W i n d o w L i s t e n e r ( new MyFinishWindow ( ) ) ;
}
public void paint ( Graphics g)
{
G r a p h i c s 2 D g2d = ( G r a p h i c s 2 D ) 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 )
{
S i m p l e J a v a 2 D E x a m p l e f = new S i m p l e J a v a 2 D E x a m p l e ( ) ;
f . s e t T i t l e ( ”The f i r s t J a v a 2D program ” ) ;
f . setSize (350 ,80);
f . s e t V i s i b l e ( true ) ;
}
}
13 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Objetos Geométricos Básicos
• É possı́vel criar polı́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
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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 . D o u b l e l i n e = new Line2D . D o u b l e ( x1 , y1 ,
x2 , y2 ) ;
QuadCurve2D . D o u b l e qc = new QuadCurve2D . D o u b l e ( x1 , y1 ,
c t r l x , c t r l y , x2 , y2 ) ;
C u b ic C u r ve 2 D . D o u b l e c c = new C u bi c C u r ve 2 D . D o u b l e ( 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
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Objetos Geométricos Básicos 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 u n d e r b o d y
gp . quadTo ( 9 0 , 1 4 0 , 1 0 0 , 1 2 0 ) ; // f r o n t w h e e l
gp . l i n e T o ( 1 6 0 , 1 2 0 ) ; // m i d d l e u n d e r b o d y
gp . quadTo ( 1 7 0 , 1 4 0 , 1 8 0 , 1 2 0 ) ; // r e a r w h e e l
gp . l i n e T o ( 2 0 0 , 1 2 0 ) ; // r e a r u n d e r b o d y
gp . c u r v e T o ( 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 ) ; // b o n n e t
gp . l i n e T o ( 6 0 , 1 2 0 ) ; // f r o n t
17 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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:
◦
◦
◦
◦
18 de 27
Translação (translation);
Escala (scale);
Rotação (rotation);
Cisalhamento (shear);
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Transformações Geométricas - 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 trasnformações,
seguindo a seguinte estrutura:
 
v1
n
P
ui × vi
uT × v = (u1 , ..., un ) ×  ...  =
i=1
v2
19 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Transformações Geométricas - Translação
• A operação de translação pode ser descrita como:
( 0
x = x + ∆x
x
∆x
P =P+T=
+
=
0
y
∆y
y = y + ∆y
0
• Exemplo com T = (140, 80)T
20 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Transformações Geométricas - Escala
• A operação de escala pode ser descrita como:
x
s
P = P ·T =
· x
y
0
0
( 0
x = x · sx
0
=
0
sy
y = y · sy
• Exemplo com sx = 2 e sy = 0.5:
21 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Transformações Geométricas - Rotação
• A operação de rotação pode ser descrita como:
x
cos(θ)
P = P ·T =
·
y
sen(θ)
0
• Exemplo com θ =45o :
22 de 27
−sen(θ)
cos(θ)
( 0
x = x·cos(θ)-y·sen(θ)
=
0
y = x·sen(θ)+y·cos(θ)
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Transformações Geométricas - Cisalhamento
• A operação de cisalhamento pode ser descrita como:
x
1
P = P ·T =
·
y
sy
0
sx
1
( 0
x = x + sx ·y
=
0
y = y + sy ·x
• Exemplo com com sx = 1 e sy = 0:
23 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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,
b
, 1).
obtendo ( Wa , W
24 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
Coordenadas Homogêneas
25 de 27
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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
Aula 2 - Princı́pios básicos de imagens de duas dimensões
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