Computer Graphics

Chapter 5
Geometric Transformations
f

Somsak Walairacht, Computer Engineering, KMITL 1

 Outline
 Basic Two-Dimensional
Two Dimensional Geometric Transformations
 Matrix Representations and Homogeneous
Coordinates
 Inverse Transformations
 Two-Dimensional
Two Dimensional Composite Transformations
 Other Two-Dimensional Transformations
 Raster Methods for Geometric Transformations
 OpenGL Raster Transformations
 Transformations between Two
Two-Dimensional
Dimensional
Coordinate Systems

Computer Graphics 2
 Outline (2)
( )
 Geometric Transformations in Three
Three-Dimensional
Dimensional
Space
 Translation
 Rotation
 Scaling
 Composite Three-Dimensional Transformations
 Other Three-Dimensional Transformations
 Transformations between Three-Dimensional
Coordinate Systems
 Affine Transformations

Computer Graphics 3
 Introduction
 Operations that are applied to the geometric
description of an object to change its position,
orientation, or size are called geometric
transformations
 Sometimes geometric-transformation operations are
also referred to as modeling transformations
 A distinction between the two
 Modeling transformations are used to construct a scene or to
give the
h hierarchical
h h l description
d off a complex
l object
b that
h is
composed of several parts
 Geometric transformations describe how objects
j might
g move
around in a scene during an animation sequence or simply
to view them from another angle

Computer Graphics 4
 Basic Two-Dimensional
Two Dimensional
Geometric
Geo e Transformations
a so a o s
 Available in all graphics packages are
 Translation
 Rotation
 S li
Scaling
 Other useful transformation routines are
 Reflection
 Shearing

Computer Graphics 5
 Two-Dimensional
o e s o a Translation
a sa o
 To translate a two-dimensional p position,, we add translation
distances tx and ty to the original coordinates (x, y) to obtain the
new coordinate position (x’, y’)

 T
Translation
l ti equations
ti in
i the
th matrix
ti

 Translation is a rigid-body transformation that moves objects

without deformation
การทาใหผดรู
ํใ ้ ิ ป
Computer Graphics 6
 Polygon
yg Translation
 A polygon is translated similarly
 Adding a translation vector to the coordinate
position of each vertex and then regenerate
the polygon using the new set of vertex
coordinates

Computer Graphics 7
 Two-Dimensional Rotation
 A rotation transformation is generated by specifying a
rotation axis and a rotation angle
 Parameters are the rotation angle θ and a position
