Introdução à Computação Gráfica

Introdução à Computação Gráfica

Desenho de Construção Naval

Manuel Ventura

Instituto Superior Técnico

Secção Autónoma de Engenharia Naval 2007

Sumário

• Entidades Geométricas

• Transformações Geométricas 2D

– Escala – Rotação – Translação – Coordenadas homogéneas

– Matriz de transformação generalizada

• Transformações Geométricas 3D

• Curvas Bézier 2D

Entidades Geométricas (1)

[

]

P

=

x

y

Polígono

Ponto

[

]

A A B B C C D D

x

y

x

y

ABCD

x

y

x

y

⎡

⎤

⎢

⎥

⎢

⎥

=

⎢

⎥

⎢

⎥

⎣

⎦

Segmento de recta

y x (x,y) (xA,yA ) (xB,yB) (xA,yA ) (xB,yB) (xC,yC) (xD,yD )

[ ]

_⎥ ⎦ ⎤ ⎢ ⎣ ⎡ = B B A A y x y x AB

Entidades Geométricas (2)

Vector

Família de segmentos de recta

orientados que têm todos o mesmo comprimento ou grandeza.

A _A

A A

Propriedades aritméticas especiais

1. Se A é um vector, então –A, é um vector de comprimento igual, mas que aponta no sentido oposto.

2. Se A é um vector então kA tem um comprimento k vezes superior a A (Multiplicação escalar).

Entidades Geométricas (3)

A B A+B

Método do paralelogramo

A A+B B

Método origem-extremidade

Transformações Geométricas

• Transformações Primárias

– Escala – Rotação – Translação

• Transformações Secundárias

– Reflexão em relação à origem

– Reflexão em relação a um ponto qualquer

– Reflexão em relação aos eixos de referência – Reflexão em relação a uma recta

Escala

• A escala é definida por

• Sob a forma matricial será

1 0 1 0 x y

x

S x

y

S y

=

⎧

⎨ =

⎩

[

] [

]

[

][

]

1 1 0 0 0 0

0

0

x y Escala

S

x

y

x

y

S

x

y

T

⎡

⎤

=

_⎢

_⎥

⎣

⎦

=

Si > 1 => factor de ampliação Si < 1 => factor de redução Si = 1 => elemento neutro Si = 0 => elemento absorvente Sx= Sy => escala uniforme Sx= Sy => escala diferenciada

Rotação (1)

e o ponto transformado será:

Em coordenadas polares o ponto inicial será

( )

( )

0 0 cos sin x r y r

α

α

= ⋅ ⎧ ⎨ = ⋅ ⎩

(

)

(

)

1 1 cos sin x r y r

α β

α β

= ⋅ + ⎧ ⎨ = ⋅ + ⎩

( ) ( )

( ) ( )

Desenvolvendo e substituindo

Rotação (2)

O raio pode ser expresso em função das coordenadas do ponto inicial

( )

0

( )

0 cos sin x y r r α α = =

Substituindo

r

na expressão anterior teremos:

( )

( ) ( )

( )

( ) ( )

( )

( ) ( )

( )

( ) ( )

0 0 1 0 0 1

cos cos sin sin

cos

s sin sin cos

cos sin x y x sin x y y co α β α β α α α β α β α α ⎧ = − ⎪⎪ ⎨ ⎪ = + ⎪⎩ E simplificando, teremos:

( )

( )

( )

( )

1 0 0 1 0 0 cos sin sin cos x x y y x y β β β β = − ⎧ ⎨ = + ⎩

Rotação (3)

Na forma matricial será:

[

1 1

] [

0 0

]

( )

_{( )}

( )

_{( )}

cos sin sin cos x y x y β β β β ⎡ ⎤ = _{⎢ ⎥} − ⎣ ⎦

A transformação geométrica da rotação de um ângulo é

independente do vector de posição e do raio da rotação, e é expressa pela matriz

[ ]

cos

( )

_{( )}

sin

( )

_{( )}

sin cos R M β β β β ⎡ ⎤ = ⎢₋ ⎥ ⎣ ⎦

