Dr. Sylvio Barbon Junior. Departamento de Computação - UEL. 1 o Semestre de 2015

Introdu¸c˜ ao a Computa¸c˜ ao Gr´ afica [5COP100]

Dr. Sylvio Barbon Junior

Departamento de Computa¸c˜ao - UEL

1

Semestre de 2015

Assunto

Aula 2

Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

2 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Sum´ ario

• Raster e Vector graphics;

• Programas em Java 2D;

• Geometria de Objetos:

◦ B´ asica;

◦ Java 2D;

• Transforma¸ c˜ oes Geom´ etricas em Java 2D;

• Coordenadas Homogˆ eneas;

• Aplica¸ c˜ oes de Transforma¸ c˜ oes;

• Anima¸ c˜ ao e movimento baseado em Transforma¸ c˜ ao;

• Movimento em Java 2D;

• Interpola¸ c˜ ao para mudan¸cas cont´ınuas;

• Interpola¸ c˜ ao em Java 2D.

Raster vs Vector Graphics

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

4 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Vector vs Raster Graphics

• Qual o modelo que descreve um objeto antes de sua renderiza¸ c˜ ao?

• Vector, Vetorizada ou vector-oriented:

◦ Modelada pela combina¸ c˜ ao de linhas, retˆ angulos, c´ırculos, elipses e arcos;

◦ A rela¸ c˜ ao entre as formas ´ e expressa via equa¸ c˜ oes matem´ aticas;

◦ Possibilita a mudan¸ ca 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

Raster vs Vector Graphics

Figura: Imagem vector [des, 2015]

6 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

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 resolu¸ ´ c˜ ao;

◦ Todas as formas s˜ ao convertidas em pixels;

◦ Photoshop, Gimp, MS Paint

◦ GIF, BMP, TIFF, JPEG, XCF, JPEG e outros v´ arios.

Raster vs Vector Graphics

Figura: Imagem raster [des, 2015]

8 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Vector vs Raster Graphics

• scan conversion: convers˜ ao de vector-oriented para imagem raster

• aliasing effect: ocorre na forma de bordas serrilhadas chamadas

de jaggies ou staircasing. Uso de t´ ecnicas anti-aliasing para

corre¸c˜ ao.

Raster vs Vector Graphics

Figura: Corre¸c˜ ao anti-aliasing [ali, 2015]

10 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Raster vs Vector Graphics

Figura: Imagem Vector e diferentes resolu¸c˜ oes de raster [Klawonn, 2012]

Programas em Java 2D

• Java 2D ´ e uma API pertencente ao kernel a partir do Java 2;

• Apresenta algumas extens˜ oes do pacote AWT (Abstract Windowing Toolkit) e Swing;

Figura: API Java 2D [Klawonn, 2012]

12 de 45

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 {

S i m p l e J a v a 2 D E x a m p l e ( ) {

a d d W i n d o w L i s t e n e r (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 ) {

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 p r o g r a m ” ) ;

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) ; }

}

Objetos Geom´ etricos B´ asicos

• Pontos: s˜ ao definidos pelas coordenadas x e y.

• Linhas, polylines ou curvas: s˜ ao definidas por um ou mais pontos

• ´ areas ou poligonos: podem ser preenchidas por cores ou texturas;

• curvas: s˜ ao definidas como polinˆ omios param´ etricos

Figura: Curva quadr´ atica e c´ ubica [Klawonn, 2012]

13 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Objetos Geom´ etricos B´ asicos

• E poss´ıvel criar pol´ıgonos complexos com a combina¸ ´ c˜ ao de outras

´

areas mais simples usando opera¸ c˜ oes como uni˜ ao (union), intersec¸c˜ ao (intersection), diferen¸ ca (difference) e diferen¸ ca sim´ etrica (symmetric difference).

Figura: Images das opera¸ c˜ oes de Uni˜ ao, Intersec¸ c˜ ao, Diferen¸ ca e Deferen¸ ca

