Transformações Geométricas 2D
GBC204 – Computação Gráfica Prof. Dr. rer. nat. Daniel Duarte Abdala
1
Objetivos das Transformações
Possibilitar a modificação da forma e posição de objetos;
De fato, transformações afins estão entre as ferramentas matemáticas mais fundamentais em computação gráfica;
Um uso claro de transformações geométricas é simplificar o processo de modelagem geométrica:
Muitos modelos tridimensionais são altamente simétricos. A simetria pode ser explorada com o auxílio de transformações para simplificar o processo de modelagem. Modela-se uma parte e se produz a contra-parte simétrica simplesmente por transformações geométricas;
2
Objetivos das Transformações
Um segundo uso de transformações é encontrado em animações. Pense em uma animação simples em que um carro se movimenta por uma pista circular. O modelo (carro e pista) em si não muda. Apenas a posição do carro ao longo do tempo. Tal pode ser realizado pela simples translação do carro;
Um terceiro, não óbvio, uso de transformações geométricas refere-se a renderização. Após um modelo 3D ter sido criado se faz necessário que tal seja transposto para uma superfície 2D. Para tal são utilizadas transformações de perspectiva.
Viewport– Uma janela em uma tela, um quadro de um vídeo ou uma versão em papel impresso.
3
Transformações em 2D
O plano-xy (plano do modelo), denotado por ℝ
2= ℝ⨯ℝ refere-se ao plano cartesiano usual consistindo de pontos (x, y):
x = 〈 x
1, x
2〉 onde x
1,x
2∊ ℝ , é um ponto no plano-xy 0 é o ponto de origem 0 = 〈 0,0 〉
x+y =〈x
1+y
1,x
2+y
2〉 x-y =〈x
1-y
1,x
2-y
2〉 αx =〈αx
1, αx
1〉, α ∊ ℝ
DEF: Uma transformação em ℝ
2é um mapeamento A: ℝ
2↦ ℝ
2no qual cada ponto x ∊ ℝ
2é mapeado para um único ponto A(x), também em ℝ
2.
4
Transformações Lineares
DEF: Seja A uma transformação. A é uma transformação linear se as duas condições a seguir forem atendidas:
1. ∀α∈ ℝ ⋀ ∀
x
∈ ℝ2, A(αx) = αA(x)
2. ∀x,y
∈ ℝ2= A(x) + A(y)
Exemplos:
1.
A
1:〈
x, y〉↦ 〈-y, x〉 2.A
2:〈
x, y〉↦ 〈x, 2y〉 3.A
3:〈
x, y〉↦ 〈x+y, y〉4.
A
4:〈
x, y〉↦ 〈x,-y〉5.
A
5:〈x, y〉
↦ 〈-x, -y〉Representação Matricial de Transformações Lineares
A composição de diversas transformações é comum em aplicações de CG;
A computação de tais transformações pode ser problemática e ineficiente;
Felizmente, é possível expressar tais transformações via Álgebra linear, tornando sua computação muito mais eficiente (e.g. Usando suporte a múltiplicação matricial em hardware - GPUs):
Os eixos canônicos x, e y podem ser expressados pelos vetores:
i
=〈
1, 0〉 eixo-x j=〈
0, 1〉 eixo-yRepresentação Matricial de Transformações Lineares
Qualquer vetor x = 〈 x
1, x
2〉 pode ser expresso de maneira única como uma combinação linear de i e j;
x =〈x
1i, x
2j 〉
Seja A uma transformação linear. Seja u = 〈u
1, u
2〉=
A(i) e v = 〈v
1, v
2〉= A(j). Então, por linearidade,
∀ x ∈ ℝ
2,A(x) = A(x
1i,x
2j) = x
1A(i),x
2A(j)
= x
1u + x
2v
=〈u
1x
1+ u
1x
2, u
2x
1+ u
2x
2〉
7
Representação Matricial de Transformações Lineares
Seja M a matriz . Então,
Sendo assim, M é equivalente a A.
2 2
1 1
v u
v u
+
= +
=
2 2 1 2
2 1 1 1 2 1 2 2
1 1 2 1
x v x u
x v x u x x v u
v u x M x
8
Transformação Inversa
Considere a matriz de transformação M a seguir:
O inverso de M, ou seja M
-1pode ser computado como:
e
= 2 1
0 M 1
−
= −
=
−
−
a c
b d M d
c b M a
) ( det
1
1
1
det ( M ) = ad − bc
= −
= −
−1 2 1 2
0 1 1 1
0 2 2 1 2 1
0
1
1Ex:
9
Exemplo:
Considere a lista de pontos a seguir:
F = {〈0, 0〉, 〈0, 1〉, 〈0, -1〉, 〈1, 1〉, 〈1, 0〉}
Representando a letra “F”;
Aplicando a transformação linear obtêm-se:
Finalmente, os pontos transformados são:
F = {〈0, 0〉, 〈0, 2〉, 〈0, -2〉, 〈1, 3〉, 〈1, 1〉}
= 2 1
0 M 1
= +
=
2 1
1 2 1 2
1
2 2
1 0 1
x x
x x x x
M x
10
Graficamente...
x
y y
x
Transformações Rígidas
DEF: Transformações rígidas ou de corpo rígido. Não deformam os objetos. Ângulos e paralelismo são preservados:
distâncias entre pontos;
Ângulos entre linhas.
Três tipos:
Translação;
Rotação;
Espelhamento.
Translação
DEF: A transformação T
ué dita uma translação provido que exista um vetor u ∈ ℝ
2de modo que:
T
u(x) = x + u ≡ 〈x
1+u
1, x
2+u
2〉
A composição de duas translações T
ue T
v, denotada por T
u○ T
vé equivalente a:
T
u○ T
v= T
u(T
v(x))
= T
u(x+v)
= x + v + u
A transformação identidade, denotada por I pode ser definida por uma translação que não modifica a coordenada original:
I = T
0(x) = x + 0 , 0 = 〈 0, 0 〉
13
Translação
A transformação inversa, denotada por A
-1é aquela que composta com a transformação original, produz a transformação identidade
A
-1○ A = I, I = A(x) = x
A translação é um caso particular de uma classe mais genérica de transformações geométricas chamadas de transformações lineares;
14
Translação (Linear)
Em 2D uma translação traduz-se simplesmente no reposicionalmento, ou deslocamento de objetos nos eixos x e y.
+
= +
=
y x
t y y
t x x
' '
=
2 1
x P x
= ' ' '
2 1
x
P x
=
y x
t T t
T P P ' = +
15
Rotação
Pode se dar a partir da origem;
Pode se dar a partir de um ponto qualquer;
Θ – ângulo de rotação
〈x
r, y
r〉– ponto de rotação ou ponto pivotal
y
x
〈xr, yr〉 θ P
P’
+
=
−
=
θ θ
θ θ
cos sin '
sin cos '
y x y
y x x
−
= θ θ
θ θ
cos sin
sin
R cos P ' = R ⋅ P
Ângulos positivos são no sentido inverso do relógio!
16
Rotação
Pelas fórmulas de adição de seno e coseno y
x
〈x , y〉
θ
P P’〈x’, y’〉
α rcosα rcos(α+θ) rsin(α+θ)
+
= +
= +
=
−
=
−
= +
=
θ θ θ α θ α θ α
θ θ θ α θ α θ α
cos sin ) cos sin cos (sin ) sin(
'
sin cos ) sin sin cos (cos ) cos(
'
y x r
r y
y x r
r x
Exemplo
Rotacionar o triângulo
∆= {〈0, 0〉, 〈3, 0〉, 〈3, 2〉} em π/6 radianos (30o).
−
=
−
=
2 2 3 1
1 2 2 3 cos 6
sin 6 sin 6 cos 6
π π
π π R
=
−
=
0 0 0 0 2 2 3 1
12 2 3
1 1
y x
=
−
=
5 . 1 6 . 2 0 3 2 2 3 132 12
2 2
y x
=
−
=
2 . 3 6 . 1 2 3 2 2 3 132 12
3 3
y x
y
x
Composição de Rotações
Similar a composição de translações;
−
×
−
= α α
α α β β
β β
α
β
sin cos
sin cos cos sin
sin M cos
M
) (
αβ α
β
R R R
R o =
+
− +
−
−
= −
α β α β α β α β
α β α β α β α β
cos cos sin sin sin cos cos sin
cos sin sin cos sin sin cos cos
19
Composição de Rotações
Relembrando um pouco de trigonometria...
Trig
Trig –– Fórmulas de AdiçãoFórmulas de Adição
α β β α β
α ) sin cos sin cos
sin( + = +
β α β α β
α ) cos cos sin cos
cos( + = −
Conclusão: Rotações sucessivas, ou composição de rotações se resumem a rotação da soma dos ângulos!
+ +
+
−
= +
+
− +
−
−
−
) cos(
) sin(
) sin(
) cos(
cos cos sin sin sin cos cos sin
cos sin sin cos sin sin cos cos
β α β α
β α β α α β α β α β α β
α β α β α β α β
20
Reflexão
Em 2D, reflexões são computadas em relação a uma linha de referência:
Três opções: em relação ao eixo-x, eixo-y ou eixo arbitrário.
A(x) = 〈x, y〉 ↦ 〈-x, y〉
A(x) = 〈x, y〉 ↦ 〈x, -y〉
y
x
y
x
21
Reflexão
Reflexão em relação ao eixo x:
A(x) = 〈x, y〉 ↦ 〈-x, y〉
Reflexão em relação ao eixo y:
A(x) = 〈x, y〉 ↦ 〈x, -y〉
= −
1 0
0 1
= − 1 0
0 1
22
Reflexão em relação a uma linha arbitrária Múltiplos passos:
Rotacionar a linha de rotação para coincidir com os eixos x ou y;
Aplicar a reflexão canônica em relação ao eixo escolhido;
Rotacionar de volta (-α) para reposicionar a linha de reflexão ao seu lugar original;
y
x Ex:
S = {〈〈〈〈1, 0〉〉〉, 〈〉 〈〈〈4, 1〉〉〉, 〈〉 〈〈〈2, 2〉〉〉〉}
45
π4α =
o=
colinha ...
colinha ...
2 3 2 1 60 3
2 1 2 2 45 2
3 3 2 3 12 30
cos sin
o o o
α tg
Exemplo: Reflexão Arbitrária
Passo 1: Rotacionar a linha de reflexão:
−
=
2 1 2 1
2 1 2 1 R
α
= −
−
2 1 2 1
2 1 2 1 R
αS R R R S
A ( ) =
−α x α
×
× −
× −
−
=
y x
i S
i S
) (
) ( 2 1 2 1
2 1 2 1 1 0
0 1 2 1 2 1
2 1 2 1
×
× −
= −
y x
i S
i S
) (
) ( 2 1 2 1
2 1 2 1
2 1 2 1
2 1 2 1
Exemplo: Reflexão Arbitrária
25
×
=
×
− +
+
−
=
y x y
x
i S
i S i
S i S
) (
) ( 0 1
1 0 ) (
) ( 2 1 2 1 2 1 2 1
12 12 2 1 2 1
=
×
=
0 1 1 0 0 1
1 ) 0 1 S(
=
×
=
2 2 2 2 0 1
1 0 ) 2 S(
=
×
=
1 4 4 1 0 1
1 ) 0 3 S(
y
x
Transformações Afins
DEF: Uma transformação A é dita afim se ela puder ser expressa como uma composição de uma translação e uma transformação linear:
A = T
u○ B , ∃ u ∊ ℝ
2A(x) = B(x)+u
Como u=0 é uma possibilidade, fica claro que toda transformação linear é também afim. No entanto, nem toda transformação afim é linear. Em particular, se u≠0 A(x) = B(x)+u não é linear, pois não mapeia 0 ↦ 0.
26
Escalonamento
Duas possibilidades: aumento ou diminuição Zoon in, zoon out
Computado em relação ao centro do objeto k – fator de escalonamento
27
P M P A ( ) =
k
=
×
=
ky kx y x k k 0
0 Caso k>1 – aumento (zoon in) Caso 0<k<1 – diminuição (zoon out)
Também é possível escalonar em apenas um eixo, ou em porções distintas em cada eixo:
=
2 1
0 0 k M
kk
Escalonamento - Exemplo
28
y S = {〈〈〈〈1, 0〉〉〉〉, 〈〈〈〈3, 0〉〉〉, 〈〉 〈〈1, 2〉〈 〉〉,〉 〈〈〈〈3, 2〉〉〉〉}
k = 2
S M S A ( ) =
k
=
×
=
y i S
x i S y i S
x i S
) ( 2
) ( 2 ) (
) ( 2 0
0 2
=
×
=
0 2 0 1 2 0
0 2 ) 1 S(
x
=
×
=
0 6 0 3 2 0
0 ) 2 2 S(
=
×
=
4 2 2 1 2 0
0 ) 2 3 S(
=
×
=
4 6 2 3 2 0
0 ) 2 4 S(
Ecalonamento Centrado
1.
Encontrar o baricentro ou centro de massa do objeto;
2.
Transladar o objeto para a origem 0 = 〈 x, y 〉 ;
3.
Escalonar o objeto;
4.
Transladar de volta para o centro de massa;
n S S B
n
i
∑
i=
=1) (
=
=
∑
∑
=
=
n S S B
n S S B
n
i iy y
n
i ix x
1 1
) (
) (
B BS P P
A ( ) = − +
Escalonamento Centrado – exemplo
y
x
y
x
Escalonamento Centrado – exemplo
31
P = {〈〈〈1, 0〉〈 〉〉〉, 〈〈〈〈3, 0〉〉〉〉, 〈〈〈〈1, 2〉〉〉,〉 〈〈〈〈3, 2〉〉〉〉}
B
P −
P’ = {〈〈〈〈-1, -1〉〉〉〉, 〈〈〈〈1, -1〉〉〉〉, 〈〈〈〈-1, 1〉〉〉〉,〈〈1, 1〉〈〈 〉〉〉}
+ = +
= +
=
+ = +
= +
=
∑
∑
=
=
4 1 ) 2 2 0 0 ) (
(
4 2 ) 3 1 3 1 ) (
(
1 1
n S S B
n S S B
n
i iy y
n
i ix x
= 1 B 2
Escalonamento Centrado – exemplo
32
S = {〈〈〈〈0, -1〉〉〉〉, 〈〈〈〈4, -1〉〉〉〉, 〈〈〈〈0, 3〉〉〉,〉 〈〈〈〈4, 3〉〉〉〉}
= −
+
−
= −
+
−
× −
=
+
−
×
=
1 0 1 2 2 2 1 2 1 1 2 0
0 2 1 2 1 2 0 1 2 0
0 2 ) 1 S(
= −
+
= −
+
× −
=
+
−
×
=
1 4 1 2 2 2 1 2 1 1 2 0
0 2 1 2 1 2 0 3 2 0
0 ) 2 2 S(
=
+
=−
+
×−
=
+
−
×
=
3 0 1 2 2
2 1 2 1
1 2 0
0 2 1 2 1 2 2 1 2 0
0 ) 2 3 S(
=
+
=
+
×
=
+
−
×
=
3 4 1 2 2 2 1 2 1 1 2 0
0 2 1 2 1 2 2 3 2 0
0 ) 2 4 S(
Achatamento (shear)
33 y
x
y
x
P M P A ( ) =
s
+
=
×
=
y my x y x m 1 0 1
= +
×
=
y mx
x y x m 1
0 1
Transformações 2D em OpenGL
34
