Scribd
Upload
4 views27 pages

L8 Composite2DTransformations

The document discusses composite 2D transformations using 2x2 and 3x3 matrices, including rotation, scaling, shearing, and translation. It emphasizes the importance of linear transformations and their properties, as well as the use of homogeneous coordinates for representing translations. Additionally, it covers the order of matrix operations for composite transformations and provides examples of matrix composition in code.

Uploaded by

kwllaSa21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views27 pages

L8 Composite2DTransformations

The document discusses composite 2D transformations using 2x2 and 3x3 matrices, including rotation, scaling, shearing, and translation. It emphasizes the importance of linear transformations and their properties, as well as the use of homogeneous coordinates for representing translations. Additionally, it covers the order of matrix operations for composite transformations and provides examples of matrix composition in code.

Uploaded by

kwllaSa21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

1

COMPOSITE 2D
TRANSFORMATIONS
Lecture ITSW4111 : Computer
What type of transformations can be
modeled using 2x2 matrix?

Rotate around (0,0)


 x '  cos   sin   x 
x' cos  * x  sin  * y  y '  sin  cos    y 
y ' sin  * x  cos  * y     

Scale about (0,0)


x ' s x * x  x'  ss 0   x
y ' s y * y  y '  0 
s y   y 
  
2D Shear
x '  x  shx * y  x '  1 shx   x 
y ' sh y * x  y  y '  sh 1   y 
   y
What type of transformations can be
modeled using 2x2 matrix?

2D Translation?
x'  x  t x
NO!
y'  y  t y

Only linear 2D transformations


can be represented with a 2x2 matrix
Linear Transformations
 Linear transformations are combinations of …
 Scale,
 Rotation,  x'  a b   x 
 y '  c d   y 
 Shear     

 Properties of linear transformations:


 Satisfies: T ( s p  s p ) s T (p )  s T (p )
1 1 2 2 1 1 2 2
 Origin maps to origin
 Lines map to lines
 Parallel lines remain parallel
 Ratios are preserved
 Closed under composition
Matrix Representation
5
All transformations can be expressed in the following
general Matrix Form:
Where:
 P and P′ are column vectors for the coordinate

positions.
 Matrix M is a 2 by 2 array containing
1
multiplicative factors.
 Matrix M is a 2-element column matrix, containing
2
translational terms factors (translation).
But what we want is a more are a convenient and
efficient way to represent a sequence of
transformations!
We want to combine the multiplicative and translational
Homogeneous
Coordinates
 Question: How can we represent
translation asx 'a 3x3
x  t matrix?
x

y'  y  t y

 Answer: Use homogenous coordinates to


represent a 2D transformation with a 3D
Matrix: 1 0 tx 
 
Translation  0 1 t y 
0 0 1 
 
Homogenous Coordinate
7
System
In a homogenous coordinate system, we
represent each cartesian coordinate position
(x,y) with a homogeneous coordinate triple
(xh ,yh ,zh) where x = xh/h , y = yh/h.
Thus, a general homogeneous coordinate

representation can also be written as (xh,yh,h)


h can be selected to be any nonzero value.

Thus, there is an infinite number of equivalent

homogeneous representations for each


coordinate point (x,y) .  x
x  Homogenous
A convenient choice is h=1 . s  
Coordinate
 y          y
   1 
Translation Matrix
Homogenous
So for the translation, we Coordinate
have the following
representation.  x '  1 0 t x   x   x  t x 
 y '  0 1 t   y   y  t 
   y   y

 1   0 0 1   1   1 

tx = 2
ty = 1
Basic 2D Transformations with
Homogenous Coordinates

 Basic 2D transformations as 3x3


matrices  x '  s 0 x 0  x 
 x '  1 0 t x   x   y '  0 sy 0  y 
 y '  0 1 t   y    
   y   1   0 0 1  1 
 1   0 0 1   1 