Rotação (4)

A inversa de uma matriz de rotação pura, é a sua transposta

[ ] [ ]

1 T

R − = R

As rotações são positivas no sentido contrário ao dos ponteiros do relógio.

Quando o determinante |R|=1 a rotação diz-se pura.

Sen Cos Tang 30° 1/2 √3/2 √3/3 45° √2/2 √2/2 1 60° √3/2 1/2 √3

Translação (1)

1 0 1 0 X Y

x

x

V

y

y

V

= +

⎧

⎨ = +

⎩

Para manter a forma matricial e obter uma matriz independente das coordenadas da entidade a transformar, tem que se introduzir o

conceito de coordenada homogénea

h

Translação (2)

E a transformação em forma matricial será

[

1 1

] [

0 0

]

1 0 1 1 0 1 X Y x y x y V V ⎡ ⎤ ⎢ ⎥ = _{× ⎢ ⎥} ⎢ ⎥ ⎣ ⎦

A matriz de Translação é portanto definida por:

[ ]

1 0 0 1 T X Y M V V ⎡ ⎤ ⎢ ⎥ = ⎢ ⎥ ⎢ ⎥ ⎣ ⎦

Matrizes de Transformações 2D

Escala Rotação Translação

[ ]

0 0 x T y S M S ⎡ ⎤ = ⎢ ⎥ ⎣ ⎦

[ ]

( )

( )

( )

( )

cos sin sin cos T M α α α α ⎡ ⎤ = ⎢₋ ⎥ ⎣ ⎦

[ ]

1 0 0 1 T X Y M V V ⎡ ⎤ ⎢ ⎥ = ⎢ ⎥ ⎢ ⎥ ⎣ ⎦

Notar que nas transformações assim descritas, as matrizes são multiplicadas à direita ou seja

Concatenação de Matrizes (1)

Uma sequência de transformações pode ser representada por uma concatenação de matrizes

[ ]

P1 =

[ ] [ ] [ ] [ ]

P0 × T1 × T2 × T3

[ ] [ ]

1 1 0

0 1

T × T − = ⎢⎡ ⎤_⎥

⎣ ⎦

• O produto de matrizes não é comutativo, logo, a ordem das transformações é relevante.

• A compatibilização de matrizes requer matrizes (3 x 3) e a utilização de coordenadas homogéneas

• A transformação inversa é expressa pela matriz inversa

_{[ ]}

1

T −

[ ] [ ] [ ] [ ]

[ ] [ ] [ ]

P T P M_T T T T M × = × × = 0 1 3 2 1

Concatenação de Matrizes (2)

Aplicações:

Rotação de um ponto em torno de um centro de rotação fixo diferente da origem.

Definição Alternativa das Matrizes

Neste caso, as matrizes são multiplicadas à esquerda, e a matriz dos pontos iniciais deve ser também transposta, ou seja

Alguns autores e alguns sistemas computacionais usam um arranjo diferente das matrizes de transformação geométrica, que são as transpostas das acima indicadas.

[ ]

[ ]

[ ]

T T

P

M

P

_{1 0} 1

×

=

[ ]

[ ]

T T T

M

M

=

1

A ordem da multiplicação também deve ser invertida. Por exemplo, quando se pretender aplicar, por esta ordem, as transformações [A], [B] e [C], a matriz de transformação total será:

[ ]

M

_T

=

[ ] [ ] [ ]

C

×

B

×

A

Matrizes de Transformação 2D

em Coordenadas Homogéneas

Escala

Rotação

Translação

[ ]

0 0 0 0 0 0 1 X T Y S M S ⎡ ⎤ ⎢ ⎥ = ⎢ ⎥ ⎢ ⎥ ⎣ ⎦

[ ]

( )

( )

( )

( )

cos sin 0 sin cos 0 0 0 1 T M α α α α ⎡ ⎤ ⎢ ⎥ = −_{⎢ ⎥} ⎢ ⎥

[ ]

1 0 0 0 1 0 1 T X Y M V V ⎡ ⎤ ⎢ ⎥ = ⎢ ⎥ ⎢ ⎥ ⎣ ⎦

