2D Geometric Transformations

GraphicsLab@KoreaUniversity
cgvr.korea.ac.kr
2D Geometric
Transformations
CGVR
cgvr.korea.ac.kr
Contents
Definition & Motivation
2D Geometric Transformation
Translation
Rotation
Scaling
Matrix Representation
Homogeneous Coordinates
Matrix Composition
Composite Transformations
Pivot-Point Rotation
General Fixed-Point Scaling
Reflection and Shearing
Transformations Between Coordinate Systems
CGVR
cgvr.korea.ac.kr
Geometric Transformation
Definition
Translation, Rotation, Scaling

Motivation Why do we need geometric
transformations in CG?
As a viewing aid
As a modeling tool
As an image manipulation tool
CGVR
cgvr.korea.ac.kr
Example: 2D Geometric
Transformation
Modeling
Coordinates
World Coordinates
CGVR
cgvr.korea.ac.kr
Example: 2D Scaling
Modeling
Coordinates
World Coordinates
Scale(0.3, 0.3)
CGVR
cgvr.korea.ac.kr
Example: 2D Rotation
Modeling
Coordinates
Scale(0.3, 0.3)
Rotate(-90)
World Coordinates
CGVR
cgvr.korea.ac.kr
Example: 2D Translation
Modeling
Coordinates
Scale(0.3, 0.3)
Rotate(-90)
Translate(5, 3)
World Coordinates
CGVR
cgvr.korea.ac.kr
Transformation
Modeling
Coordinates
World Coordinates
Again?
CGVR
cgvr.korea.ac.kr
Transformation
Modeling
Coordinates
World Coordinates
Scale
Translate
Scale
Rotate
Translate
CGVR
cgvr.korea.ac.kr
Basic 2D Transformations
Translation

Scale

Rotation

Shear

tx x x + =
'
ty y y + =
'
sx x x =
'
sy y y =
'
sin y - cos x x =
'
cos y sin y y + =
'
y hx x x + =
'
x hy y y + =
'
CGVR
cgvr.korea.ac.kr
Translation

Scale

Rotation

Shear

tx x x + =
'
ty y y + =
'
sx x x =
'
sy y y =
'
sin y - cos x x =
'
cos y sin y y + =
'
y hx x x + =
'
x hy y y + =
'
Transformations
can be combined
(with simple algebra)
CGVR
cgvr.korea.ac.kr
Translation

Scale

Rotation

Shear