sim´ etrica entre um c´ırculo e um retˆ angulo. [Klawonn, 2012]

Objetos Geom´ etricos B´ asicos em Java 2D

• Classe abstrata Shape

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

15 de 45

Listing 2: Exemplos Java 2D [Klawonn, 2012]

L i n e 2 D . D o u b l e l i n e = new L i n e 2 D . 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 i c C u r v e 2 D . D o u b l e c c = new C u b i c C u r v e 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 ) ;

Objetos Geom´ etricos B´ asicos em Java 2D

Figura: Exemplo General Path. [Klawonn, 2012]

16 de 45

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

Exerc´ıcios

1. Desenhe um retˆ angulo com as pontas arredondadas.

2. Implemente um c´ odigo para desenhar um “peixe”como da imagem abaixo. Utilize as opera¸ c˜ oes entre poligonos.

17 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Transforma¸c˜ oes Geom´ etricas

• S˜ ao opera¸c˜ oes que podem ser utilizadas visando a altera¸ c˜ ao de algumas caracter´ısticas como: posi¸ c˜ ao, orienta¸ c˜ ao, forma e tamanho.

• As transforma¸c˜ oes s˜ ao represent´ aveis por equa¸ c˜ oes;

• Um modelo simples ´ e a representa¸ c˜ ao das manipula¸ c˜ oes por meio de matrizes (usado amplamente);

• As principais transforma¸ c˜ oes s˜ ao:

◦ Transla¸ c˜ ao (translation);

◦ Escala (scale);

◦ Rota¸ c˜ ao (rotation);

◦ Cisalhamento (shear);

Transforma¸c˜ oes Geom´ etricas - Ponto e Produto

• Um ponto pode ser escrito como:

ponto = P (x, y) =(x, y)

∈ R

• O produto de dois vetores u e v pode descrever as trasnforma¸ c˜ oes, seguindo a seguinte estrutura:

u

× v = (u

, ..., u

) ×



 v

...

v



 =

n

P

i=1

u

× v

19 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Transforma¸c˜ oes Geom´ etricas - Transla¸c˜ ao

• A opera¸c˜ ao de transla¸ c˜ ao pode ser descrita como:

P

= P + T = x

y

+ ∆x

∆y

=

