cg lect 11 2dtransformations
TRANSCRIPT
-
8/2/2019 CG Lect 11 2DTransformations
1/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
2D Transformations
Dr. Zahid Halim
-
8/2/2019 CG Lect 11 2DTransformations
2/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
DefinitionsDefinitionsA matrix is a rectangular array of elements (usuallynumbers) arranged in rows and columns enclosed inbrackets.
=
=
=
d
c
b
a
C B A
213
532042
20
4121
Order of the matrix is the number of rows and columns. A is a 3 2matrix, B is a 3 3 matrix C is a 4 1 matrix .Matrices are denoted by capital letters while their elements are writtenas lower case letters as in example C above.
We refer to a particular element by using notation that refers to the rowand column containing the element, i.e. a 21=-1, b 32 = 1, c 21 = b.Two matrices A and B are said to be equal, written A = B, if they havethe same order and a ij = b ij for every i and j .
-
8/2/2019 CG Lect 11 2DTransformations
3/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Type of MatricesType of MatricesSquare matrix a matrix with an equal number ofrows and columns.
Diagonal matrix a square matrix with zeros
everywhere except down the leading diagonal.
Unit matrix (identity matrix ) a diagonal matrix withones down the leading diagonal. The identity matrixis denoted with the letter I .
matrixunit33ais
100
010001
3
= I
matrixdiagonal33ais 900050001
= A
matrixsquare33ais 987654321
= A
-
8/2/2019 CG Lect 11 2DTransformations
4/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Type of Matrices (continue)Type of Matrices (continue)Zero matrix a matrix with zeros everywhere,denoted by O .
Symmetric matrix a square matrix whose ( ij )th
element is the same as the ( ji )th element for all i and j .
Row matrix (row vector ) a matrix with only one row,i.e. its order is 1 m .Column matrix (column vector ) a matrix with onlyone column, i.e. an n 1 matrix.
matrixsymmetricais 374725451
= A
-
8/2/2019 CG Lect 11 2DTransformations
5/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Matrix Addition and SubtractionMatrix Addition and SubtractionIf A and B are two n m matrices then their sum C = A + B is the n m matrix with
c ij = a ij + b ij
their difference C = A - B is the n m matrix with
c ij = a ij - b ij
=
=
1024
172
7)3()3()1()2(2
432)5(31
732
423
312
351
=
+++
+++=
+
440
734
7)3()3()1()2(2
432)5(31
732
423
312
351
Examples:Examples:
-
8/2/2019 CG Lect 11 2DTransformations
6/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Scalar Multiplication of MatricesScalar Multiplication of Matrices
If A is an n m matrix and k is a real number,then the scalar multiple C = kA is the n m matrix where c ij = ka ij .
=
=
1464
846
72)3(2)2(2
422232
732
4232
-
8/2/2019 CG Lect 11 2DTransformations
7/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
The Transpose of a MatrixThe Transpose of a Matrix
If A is a matrix then the transpose of A is the
matrix At where a
t ij = a ji .
=
312412023121
A
=
340111222231
t A
-
8/2/2019 CG Lect 11 2DTransformations
8/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Matrix MultiplicationMatrix Multiplication
If A is an n m matrix and B is an m p matrixthen the product of A and B , C = AB , is ann p matrix
C ij = (row i of A) (column j of B )
= a i1b 1j + a i2 b 2j + a i3 b 3j + a in b jp
232333
45
214
83
02)2(041)3(23011
01)2()3(4)2()3(13)3(1)2(
04)2(243)3(43213
03
23
41
201
132
423
=
++++
++++
++++=
-
8/2/2019 CG Lect 11 2DTransformations
9/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
PropertiesProperties
If a , b are scalars and A, B , C are matrices ofthe same dimension (order) then
A + B = B + AA + (B + C) = (A + B) + C a(bA) = (ab)A(a + b)A = aA + bAa(A + B) = aA + aB a(A - B) = aA - aB A + OA = A, and aO = O (A + B) t = At + B t
(A - B) t = At - B t
-
8/2/2019 CG Lect 11 2DTransformations
10/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
PropertiesProperties
If a , b are scalars and A, B , C are matricesof the same dimension (order) then
assuming that the matrix dimensions aresuch that the products in each of thefollowing are defined, then we have:
AB BAA(BC) = (AB)C (A + B)C = AC + BC A(B + C) = AB + AC OA = O, AO = O
(aA)(bB) = abAB IA = AI = A(AB)T = B T AT
-
8/2/2019 CG Lect 11 2DTransformations
11/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Inverse of a 2Inverse of a 2
2 Matrix2 Matrix
Not all Matrices have an inverse.The Determinant determines if a matrix has an
inverse or not. If the determinant of a matrix A is zerothen the matrix has no inverse.
bcad A Ad c ba A==
= det
11)1(342det 4132
===
= A A A
Example:Example:
-
8/2/2019 CG Lect 11 2DTransformations
12/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Inverse of a 2Inverse of a 2 2 Matrix2 Matrix
If A is a matrix then it is possible to find anothermatrix, called A-1, such that AA-1 = I or A-1A = I .
=
=
acbd
A A
d cba
A1
1
=
=
=
112
111
113
114
1
21 34111 41 32 A A
Example:Example:
-
8/2/2019 CG Lect 11 2DTransformations
13/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Solution of Systems ofSolution of Systems ofSimultaneous EquationsSimultaneous Equations
4
1132=+
=+
y x
y x
=
411
1132
y x
AA x x == b b
Ax = b A-1Ax = A-1b x = A-1b
-
8/2/2019 CG Lect 11 2DTransformations
14/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
=
41111 32 y x
AA x x == b b
31
31
31
4)2(1114311)1(
411
2131
2131
2131
1132
1
111
=
=
=
=
=
+
+=
==
=
=
=
y x
y x
x
b A x
A A
-
8/2/2019 CG Lect 11 2DTransformations
15/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Inverse of a 3Inverse of a 3 3 matrix3 matrix
++
+
++
=
======
======
======
++++==
=
=
1
:tdeterminantheFrom
)()(det
333231
232221
1312111
333231
232221
131211
aaaaaa
aaa
A A
bd aeeb
d aabgah
hb
gaaegdh
he
gd a
cd af f cd a
acgaiicga
a fgdii f gd
a
cebf f ceb
achbiichb
a fheii f he
a
A
afhbdicegcdhbfgaei A A
i f chebgd a
Aihg
f ed cba
A
t
t
-
8/2/2019 CG Lect 11 2DTransformations
16/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Inverse of a 3 3 matrix (example)
++
+
++
=
=
====
=
=
====
=
======
==+++==
=
=
444433437
41
431
114
41
014
43
01
44011
33001
33401
4
40
313
30
417
34
43
:tdeterminantheFrom
4139)3160()009(det
340431011
340431011
1
333231
232221
131211
A
aaa
aaa
aaa
A
A A
A A
t
t
-
8/2/2019 CG Lect 11 2DTransformations
17/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Why Transformations? In graphics, once we have an object described, transformations
are used to move that object, scale it and rotate it
-
8/2/2019 CG Lect 11 2DTransformations
18/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Translation Simply moves an object from one position to another
xnew = x old + dx y new = y old + dy
Note: House shifts position relative to origin
y
x0
1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
-
8/2/2019 CG Lect 11 2DTransformations
19/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Translation Example y
x0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(1, 1) (3, 1)
(2, 3)
-
8/2/2019 CG Lect 11 2DTransformations
20/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Scaling Scalar multiplies all coordinates WATCH OUT: Objects grow and move! xnew = Sx x old ynew = Sy y old
Note: House shifts position relative to origin
y
x0
1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
12
13
3
6
3
9
-
8/2/2019 CG Lect 11 2DTransformations
21/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Scaling Example y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(1, 1) (3, 1)
(2, 3)
-
8/2/2019 CG Lect 11 2DTransformations
22/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Rotation Rotates all coordinates by a specified angle xnew = xold cos yold sin
ynew = xold sin + yold cos Points are always rotated about the origin
6
=
y
x01
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
-
8/2/2019 CG Lect 11 2DTransformations
23/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Rotation Example y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(3, 1) (5, 1)
(4, 3)
-
8/2/2019 CG Lect 11 2DTransformations
24/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Homogeneous Coordinates A point (x, y) can be re-written in homogeneous
coordinates as (xh , yh , h) The homogeneous parameter h is a non-
zero value such that:
We can then write any point (x, y) as (hx, hy, h) We can conveniently choose h = 1 so that
(x, y) becomes (x, y, 1)
h x x h=
h y y h=
-
8/2/2019 CG Lect 11 2DTransformations
25/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Why Homogeneous Coordinates? Mathematicians commonly use homogeneous coordinates as
they allow scaling factors to be removed from equations
We will see in a moment that all of the transformations wediscussed previously can be represented as 3*3 matrices
Using homogeneous coordinates allows us use matrixmultiplication to calculate transformations extremely efficient!
-
8/2/2019 CG Lect 11 2DTransformations
26/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Homogeneous Translation The translation of a point by (dx, dy) can be written in matrix
form as:
Representing the point as a homogeneous column vector weperform the calculation as:
100
1001
dydx
+
+
=
++
++
++
=
11*1*0*0
1**1*0
1**0*1
1100
10
01
dy y
dx x
y x
dy y x
dx y x
y
x
dy
dx
-
8/2/2019 CG Lect 11 2DTransformations
27/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Remember Matrix Multiplication Recall how matrix multiplication takes place:
++
++
++
=
zi yh xg
z f ye xd zc yb xa
z
y x
ihg
f ed cba
***
******
-
8/2/2019 CG Lect 11 2DTransformations
28/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Homogenous Coordinates To make operations easier, 2-D points are written as
homogenous coordinate column vectors
vdydxT vdy y
dx x
y
x
dy
dx
),(':
11100
10
01=+
+
=
vssSv ys
xs
y
x
s
s
y x y
x
y
x
),(':
11100
00
00=
=
Translation:
Scaling:
-
8/2/2019 CG Lect 11 2DTransformations
29/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Homogenous Coordinates (cont)
v Rv y x
y x
y
x
)(':
1
cossin
sincos
1100
0cossin
0sincos
=+
=
Rotation:
-
8/2/2019 CG Lect 11 2DTransformations
30/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Inverse Transformations Transformations can easily be reversed using inverse
transformations
=
100
10
011 dy
dx
T
=
100
01
0
001
1
y
x
s
s
S
=
100
0cossin
0sincos1
R
-
8/2/2019 CG Lect 11 2DTransformations
31/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Combining Transformations A number of transformations can be combined into one matrix
to make things easy
Allowed by the fact that we use homogenous coordinates Imagine rotating a polygon around a point other than the origin
Transform to centre point to origin Rotate around origin Transform back to centre point
f h
-
8/2/2019 CG Lect 11 2DTransformations
32/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Combining Transformations (cont))( H House H dydxT ),(
H dydxT R ),()( H dydxT RdydxT ),()(),(
1 2
3 4
L 11 2D T f i CS 433 C G hi
-
8/2/2019 CG Lect 11 2DTransformations
33/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Combining Transformations (cont) The three transformation matrices are combined as follows
1100
10
01
100
0cossin
0sincos
100
10
01
y
x
dy
dx
dy
dx
REMEMBER: Matrix multiplication is notcommutative so order matters
vdydxT RdydxT v ),()(),(' =
L t 11 2D T f ti CS 433 C t G hi
-
8/2/2019 CG Lect 11 2DTransformations
34/34
Ghulam Ishaq Khan Institute of Engineering Sciences and Technology, Topi
Lecture 11: 2D Transformations CS 433: Computer Graphics
Reference Book Code: A
Chapter: 5