Compatibilização de Matrizes (1)

[ ]

• As coordenadas cartesianas ordinárias (

x,y

) são substituídas

pelas coordenadas homogéneas (x,y,1).

⎥

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎢

⎣

⎡

=

1

1

1

1

2 2 1 1 n n

y

x

y

x

y

x

C

M

M

• Os pontos, segmentos e polígonos são representados em coordenadas

homogéneas, respectivamente, por uma matriz de dimensões (1x3), (2x3) e (Nx3).

Compatibilização de Matrizes (2)

[ ]

• A matriz de transformação geométrica em 2D deverá ser

representada no seu formato generalizado com as dimensão de (3x3):

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

=

1

0

0

f

e

d

c

b

a

T

• Os elementos da diagonal

a

e

d

correspondem a transformações por variação de escala

• Os elementos

a

,

b

,

c

e

d

, reflectem a aplicação de rotações

Exercício: Ordem de Concatenação

• Aplicação de duas transformações geométricas sobre um mesmo polígono, [ABC], impondo-se duas sequência distintas de execução. A x 1 2 3 4 1 2 3 4 C B

[

]

⎥ ⎥ ⎥ ⎦ ⎤ ⎢ ⎢ ⎢ ⎣ ⎡ = 3 2 1 3 1 1 ABC

(

180

)

(

3

)

1

=

Rot

O

−

⋅

Transl

T

Y

=

Transf

(

3

)

(

180

)

2

=

Transl

T

Y

=

⋅

Rot

O

−

Transf

Resolução: Ordem de Concatenação (1)

[ ]

• Rotação do triângulo em torno da origem de 180° seguido de translação em Y de 3 unidades: ⎥ ⎥ ⎥ ⎦ ⎤ ⎢ ⎢ ⎢ ⎣ ⎡ − − = ⎥ ⎥ ⎥ ⎦ ⎤ ⎢ ⎢ ⎢ ⎣ ⎡ ⋅ ⎥ ⎥ ⎥ ⎦ ⎤ ⎢ ⎢ ⎢ ⎣ ⎡ − − = 1 3 0 0 1 0 0 0 1 1 3 0 0 1 0 0 0 1 1 0 0 0 1 0 0 0 1 T

[

]

1 1 1

1 0 0

1 2 1

⎡

₋

⎤

₋

⎡

⎤

⎡

⎤

⎢

⎥

⎢

⎥

⎢

⎥

=

⋅

−

= −

(

)

(

)

1 _O

180

Y

3

Resolução: Ordem de Concatenação (1)

• Rotação do triângulo em torno da origem de 180° seguido de translação em Y de 3 unidades:

Resolução: Ordem de Concatenação (2)

[ ]

• Translação de [ABC] segundo

Y

de 3 unidades, seguido de uma rotação em torno da origem de 180°:

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

−

−

−

=

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

−

−

⋅

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

=

1

3

0

0

1

0

0

0

1

1

0

0

0

1

0

0

0

1

1

3

0

0

1

0

0

0

1

T

[

ABC

]

1 1 1

3 1 1

0

1 0 0

1 0

1

3

4 1

4 1

⎡

₋

⎤

_{− −}

⎡

⎤

⎡

⎤

⎢

⎥

⎢

⎥

⎢

⎥

=

_⎢

_⎥

⋅

_⎢

−

_⎥

= − −

_⎢

_⎥

(

3

)

(

180

)

2

=

Transl

T

Y

=

⋅

Rot

O

−

Transf

Resolução: Ordem de Concatenação (2)

• Translação de [ABC] segundo Y de 3 unidades, seguido de uma rotação em torno da origem de 180°:

Transformações Secundárias

• As Transformações Secundárias são aquelas que podem ser consideradas como casos particulares ou aplicações

compostas de transformações primárias • Alguns exemplos:

– Reflexão em torno da origem (0,0)

– Reflexão em torno de um ponto qualquer – Reflexão em torno de um eixo de referência

Reflexão em Relação à Origem

0 t 0