( x

= x + ∆x y

= y + ∆y

• Exemplo com T = (140, 80)

Transforma¸c˜ oes Geom´ etricas - Escala

• A opera¸c˜ ao de escala pode ser descrita como:

P

= P ·T = x

y

·

s

0 0 s

=

( x

= x · s

y

= y · s

• Exemplo com s

= 2 e s

= 0.5:

21 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Transforma¸c˜ oes Geom´ etricas - Rota¸c˜ ao

• A opera¸c˜ ao de rota¸ c˜ ao pode ser descrita como:

P

= P ·T = x

y

·

cos(θ) −sen(θ) sen(θ) cos(θ)

=

( x

= x·cos(θ)-y·sen(θ) y

= x·sen(θ)+y·cos(θ)

• Exemplo com θ =45

:

Transforma¸c˜ oes Geom´ etricas - Cisalhamento

• A opera¸c˜ ao de cisalhamento pode ser descrita como:

P

= P ·T = x

y

·

1 s

s

1

=

( x

= x + s

·y y

= y + s

·x

• Exemplo com com s

= 1 e s

= 0:

23 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Coordenadas Homogˆ eneas

• Para que as opera¸c˜ oes sejam combinadas facilmente, podemos trat´ a-las como coordenadas homogˆ eneas. Isso pode ser feito adicionando 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 diferentes triplas.

• Se W ´ e a coordenada n˜ ao 0, podemos dividir (x, y, W ) por ela,

obtendo (

,

, 1).

Coordenadas Homogˆ eneas

25 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Exerc´ıcio com Transforma¸c˜ oes

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¸ c˜ ao, assim vocˆ e deve

implementar somente a transla¸ c˜ ao em uma dire¸ c˜ ao e utilizar a

rota¸c˜ ao para modificar a orienta¸ c˜ ao do objeto. Utilize o teclado

para realizar os movimentos, para tal utilize uma inner class que

estenda KeyAdapter e n˜ ao esque¸ ca de adicionar um KeyListener

(addKeyListener) na classe Frame.

Aplica¸c˜ oes de Transforma¸c˜ oes

• Foi observado que as aplica¸c˜ oes normalemente exigem uma s´ erie de transforma¸c˜ oes de um sistema de coordenadas para outro.

• Os objetos podem ser descritos em um ambiente diferente do Cartesiano (coordenadas polares e el´ıpticas).

• Por exemplo, aplica¸c˜ oes em Java usam um sistema pr´ oprio, diferente do cartesiano, ´ e um sistema de coordenadas globais.

• Neste caso ´ e necess´ ario considerar especificamente a transforma¸ c˜ ao entre dois sistemas de coordenadas.

27 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Aplica¸c˜ oes de Transforma¸c˜ oes

Aplica¸c˜ oes de Transforma¸c˜ oes

Coordenadas El´ıpticas

29 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Aplica¸c˜ oes de Transforma¸c˜ oes

• Para transformar um objeto de um sistema de coordenadas xy para um sistema x

y

com origens em (0, 0) e (x

, y

) com um ˆ angulo de orienta¸c˜ ao θ entre os eixos x e x

devemos determinar a transforma¸c˜ oes que superp˜ oe os eixos xy aos eixos x

y

.

• Passos:

1. Transladar o sistema x

y

para que sua origem coincida com xy : T (−x

, −y

)

2. Rotacionaro eixo x

para coincidir com o eixo x: R(−θ).

• Concatenando as equa¸ c˜ oes de transforma¸ c˜ ao, tem-se:

M

, x

y

= R(−θ) ·T(-x

, −y

)

Aplica¸c˜ oes de Transforma¸c˜ oes

• Alternativamente, pode-se estabelecer a orienta¸ c˜ ao por meio de um vetor V na dire¸c˜ ao positiva do eixo y

, passando pela origem de xy : v =

= (v

, v

)

• O vetor unit´ ario ao longo do eixo x

rotacionado v em 90

no sentido hor´ ario:

u = (v

, −v

) = (u

, u

)

• A matriz de rota¸ c˜ ao seria:

R =





u

u

0 v

v

0

0 0 1



 =





0 1 0

−1 0 0

0 0 1





31 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Composi¸c˜ ao de Transforma¸c˜ oes

• Exemplo: Rota¸c˜ ao em θ com rela¸ c˜ ao ao ponto mais pr´ oximo da origem:

T (−x

, −y

) ·R(θ) ·T(x

, y

) =





1 0 −x

0 1 −y

0 0 1



 ·





cosθ −senθ 0 senθ cosθ 0

0 0 1



·





1 0 x

0 1 y

0 0 1



=





cosθ −senθ x

(1 − cosθ) + y

· senθ senθ cosθ y

(1 − cosθ) + x

· senθ

0 0 1





Aplica¸c˜ oes de Transforma¸c˜ oes

Rota¸ c˜ ao com base em ponto

33 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Composi¸c˜ ao de Transforma¸c˜ oes

• Exemplo: Rota¸c˜ ao em θ e Escala e Transla¸ c˜ ao com rela¸ c˜ ao ao ponto central do objeto:

T (−x

, −y

) ·R(θ) ·S(s

, s

) ·T(x

, y

)

Aplica¸c˜ oes de Transforma¸c˜ oes

Escala, Rota¸c˜ ao e mudan¸ ca de dire¸ c˜ ao

35 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Exerc´ıcio com Composi¸c˜ ao de Transforma¸c˜ oes

1. Implemente um aplicativo com Java 2D para movimentar um ve´ıculo para a frente (cima) direita e esquerda para desviar dos obst´ aculos que ser˜ ao aleatoriamente criados na estrada. Os objetos dever˜ ao ”surgir”a frente do ve´ıculo, para tal, utilize a

transforma¸c˜ ao de escala. Ser´ a necess´ ario implementar Runnable e

o m´ etodo Run(). N˜ ao esquecer do new Thread(this) e do

Thread.sleep(tempoEmMilisegundos).

Exerc´ıcio com Composi¸c˜ ao de Transforma¸c˜ oes

Interface modelo - Enduro (atari)

37 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Java 2D

• Em Java 2D ´ e poss´ıvel trabalhar com transforma¸ c˜ oes geom´ etricas por meio da classe AffineTransform.

• O construtor b´ asico ´ e formado:

AffineTransform at = new AffineTransform(a,b,c,d,e,f)

Java 2D

• As transforma¸c˜ oes elementares podem ser realizadas pelos m´ etodos:

◦ Rota¸ c˜ ao: at.setToRation(a);

◦ Rota¸ c˜ ao a um ponto: at.setToRotation(a, x, y);

◦ Escala: at.setToScale(sx, sy);

◦ Cisalhamento: at.setToShear(sx, sy);

◦ Transla¸ c˜ ao: at.setToTranslation(dx, dy);

• As transforma¸ c˜ oes podem ser m´ ultiplas, e realizadas atrav´ es de concate¸ c˜ ao:

◦ at1.concatenate(at2);

◦ at1.preConcatenate(at2);

39 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Java 2D

• As modifica¸c˜ oes podem ser feitas, aplicadas a um objeto:

Shape transformedShape = at.createTransformedShape(s);

• Objetos criados Graphics2D podem ser aplicados ` a AffineTransform:

g2d.transform(at);

A f f i n e T r a n s f o r m yUp = new A f f i n e T r a n s f o r m ( ) ; yUp . s e t T o S c a l e ( 1 ,−1 ) ;

A f f i n e T r a n s f o r m t r a n s l a t e = new A f f i n e T r a n s f o r m ( ) ;

t r a n s l a t e . s e t T o T r a n s l a t i o n ( x O f f s e t , w i n d o w H e i g h t−y O f f s e t ) ; yUp . p r e C o n c a t e n a t e ( t r a n s l a t e ) ;

g2d . t r a n s f o r m ( yUp ) ;

41 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Interpola¸c˜ ao para mudan¸cas cont´ınuas

• Ao inv´ es de projetar quadro a quadro cada uma das mudan¸ cas, ´ e poss´ıvel descrevˆ e-la baseada em uma posi¸c˜ ao inicial e final.

• Os movimentos (ou mudan¸cas) intermedi´ arias podem ser modeladas por interpola¸c˜ oes entre as posi¸ c˜ oes especificadas.

• Exemplo:

p

= (0, 0)

e p

= (200, 100)

A interpola¸ c˜ ao pode ser dada como:

p

= (1 − α) · p

+ α · p

, α ∈ [0, 1]

Para um valor de α = 0.5 , temos a transforma¸ c˜ ao “pela metade”.

Tipos de linhas em Java 2D

• Por meio da classe BasicStroke ´ e poss´ıvel criar linhas de tipos diferentes, escolhendo a espessura, forma do final da linha e ligra¸ c˜ ao entre linhas.

• Exemplo:

BasicStroke bsLinhaFina = new BasicStroke (3.0f);

g2d.setStroke(bsLinhaFina);

42 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Quest˜ ao do POSCOMP - Quest˜ ao 1

Quest˜ ao do POSCOMP - Quest˜ ao 2

44 de 45

Aula 2 - Princ´ıpios b´ asicos de imagens de duas dimens˜ oes

Referˆ encias

(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.