Introdu˘c~ao a Computa˘c~ao Gr a ca [5COP100] · 2015-04-07 · Qual o modelo que descreve um...
Transcript of 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
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
Raster vs Vector Graphics
Figura: Imagem original, vetorizada e raster [Klawonn, 2012]
4 de 27
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
Raster vs Vector Graphics
Figura: Imagem vector [des, 2015]
6 de 27
Aula 2 - Princıpios basicos de imagens de duas dimensoes
Vector vs Raster Graphics
• 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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
Raster vs Vector Graphics
Figura: Imagem raster [des, 2015]
8 de 27
Aula 2 - Princıpios basicos de imagens de duas dimensoes
Vector vs Raster Graphics
• 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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
Raster vs Vector Graphics
Figura: Correcao anti-aliasing [ali, 2015]
10 de 27
Aula 2 - Princıpios basicos de imagens de duas dimensoes
Raster vs Vector Graphics
Figura: Imagem Vector e diferentes resolucoes de raster [Klawonn, 2012]
11 de 27
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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
Aula 2 - Princıpios basicos de imagens de duas dimensoes
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