x =-x

P

_t

x

P

y =-y

_{t 0} 0

y

[ ]

⎥ ⎥ ⎥ ⎦ ⎤ ⎢ ⎢ ⎢ ⎣ ⎡ − − = 1 0 0 0 1 0 0 0 1 T M

A matriz de transformação associada è Reflexão em relação à origem (0,0) é a seguinte:

Note-se que corresponde a efectuar uma rotação de 180° (no plano) em torno da origem.

Reflexão em Relação a um Ponto

Genérico

[ ] [ ][ ][

][ ]

1 0 1 −

=

P

T

R

T

P

_REF

• Translação desse ponto para a origem

• Reflexão em relação à origem • Translação inversa

A Reflexão em relação a um ponto qualquer pode ser obtida em três passos:

[ ]

⎥ ⎥ ⎥ ⎦ ⎤ ⎢ ⎢ ⎢ ⎣ ⎡ − − = 1 0 1 0 0 0 1 P P T

A translação é definida pelas coordenadas do ponto genérico

Reflexão em Relação a um Eixo

Em relação ao eixo dos XX (y=0)

⎥ ⎥ ⎥ ⎦ ⎤ ⎢ ⎢ ⎢ ⎣ ⎡ − 1 0 0 0 1 0 0 0 1

(x=0)

⎥ ⎥ ⎥ ⎦ ⎤ ⎢ ⎢ ⎢ ⎣ ⎡− 1 0 0 0 1 0 0 0 1

Reflexão em Relação a uma Recta que

passa pela Origem

t

P

0 t

y=x

x=y

y

x

0

P

[ ] [ ][ ][ ][ ]

P

₁

=

P

₀

R

₋₄₅

R

_xx

R

₊₄₅

Por simples análise visual se pode

deduzir que a matriz de transformação de um ponto P em relação à recta

bissectriz do 1º quadrante (Y=X) será:

[ ]

⎥ ⎥ ⎥ ⎦ ⎤ ⎢ ⎢ ⎢ ⎣ ⎡ = = 1 0 0 0 0 1 0 1 0 x y R

Podemos obter o mesmo resultado decompondo a transformação desejada numa série de transformações elementares:

Notas sobre Transformações

• A Reflexão e a Escala só envolvem elementos da diagonal • Os elementos fora da diagonal provocam um efeito de

shearing

.

• A origem (0,0) é invariante (Não é alterada pelas transformações)

• A matriz identidade é o elemento neutro das

transformações geométricas, não altera os pontos iniciais.

[ ] [ ]

_{1 0} 0 1 0

[ ]

₀ 0 0 1 P P P _⎥⎥ = ⎤ ⎢ ⎢ ⎡ × =

Operações com Matrizes em Excel

=mmult(F5:H7;N13:P15) =minverse(F5:H7) =mdeterm(F5:H7) =transpose(F5:H7) <ctrl+shift+enter> radians() sin(), cos() sqrt()

Funções necessárias para calcular transformações geométricas numa folha de cálculo:

Exercício de aplicação (1)

• Deduza uma matriz que transforme o triângulo

• [A1 A2 A3] em [B1 B2 B3], sem utilizar rotações:

[

]

⎥ ⎥ ⎥ ⎦ ⎤ ⎢ ⎢ ⎢ ⎣ ⎡ = 2 2 2 1 1 1 A A A_{1 2 3}

A

1 2 3 1 2 3 1

A

₂

A

₃

x

y

-1

B

₁

B

₂

[

]

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

−

−

−

=

2

2

1

2

1

1

B

B

B

_{1 2 3}

Exercício de aplicação (1) - Resolução

• Uma solução possível é aplicar uma reflexão em torno de

xx

, seguido de uma reflexão em torno da recta

y=-x

:

x y xx

refl

refl

Transf

=

⋅

₌₋

[ ]

_⎥

⎦

⎤

⎢

⎣

⎡

−

=

⎥

⎦

⎤

⎢

⎣

⎡

−

−

⋅

⎥

⎦

⎤

⎢

⎣

⎡

−

=