tx x x + =
'
ty y y + =
'
sx x x =
'
sy y y =
'
sin y - cos x x =
'
cos y sin y y + =
'
y hx x x + =
'
x hy y y + =
'
sy y
sx x x
=
'
= '
y
CGVR
cgvr.korea.ac.kr
) cos sy) (y sin sx) ((x y
) sin sy) (y cos sx) ((x x
u u
u u
+ =
'
= '
Translation

Scale

Rotation

Shear

tx x x + =
'
ty y y + =
'
sx x x =
'
sy y y =
'
sin y - cos x x =
'
cos y sin y y + =
'
y hx x x + =
'
x hy y y + =
'
CGVR
cgvr.korea.ac.kr
ty ) cos sy) (y sin sx) ((x y
tx ) sin sy) (y cos sx) ((x x
+ + =
'
+ = '
u u
u u
Translation

Scale

Rotation

Shear

tx x x + =
'
ty y y + =
'
sx x x =
'
sy y y =
'
sin y - cos x x =
'
cos y sin y y + =
'
y hx x x + =
'
x hy y y + =
'
CGVR
cgvr.korea.ac.kr
Translation

Scale

Rotation

Shear

tx x x + =
'
ty y y + =
'
sx x x =
'
sy y y =
'
sin y - cos x x =
'
cos y sin y y + =
'
y hx x x + =
'
x hy y y + =
'
ty ) cos sy) (y sin sx) ((x y
tx ) sin sy) (y cos sx) ((x x
+ + =
'
+ = '
u u
u u
CGVR
cgvr.korea.ac.kr
Represent a 2D Transformation by a Matrix

Apply the Transformation to a Point
(
=
(
'
'
y
x
d c
b a
y
x
dy cx y
by ax x
+ =
'
+ =
'
(
d c
b a
Transformation
Matrix
Point
CGVR
cgvr.korea.ac.kr
Transformations can be combined by matrix
multiplication

(
=
(
'
'
y
x
l k
j i
h g
f e
d c
b a
y
x
Matrices are a convenient and efficient way
to represent a sequence of transformations
Transformation
Matrix
CGVR
cgvr.korea.ac.kr
22 Matrices
What types of transformations can be
represented with a 22 matrix?
2D Identity

2D Scaling
y y
x x
=
'
=
'
y sy y
x sx x
=
'
=
'
(
=
(
'
'
y
x
y
x
1 0
0 1
(
=
(
'
'
y
x
sy
sx
y
x
0
0
CGVR
cgvr.korea.ac.kr
22 Matrices
2D Rotation

2D Shearing
(

=
(
'
'
y
x
y
x
u u
u u
cos sin
sin cos
(
=
(
'
'
y
x
shy
shx
y
x
1
1
y x y
y x x
+ =
'
=
'
u u
u u
cos sin
sin cos
y x shy y
y shx x x
+ =
'
+ =
'
CGVR
cgvr.korea.ac.kr
22 Matrices
2D Mirror over Y axis

2D Mirror over (0,0)
y y
x x
=
'
=
'
y y
x x
=
'
=
'
(
=
(
'
'
y
x
y
x
1 0
0 1
(
=
(
'
'
y
x
y
x
1 0
0 1
CGVR
cgvr.korea.ac.kr
22 Matrices
2D Translation
tx x x + =
'
ty y y + =
'
NO!!
Only linear 2D transformations
can be Represented with 2x2 matrix
CGVR
cgvr.korea.ac.kr
2D Translation
2D translation can be represented by a 33
matrix
Point represented with homogeneous coordinates
tx x x + =
'
ty y y + =
'
(
(
(
(
(
(
=
(
(
(
'
'
1 1 0 0
1 0
0 1
1
y
x
ty
tx
y
x
CGVR
cgvr.korea.ac.kr
Basic 2D transformations as 3x3 Matrices
(
(
(
(
(
(
=
(
(
(
'
'
1 1 0 0
1 0
0 1
1
y
x
ty
tx
y
x
(
(
(
(
(
(

=
(
(
(
'
'
1 1 0 0
0 cos sin
0 sin cos
1
y
x
y
x
u u
u u
(
(
(
(
(
(
=
(
(
(
'
'
1 1 0 0
0 0
0 0
1
y
x
sy
sx
y
x
(
(
(
(
(
(
=
(
(
(
'
'
1 1 0 0
0 1
0 1
1
y
x
shy
shx
y
x
Translate
Shear
Scale
Rotate
CGVR
cgvr.korea.ac.kr
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x, y, w) represents a point at location (x/w, y/w)
(x, y, 0) represents a point at infinity
(0, 0, 0) Is not allowed

1 2
1
2
x
y
(2, 1, 1) or (4, 2, 2) or (6, 3, 3)
Convenient Coordinate System to
Represent Many Useful Transformations
CGVR
cgvr.korea.ac.kr
Linear Transformations
Linear transformations are combinations of
Scale
Rotation
Shear, and
Mirror
Properties of linear transformations
Satisfies:
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
Closed under composition
) ( ) ( ) (
2 2 1 1 2 2 1 1
p T s p T s p s p s T + = +
(
(
(
(
(
(
=
(
(
(
'
'
'
w
y
x
d c
b a
w
y
x
1 0 0
0
0
CGVR
cgvr.korea.ac.kr
Affine Transformations
Affine transformations are combinations of
Linear transformations, and
Translations

Properties of affine transformations
Origin does not map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
(
(
(
(
(
(
=
(
(
(
'
'
'
w
y
x
f e d
c b a
w
y
x
1 0 0
CGVR
cgvr.korea.ac.kr
Projective Transformations
Projective transformations
Affine transformations, and
Projective warps

Properties of projective transformations
Origin does not map to origin
Lines map to lines
Parallel lines do not necessarily remain parallel
Ratios are not preserved
(
(
(
(
(
(
=
(
(
(
'
'
'
w
y
x
i h g
f e d
c b a
w
y
x
CGVR
cgvr.korea.ac.kr
Matrix Composition
Transformations can be combined by matrix
multiplication

Efficiency with premultiplication
Matrix multiplication is associative
(
(
(
|
|
|
.
|
\
|
(
(
(
(
(
(
(
(
(
=
(
(
(
'
'
'
w
y
x
1 0 0
0 sy 0
0 0 sx
1 0 0
0 cos in
0 sin - cos
1 0 0
1 0
0 1
s ty
tx
w
y
x
=
'
p
ty) T(tx, ) R(u
sy) S(sx,
p
p))) S ( R ( T ( p =
'
p S) R T ( p =
'
CGVR
cgvr.korea.ac.kr
Matrix Composition
Rotate by u around arbitrary point (a,b)

Scale by sx, sy around arbitrary point (a,b)

T(-a,-b) ) R( b) T(a, M =
T(-a,-b) sy) S(sx, b) T(a, M =
(a,b)
(a,b)
CGVR
cgvr.korea.ac.kr
Pivot-Point Rotation
(
(
(

+
=
(
(
(
(
(
(
(
(
(
1 0 0
sin ) cos 1 ( cos sin
sin ) cos 1 ( sin cos
1 0 0
1 0
0 1
1 0 0
0 cos sin
0 sin cos
1 0 0
1 0
0 1
u u u u
u u u u
u u
u u
r r
r r
r
r
r
r
x y
y x
y
x
y
x
( ) ( ) ( ) ( ) u u , , , ,
r r r r r r
y x R y x T R y x T =
Translate Rotate Translate
(x
r
,y
r
) (x
r
,y
r
) (x
r
,y
r
) (x
r
,y
r
)
CGVR
cgvr.korea.ac.kr
General Fixed-Point Scaling
(
(
(
=
(
(
(
(
(
(
(
(
(
1 0 0
) 1 ( 0
) 1 ( 0
1 0 0
1 0
0 1
1 0 0
0 0
0 0
1 0 0
1 0
0 1
y f y
x f x
f
f x
f
f
s y s
s x s
y
x
s
s
y
x
y
Translate Scale Translate
(x
f
,y
f
) (x
f
,y
f
) (x
f
,y
f
) (x
f
,y
f
)
( ) ( ) ( ) ( )
y x f f f f y x f f
s s y x S y x T s s S y x T , , , ,
, ,
=
CGVR
cgvr.korea.ac.kr
Reflection
Reflection with respect to the axis
x y xy()

(
(
(
1 0 0
0 1 0
0 0 1
(
(
(
1 0 0
0 1 0
0 0 1
(
(
(
1 0 0
0 1 0
0 0 1
y x
x
y 1
3 2
1
3 2
x
y
1
3 2
1
3 2
x
y
3
1
3 2
1
2
CGVR
cgvr.korea.ac.kr
Reflection with respect to a Line

Clockwise rotation of 45 Reflection about the x
axis Counterclockwise rotation of 45

Reflection
(
(
(
1 0 0
0 0 1
0 1 0
y=x
x
y 1
3 2
1
3 2
x
y
x
y
x
y
CGVR
cgvr.korea.ac.kr
Shear
Converted to a parallelogram

x = x + shx y, y = y

Transformed to a shifted parallelogram
(Y = Yref)

x = x + shx (y-yref), y = y
(
(
(
1 0 0
0 1 0
0 1
x
sh
(
(
(

1 0 0
0 1 0
1
ref x x
y sh sh
x (Shx=2)

(Shx=1/2, yref=-1)
x
y
x
y
x
y
x
y
(0,0) (1,0)
(1,1)
(0,1)
(0,0) (1,0)
(1,1)
(0,1)
(0,0) (1,0)
(3,1) (2,1)
(1/2,0)
(3/2,0)
(2,1)
(1,1)
(0,-1)
CGVR
cgvr.korea.ac.kr
Shear
Transformed to a shifted parallelogram
(X = Xref)

x = x, y = shy (x-xref) + y

(
(
(

1 0 0
1
0 0 1
ref y y
x sh sh

(Shy=1/2, xref=-1)
x
y
x
y
(-1,0)
(0,0) (1,0)
(1,1)
(0,1)
(0,1/2) (1,1)
(1,2)
(0,3/2)

2D Geometric Transformations

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

2D Geometric Transformations

Încărcat de

Drepturi de autor:

Formate disponibile

GraphicsLab@KoreaUniversity

S-ar putea să vă placă și