( r, yr) called
(x ll d the
th rotation
t ti point
i t (or
( pivot
i t point),
i t) จุดหมุน
about which the object is to be rotated
 A positive value for the angle θ defines a
counterclockwise rotation about the pivot point
ทวนเข็มนาฬิกา

Computer Graphics 8
 Two-Dimensional Rotation (2)
( )
 Let r is the constant distance of the point
from the origin, angle  is the original angular
position of the point
p p from the horizontal,, and
θ is the rotation angle

Computer Graphics 9
 Rotation about Arbitraryy Point
 Transformation equations for rotation of a point
about any specified rotation position (xr, yr)

 Rotations are rigid body transformations that move

objects without deformation
Computer Graphics 10
 Two-Dimensional Scaling
g
 A simple
p two-dimensional scaling g operation
p is performed
p byy
multiplying object positions (x, y) by scaling factors sx and sy to
produce the transformed coordinates (x’, y’)

 I matrix
In t i format,
f t where
h S iis a 2x2
2 2 scaling
li matrix
ti

Computer Graphics 11
 Scaling
g byy a Fixed Point
 Coordinates for the fixed p
point,, (x
( f, yf ), are often chosen at
some object position, such as its centroid
 Objects are now resized by scaling the distances between object
points and the fixed point

where the additive terms xf(1−sx) and

yf(1−s
(1 sy) are constants for all points in the object

Computer Graphics 12
 Matrix Representations and
Homogeneous
o oge eous Coo
Coordinates
d a es
 Many graphics applications involve sequences
of geometric transformations
 An animation might require an object to be
translated and rotated at each increment of the
motion
i
 The viewing transformations involve sequences of
translations and rotations to take us from the
original scene specification to the display on an
output device
d

Computer Graphics 13
 Matrix Representations and
Homogeneous
o oge eous Coo
Coordinates
d a es

 Matrix M1 is a 2x2 array containing multiplicative

factors, and M2 is a two-element
two element column matrix (2x1
matrix) containing translational terms
 Multiplicative
p and translational terms can be
combined into a single matrix if we expand the
representations to 3x3
 A three-element representation (xh, yh, h), called
homogeneous coordinates, where the homogeneous
parameter
t h iis a nonzero value
l such h that
th t

Computer Graphics 14
 Matrix Representations and
Homogeneous
o oge eous Coo
Coordinates
d a es
 Two-Dimensional
Two Dimensional Translation Matrix

 Rotation Matrix

 Scaling Matrix

Computer Graphics 15
 Inverse
e se Transformations
a so a o s
 Inverse translation matrix
 Translate in the opposite direction

 Inverse rotation matrix

 Rotate in the clockwise direction

 Inverse scaling matrix

Computer Graphics 16
 Two Dimensional Composite
Two-Dimensional
Transformations
a so a o s
 Forming products of transformation matrices is often
referred to as a concatenation, or composition, of
matrices
 We do premultiply the column matrix by the matrices
representing any transformation sequence
 Since many positions in a scene are typically
transformed by the same sequence, it is more
efficient
ffi i t to
t first
fi t multiply
lti l the
th transformation
t f ti matrices
ti
to form a single composite matrix

Computer Graphics 17
 Composite Two-Dimensional
Two Dimensional
Translations
 If two successive translation vectors ((t1x, t1y) and (t
( 2x, t2y) are
applied to a 2-D coordinate position P, the final transformed
location P’ is

 The composite transformation matrix for this sequence of

translations is

Computer Graphics 18
 Composite Two-Dimensional
Two Dimensional
Rotations
 Two successive rotations applied to a point P

 We can verify that two successive rotations are

additive:

 The composition matrix

Computer Graphics 19
 Composite Two-Dimensional
Two Dimensional
Scaling
g
 For two successive scaling operations in
2-D produces the following composite
scaling matrix

Computer Graphics 20
 General Two
Two-Dimensional
Dimensional
Pivot-Point Rotation
 Graphics package provides only a rotate
function with respect to the coordinate
origin
g
 To generate a 2-D rotation about any other
pivot point
p p (x
( r, yr), follows the sequence
q of
translate-rotate-translate operations
1. Translate the object so that the pivot-point
position is movedd to the
h coordinate
d origin
2. Rotate the object about the coordinate origin
3. Translate
T l t th
the object
bj t so ththatt th
the pivot
i t point
i t iis
returned to its original position

Computer Graphics 21
 General Two
Two-Dimensional
Dimensional
Pivot-Point Rotation (2)
( )

Computer Graphics 22
 General Two
Two-Dimensional
Dimensional
Fixed-Point Scaling
g
1. Translate the object
j so that the fixed point
p coincides with the
coordinate origin
2. Scale the object with respect to the coordinate origin
3
3. Use the inverse of the translation in step (1) to return the
object to its original position

Computer Graphics 23
 General Two
Two-Dimensional
Dimensional
Scaling
g Directions
 To accomplish the scaling without changing the
orientation of the object
1. Performs a rotation so that the directions for s1 and s2
coincide with the x and y axes
2. Scaling transformation S(s1, s2) is applied
3. An opposite rotation to return points to their original
orientations
i t ti

Computer Graphics 24
 Example of Scaling
Transformation
 Turn a unit square into a parallelogram by stretching
it along the diagonal from (0, 0) to (1, 1)
 Rotate the diagonal
g onto the y axis using
g θ = 45
 Double its length with the scaling values s1=1 and s2=2
 Rotate again to return the diagonal to its original orientation

Computer Graphics 25
 Matrix Concatenation
Properties
p
 Multiplication
p of matrices is associative

 Depending upon the order in which the transformations

 Premultiplying, concatenated transformations are applied from right to left
 Postmultiplying, concatenated transformations are applied from left to right

 Premultiplying
 V’ = [M1 * M2 * M3] * V

 Postmultiplying
 V’T = VT * [M3 * M2 * M1]T

Computer Graphics 26
 Matrix Concatenation
Properties
p (2)
( )
 Transformation p
products mayy not be commutative
 M2  M1 is not equal to M1  M2
 Be careful about the order to translate and rotate an object

 Some special cases the multiplication of transformation matrices

is commutative
 Two successive rotations g
give the same final position
p

Computer Graphics 27
 General Two-Dimensional Composite
Transformations
f and
dCComputationall
Efficiencyy

 From ((5.41),
), it requires
q 9 multiplications
p and 6
additions
 Actually, only 4 multiplications and 4 additions

 Once matrix is concatenated

concatenated, it is maximum number of
computations required
 Without concatenation, individual transformations would be
applied one at a time,
time and the number of calculations could
be significantly increased

Computer Graphics 28
 Computational
p Efficiencyy (2)
( )
 Rotation calculations require trigonometric
evaluations and several multiplications
 Computational efficiency can become an important
consideration in rotation transformations
 For small enough
g angles
g (less
( than 10),
), cosθ is
approximately 1.0 and sinθ has a value very close to
the value of θ in radians

Computer Graphics 29
 Computational
p Efficiencyy (3)
( )
 Composite transformations often
involve inverse matrices
 Operations are much simpler than direct
inverse matrix calculations
 Inverse translation matrix is obtained by
changing the signs of the translation
distances
 I
Inverse rotation
t ti matrix
t i iis obtained
bt i d by
b
performing a matrix transpose
Computer Graphics 30
 Two Dimensional Rigid
Two-Dimensional Rigid-Body
Body
Transformation
 All angles and distances between coordinate
positions are unchanged by the
transformation
 Upper-left 2x2 submatrix is an orthogonal
matrix
 Two row vectors (rxx, rxy) and (ryx, ryy) (or the two
col mn vectors)
column ecto s) fo
form
m an orthogonal
o thogonal set of unit
nit
vectors
 Set of vectors is also referred to as an
orthonormal vector set

Computer Graphics 31
 Two Dimensional Rigid
Two-Dimensional Rigid-Body
Body
Transformation Slide #22

 Each vector has unit length

 Their dot product is 0

 If these unit vectors are transformed by the rotation sub-matrix, then

 Example,

Computer Graphics 32
 Constructing Two
Two-Dimensional
Dimensional
Rotation Matrices
 The orthogonal
g property
p p y of rotation matrices is useful for
constructing the matrix when we know the final orientation of
an object
 In modeling application, we can obtain the transformation
matrix within object’s co-or system when knowing its orientation
within overall word co-or system

Computer Graphics 33
 Other Two
Two-Dimensional
Dimensional
Transformations
a so a o s
 Reflection
 Shear

Computer Graphics 34
 Reflection
 Reflection about the line  A reflection about the
y = 0 (the x axis) is line x = 0 (the y axis)
accomplished with the flips x coordinates while
transformation matrix keeping y coordinates
the same

Computer Graphics 35
 Reflection (2)
( )
 Reflection relative to  Reflection axis as the
the coordinate origin diagonal line y = x

Computer Graphics 36
 Shear
 A transformation that distorts the shape of an object
 The transformed shape appears as if the object were
composed of internal layers that had been caused to
slide
lid over eachh other
th
 An x-direction shear relative to the x axis

Computer Graphics 37
 Shear (2)
( )
 xx-direction
direction shears relative to other reference lines

 y-direction shear relative to the line x = xref

Computer Graphics 38
 Raster Methods for Geometric
Transformations
a so a o s
 All bit settings in the rectangular area shown are copied as a block into
another
h part off theh frame
f buffer
b ff

 Rotate a two-dimensional object or pattern 90

90 counterclockwise by
reversing the pixel values in each row of the array, then interchanging
rows and columns

Computer Graphics 39
 Raster Methods for Geometric
Transformations
a s o a o s ((2))
 For array rotations that are not multiples of
90, we need to do some extra processing
 Similar methods to scale a block of pixels

Computer Graphics 40
 Transformations between Two-
Dimensional Coordinate Systems
 Computer-graphics
p g p applications
pp involve coordinate
transformations from one reference frame to another during
various stages of scene processing
 To transform object descriptions from xy co-or
co or to x’y’
x y co
co-or
or
1. Translate so that the origin (x0, y0) of the x’y’ system is moved to
the origin (0, 0) of the xy system
2. Rotate the x’
x axis onto the x axis

Computer Graphics 41
 Transformations between 22-D
D
Coordinate
Coo d a e Systems
Sys e s ((2))
 Alternative method
 Specify a vector V that indicates the direction for the
positive y’ axis
 Obtain the unit vector u along the x’ axis by applying
a 90 clockwise rotation to vector v
 Rotation mat
matrix
i could
co ld be expressed
e p essed as elements of a
set of orthonormal vectors

Computer Graphics 42
 Geometric Transformations in
Three-Dimensional
ee e s o a Spa
Space
e
 A position PP=(x,
(x, y, z) in 3
3-D
D is translated to a
location P’=(x’, y’, z’) by adding translation distances
tx, ty, and tz

Computer Graphics 43
 3-Dimensional Rotation

 z-axis
i rotation
i

cos   sin  0 0
 0 0
 sin  cos 
 0 0 1 0
 
 0 0 0 1

Computer Graphics 44
 3-Dimensional Rotation (2)
( )
 Transformation equations for rotations about the
other two coordinate axes can be obtained with a
cyclic permutation of the coordinate parameters x, y,
and z
xyzx

Computer Graphics 45
 3-Dimensional Rotation (3)
( )
 xx-axis
axis rotation  yy-axis
axis rotation

1 0 0 0
0 cos   cos  0 sin  0
  sin  0  0 1 0 0
0 sin  
cos  0  sin  0 cos  0
   
0 0 0 1
 0 0 0 1

Computer Graphics 46
 Composite Three-Dimensional
Three Dimensional
Transformations
a so a o s
 A rotation matrix for any axis that does not
coincide with a coordinate axis
1. Translate the object so that the rotation axis
coincides with the parallel coordinate axis
2. Perform the specified rotation about that axis
3. Translate the object
j so that the rotation axis is
moved back to its original position

Computer Graphics 47
 Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s ((2))
 A coordinate position P is transformed with the
sequence
where

Computer Graphics 48
 Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s (3)
 Rotate about an axis that is not parallel to one of
the coordinate axes
 Transformation requires 5 steps
1. Translate the object so that the rotation axis passes
through the coordinate origin
2. Rotate the object so that the axis of rotation coincides with
one of the coordinate axes
3. Perform the specified rotation about the selected coordinate
axis
4. Apply inverse rotations to bring the rotation axis back to its
original orientation
5
5. Apply the inverse translation to bring the rotation axis back
to its original spatial position

Computer Graphics 49
 Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s ((4))

Computer Graphics 50
 Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s (5)
 The components
p of the rotation-axis vector

 The unit rotation-axis vector u

 Move the point P1 to the origin

 x-axis rotation gets u into the xz plane

 yy-axis
axis rotation swings u around to the z axis
Computer Graphics 51
 Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s (6)
 Rotate around the x axis to get u into
the xz plane

|uz|=1, |u’|=d
 Rotation matrix
1 0 0 0
0 cos   sin  0

0 sin  cos  0
 
0 0 0 1

Computer Graphics 52
 Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s ((7))
 Resulting from the rotation about
x axis is a vector labeled u’’

 Rotation angle β

 The transformation matrix for rotation of u’’

about the y axis is
 cos  0 sin  0
 0 1 0 0

 sin  0 cos  0
 
 0 0 0 1
Computer Graphics 53
 Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s (8)
 The rotation axis is aligned with the positive z axis
 Apply the specified rotation angle θ

 To complete the required rotation about the given

axis we need to transform the rotation axis back to
axis,
its original position

Computer Graphics 54
 Quaternion Methods for
Three-Dimensional Rotations
 A more efficient method
 Require less storage space than 4x4 matrices
 Important in animations, which often require complicated motion
sequences
q and motion interpolations
p between two given
g positions
p
of an object
q=(a,b,c)
MR() = Rx-1() Ry-1() Rz() Ry() Rx()

Computer Graphics 55
 ควอเทอเนียน
 ควอเทอเนยนทแทนการหมุ
ควอเทอเนี
ยนทีแ ่ ทนการหมนเป็
นเปนมุ ม 
นมม
รอบแกน (x, y, z) คือ

   
cos ; x sin , y sin , z sin
2 2 2 2

 ระวังว่า (x, y, z) ต ้องเป็ นเวกเตอร์หนึง่ หน่วย

Computer Graphics 56
 ตัวอย่าง
 จงหาควอเทอเนยนทแทนการหมุ
จงหาควอเทอเนียนทีแ
่ ทนการหมนเป็
นเปนมุ
นมม
ม 60 องศา
รอบแกน (1,1,1)
 เวกเตอร์หนึง่ หน่วยของแกนคือ 1 3 ,1 3 ,1 3 
 คํานวณค่า cos และ sin
cos 30  3 2 , sin 30  1 2
 และจะได ้ว่าควอเทอเนียนคือ
3 1 1 1
; , ,
2 2 3 2 3 2 3
Computer Graphics 57
 ตัวอย่าง
 ควอเทอเนียนต่อไปนีแ
ควอเทอเนยนตอไปนแทนการหมุ
้ ทนการหมนกี
นกองศา
อ ่ งศา รอบแกนอะไร?
1 6 6
;0, ,
2 4 4

 1
 เราได ้ว่า cos   sin 60
2 2
 ฉะนน
ฉะนั ้   120
น
 แกนทีห ่ มุนรอบคือ

1  6 6 2 6 6  2 2
 0, ,   0, ,    0, , 
sin 60  4 4 
 3  4 4   2 2 
  

Computer Graphics 58
 Other Three-Dimensional
Three Dimensional
Transformations
a so a o s
 Scaling

Computer Graphics 59
 Other Three-Dimensional
Three Dimensional
Transformations
a s o a o s ((2))
 Reflection

 Shear

Computer Graphics 60
 Transformations between Three-
Dimensional Coordinate Systems
 An xx’y’z’
y z system is defined with respect to an xyz
system
 To transfer the xyz coordinate descriptions to the
x’y’z’
’ ’ ’ system
t
 Translation that brings the x’y’z’ coordinate origin to the xyz
o g
origin
 A sequence of rotations that align corresponding coordinate
axes
 A scaling transformation may also be necessary

T(-x0, -y0, -z0)

The composition matrix is RT

RT
Computer Graphics 61
 Two main classes of
Transformations
a so a o s
การแปลงสัมพรรค
 Affine transformations can be represented
by a matrix
 A sett off affine
ffi transformations
t f ti can b
be
combined into a single overall affine
transformation
 Structure deforming transformations are
nonlinear, and cannot be represented by a
matrix
 Ex. tapering, twisting, bending

Computer Graphics 62
 Affine
e Transformations
a so a o s
 An affine transformation is a form of coordinate transformation

 An affine transformation preserves angles and lengths

 Parallel lines are transformed into parallel lines and finite points
map to finite points
 Examples
 Translation, rotation, scaling, reflection, and shear
 C
Conversion
i off coordinate
di descriptions
d i i from
f one reference
f system to
another

Computer Graphics 63
 Affine Transformations
 To represent
p affine transformations with matrices,, we must use
homogeneous coordinates
 a 2-vector (x, y) as a 3-vector (x, y, 1), and similarly for higher
dimensions

 Translation can be expressed with matrix multiplication

 The functional form x' = x + tx; y' = y + ty

 Any linear transformation can be represented by a g

general
transformation
f matrix
 Translation can be seamlessly intermixed with all other types of
transformations

Computer Graphics 64
 OpenGL Geometric
Geometric-
Transformation
a s o a o Functions
u o s
 Basic OpenGL Geometric Transformations
 glTranslate* (tx, ty, tz);
 glTranslatef (25.0,
g ( , -10.0,, 0.0);
);
 glRotate* (theta, vx, vy, vz);
 glRotatef (90.0, 0.0, 0.0, 1.0);
 glScale* (sx, sy, sz);
 glScalef (2.0, -3.0, 1.0);

 OpenGL Matrix Operations

 glMatrixMode
glMat i Mode (GL_MODELVIEW);
GL MODELVIEW
 glMatrixMode (GL_PROJECTION);

Computer Graphics 65
 End of Chapter
p 5

Computer Graphics 66