0

1

1

0

0

1

1

0

1

0

0

1

T

Exercício de aplicação (1) - Resolução

• Representação geométrica:

A

y

x

1 2 3 1 2 3 1 2

A

A

₃

b

2 1 3

y

B

1

B

2 3

x

Exercício de aplicação (2)

• Variação de escala segundo

x

de um factor 2 do

triângulo [ABC], mantendo fixo o vértice (2,3). 1 2 3 4 1 2 3 4 y 5 5 6 A B C x

[

]

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

=

5

3

3

6

3

2

ABC

Exercício de aplicação (2) - Resolução

1. Aplicar uma translação ao triângulo de modo a colocar o vértice A(2,3) na origem (0,0)

2. Aplicar a variação de escala pretendida (alongamento de 2 vezes apenas segundo

X

)

3. Aplicar uma translação ao triângulo transformado de modo a reposicionar o seu vértice A em (2,3).

Exercício de aplicação (2) - Resolução

[ ]

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

−

=

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

⋅

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

⋅

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

−

−

=

1

0

2

0

1

0

0

0

2

1

3

2

0

1

0

0

0

1

1

0

0

0

1

0

0

0

2

1

3

2

0

1

0

0

0

1

T

[

] [

] [ ]

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

=

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

−

⋅

⎥

⎥

⎥

⎦

⎤

⎢

⎢

⎢

⎣

⎡

=

⋅

=

1

5

4

1

3

10

1

3

2

1

0

2

0

1

0

0

0

2

1

5

3

1

3

6

1

3

2

ABC

ABC

_t

T

Exercício de aplicação (2) - Resolução

• Representação geométrica:

A

2 5 4 3

y

C

_t t

B

t

Exercício proposto

• Indique qual a sequência de transformações necessárias para transformar o triângulo [ABC] em [A’B’C’] :

– Calcule a matriz concatenada.

– Obtenha a matriz de coordenadas final – Represente geometricamente.

[

ABC

]

=

[

A' B' C'

]

⎡

⎣

⎢

⎢

⎢

⎤

⎦

⎥

⎥

⎥

=

−

−

−

⎡

⎣

⎢

⎢

⎢

⎤

⎦

⎥

⎥

⎥

1 1

3 1

2 3

2

2

2

4

4

3

Exercícios

ATENÇÃO!

Multiplicação à esquerda! (Matrizes transpostas)

Exercícios

Exercícios

ATENÇÃO!

Transformações Geométricas em 3D

Matrizes de Escala e Translação em 3D

Escala

Translação

[ ]

0

0 0

0

0 0

0

0

0

0

0

0 1

x y T z

S

S

M

S

⎡

⎤

⎢

⎥

⎢

⎥

=

⎢

⎥

⎢

⎥

⎣

⎦

[ ]

1

0

0 0

0

1

0 0

0

0

1 0

1

T x y z

M

V

V

V

⎡

⎤

⎢

⎥

⎢

⎥

=

⎢

⎥

⎢

⎥

⎣

⎦

Matrizes de Rotação em 3D

Rotação de α em torno de XX

[ ]

( )

_{( )}

( )

_{( )}

1 0 0 0 0 cos sin 0 0 sin cos 0 0 0 0 1 T M α α α α ⎡ ⎤ ⎢ ⎥ ⎢ ⎥ = − ⎢ ⎥ ⎢ ⎥ ⎣ ⎦

Rotação

de β

em torno de YY

[ ]

( )

( )

cos 0 sin 0 0 1 0 0 M β − β ⎡ ⎤ ⎢ ⎥ ⎢ ⎥ =

Rotação de γ em torno de ZZ

[ ]

( )

( )

( )

( )

cos sin 0 0 sin cos 0 0 0 0 1 0 0 0 0 1 T M γ γ γ γ ⎡ ⎤ ⎢₋ ⎥ ⎢ ⎥ = ⎢ ⎥ ⎢ ⎥ ⎣ ⎦

Bibliografia

• Rogers, David (1998), “Mathematical Elements for Computer Graphics”, McGraw-Hill.