Translate Scale

 x'  cos   sin  0  x   x '  1 shx 0  x 


 y '  sin  0  y   y '  sh
   cos 
   y 1 0  y 
 1   0 0 1  1   1   0 0 1  1 

Rotate Shear
Translation
10

T(tx,ty) is a 3x3 translation matrix. The


inverse of T is obtained by replacing tx by –tx,
and ty by -ty
Rotation
11

The inverse of the rotation matrix is


obtained by replacing the rotation angle by
-.
Scaling
12

 The inverse of the scaling matrix is obtained


by replacing the scaling parameters sx and sy
with their multiplicative inverses 1/sx and 1/sy
Composite
13
Transformations
 With the matrix representations, we can set
up matrix for any sequence of transformations
as a composite transformation matrix by
calculating the matrix product of the
individual transformations.
 Forming products of transformation matrices
is often referred to as a concatenation, or
composition of matrices.
Example of Matrix
Composition
 We want to scale, rotate and translate.
 x'    1 0 tx   cos   sin  0  sx 0 0   x 
 y '    0 1 ty   sin  cos  0  0 sy 0   y 
 w'   0 0 1   0 0     
1  0 0 1   w

p’ = T(tx,ty) R(Q) S(sx,sy) p

p’ = (T * (R * (S*p) ) )
p’ = (T*R*S) * p
Be aware: order of transformations
matters. Matrix multiplication is not
commutative.
How to perform Matrix Composition?

 After correctly ordering the matrices,


multiply matrices together.
 What results is one matrix – store it
 Multiply this matrix by the vector of each
vertex.
 All vertices easily transformed with one
matrix multiply
16
17
18
19
20
Multiplication Order – Wrong
Way
What if we want to rotate a line segment by 45
degrees?
 Our line is defined by two endpoints

 Applying a rotation of 45 degrees, R(45), affects

both points
 We could try to translate both endpoints to

return endpoint a to its original position, but by


how much?
a
a a

Correct T(-3) R(45) T(3)


Wrong R(45)
Multiplication Order -
Correct
Isolate endpoint a from rotation effects

a

 First translate line so a is at origin: T (-3)


 Then rotate line 45 degrees: R(45)
a
 Then translate back so a is where it was: T(3)

 1 0 3  cos(45)  sin(45) 0  1 0  3  a x   a ' x  a


 0 1 0  sin(45) cos(45) 0  0 1 0   a   a ' 
    y  y
 0 0 1  0 0 1  0 0 1   1   1 
a
23
24
Order of transformations
Suppose you want to perform transformations in the following
order: 1. Scale 2. Rotate 3. Translate
Recall concatenation of matrix multiplications:
P' = TRSP
As we create each new transformation matrix and multiply
with the ctm we need to do so in the correct order to create the
final matrix, M = TRS
For example, start with the identity matrix (I):
1. Multiply by translate() M = I*T
2. Multiply by rotate() M = I*T*R
3. Multiply by scale() M = I*T*R*S
4. Draw P P' = MP =
TRSP
Example Code
var mvMatrix = [ ];

mvMatrix = translate(0.0, 0.2, 0.0); //second


mvMatrix = mult(mvMatrix, scalem(2.0, 2.0, 1.0)); //first
gl.uniformMatrix4fv(modelView, false, flatten(mvMatrix) );
gl.drawArrays(gl.LINE_LOOP, 0, 3);

mvMatrix = scalem(2.0, 2.0, 1.0); //last


mvMatrix = mult(mvMatrix,
translate(-0.1*Math.sqrt(3.0), 0.0, 0.0)); //third
mvMatrix = mult(mvMatrix, rotate(-90.0, 0.0, 0.0, 1.0)); //second
mvMatrix = mult(mvMatrix, scalem(1.0, 2.0, 1.0)); //first
gl.uniformMatrix4fv(modelView, false, flatten(mvMatrix) );
gl.drawArrays(gl.LINE_LOOP, 0, 3);
References
27

 Computer Graphics with OpenGL, Hearn


and Baker, Pearson, Fourth Edition.

You might also like