9/13/2016

Mathematical Fundamentals
& Transformation Matrices

Matrix Math
1

9/13/2016

Matrix Math
1

Matrix dimensions are specified as:

rows x cols

Matrix Addition
1 2
3 4

1 2
3 4

9/13/2016

Matrix Addition
1 2
3 4

1 2
3 4

2
6

4
8

The dimensions must match to add

Scalar Multiplication
1 2
3 4

9/13/2016

Scalar Multiplication
1 2
3 4

5 10
15 20

The dimensions can be any size to perform scalar

multiplication

Matrix Multiplication
1 2 3
4 5 6

1
4
7

2
5
8

3
6
9

9/13/2016

Matrix Multiplication
1 2 3
4 5 6

1
4
7

2
5
8

3
6
9

30

36

42

66

81

96

1x2 + 2x5 + 3x8 = 2 + 10 + 24 = 36

rows from the first matrix
columns from the second matrix
9

Matrix Multiplication
Inner dimensions must match
Result is outer dimension
Examples:
2x3 X 3x3 = 2x3
3x4 X 4x5 = 3x5
2x3 X 4x3 = cannot multiply
Question: Does AB = BA?
Hint: let A be 2x3 and B be 3x2

10

9/13/2016

Matrices and Graphics

Matrices are used to represent equations
Used as an efficient way to represent transformation
equations in graphics
Multiple transformations can be composed into a single
matrix
Matrix multiplications are often optimized in hardware

11

Transformations
View a complex shape as a set of points
To transform the shape, one transforms each of the
points that define the shape
Major types of transformations:
Translation
Rotation
Scaling

12

9/13/2016

Translation
The equation to translate a single point
(x, y) by tx in the x direction and ty in the
y direction:
x = x + tx
y = y + ty
Resulting in the new point (x, y)

13

Translation
These equation can be represented using matrices:
P=

x
y

P =

x
y

T=

tx
ty

Then using matrix math we simply have:

P = P + T

14

9/13/2016

Rotation
The equations to rotate a point through an angle, q
(ccw), around the origin:
x = x cos(q) y sin(q)
y = x sin(q) + y cos(q)
In matrix form:
R=

cos(q) -sin(q)
sin(q) cos(q)

Using matrix math: P = R P

15

Scaling
The equations to scale a point along the coordinate
axes:
x = x sx
y = y sy
Using matrix math: P = S P

16

9/13/2016

Scaling
Scaling is used to grow/shrink objects centered on the
origin
s numbers bigger than 1 grow objects
s numbers smaller than 1 shrink objects
uniform scaling: both s numbers the same

17

Transformation Sequences
In general you need to perform a sequence of
transformation:
This is a rotation followed by a translation
P = R P + T
Do a dimension check to make sure the math will work
out:
R is 2x2 and P is 2x1, thus R P is 2x1
R P is 2x1 and T is 2x1, thus P is 2x1

18

9/13/2016

Transformation Sequences
However, it is often more efficient if we can combine
operations into a single matrix calculation
How can this be done?
Here are the equations:
x = (x cos(q) y sin(q) ) + tx
y = (x sin(q) + y cos(q) ) + ty

19

Transformation Sequences
Put them into matrix form:

cos(q) sin(q) tx

sin(q) cos(q)

ty

x
y
1

The only problem is that our original point, P,

now need a 3x1 matrix while the resulting point,

P, needs a 2x1 matrix
20

10

9/13/2016

Homogeneous Coordinates
We resolve this using homogeneous coordinates
Lots of theory here, but
Basically boils down to all points being represented as
a triple (x, y, 1)
Thus, we need to fix our transformation matrix so that
P comes out as a triple

21

Homogeneous Coordinates
x
y
1

cos(q) -sin(q) tx
sin(q) cos(q) ty
0
0
1

x
y
1

This 3x3 matrix is called a transformation matrix

This particular matrix rotates then translates

However, it is often easier to work with transformations

matrices that handle one type of transformation at a time,

then compose then to obtain our final transformation

22

11

9/13/2016

2D Transformation Matrices
Translation: T(x, y)

Rotation: R(q)

Scaling: S(x, y)

1 0 tx
0 1 ty
0 0 1
cos(q)
sin(q)
0

-sin(q)
cos(q)
0

0
0
1

sx 0 0
0 sy 0
0 0 1
23

Transformation Composition

Example: How do you rotate point P about a random

pivot point?

1.
2.
3.

Note that normal rotation has the origin as a pivot

Translate P so pivot point lines up with the origin

Rotate P around origin
Translate P back so pivot point is back on original
position

24

12

9/13/2016

Rotation Around Pivot Point

25

Rotation Around Pivot Point

Assume pivot point is at (x, y)
Assume P is the point you wish to rotate
P = T(x, y) R(q) T(-x, -y) P
Recall that order make a huge difference!

26

13

9/13/2016

1 0 0
Reflection
Other
Transformations
about x axis (left)
about y axis (right)

Shear
along x axis (left)
along y axis (right)

Identity

0 -1 0
0 0 1

-1 0
0 1
0 0

1 shx 0
0 1 0
0 0 1

1 0 0
shy 1 0
0 0 1

1
0
0

0
1
0

0
0
1

0
0
1
27

Transformation Between Coordinate

Systems

Point P is represented in the original coordinate

system. To transform it to the new coordinate
system one needs to know how this system is
oriented and positioned relative to the original
coordinate system.
28

14

9/13/2016

3D Transformations
Ill be using a right-handed coordinate system
Positive z-axis is sticking out of the screen
Dashed lines will be used
for lines that stick into
the screen

29

3D Transformations
Points now have 3 coordinates (x, y, z)
Written in homogeneous coordinates as (x, y, z, 1)
Since the points are now 4x1 matrices, the
transformation matrices need to be 4x4

30

15

9/13/2016

3D Translation
T(x, y, z):

tx

ty

tz

31

3D Rotation
3D rotation is a bit harder than in 2D
In 2D we always rotated about the z-axis
Now we have a choice of 3 axes, Rx, Ry, Rz
Rotation is still ccw about the axis

Looking from the positive half of the axis back towards the
origin (same as it was in 2D)

32

16

9/13/2016

Rz(q)
Extending our 2D rotation equations to 3D:
x = x cos(q) y sin(q)
y = x sin(q) + y cos(q) same as in 2D
z = z
the height stays the same

Rz(q):

33

Rz(q)
Extending our 2D rotation equations to 3D:
x = x cos(q) y sin(q)
y = x sin(q) + y cos(q) same as in 2D
z = z
the height stays the same

Rz(q):

cos(q) -sin(q)
sin(q) cos(q)
0
0
0
0

0
0
1
0

0
0
0
1
34

17

9/13/2016

Rx(q) and Ry(q)

Rx(q):

Ry(q):

0
0
0

cos(q)
sin(q)
0

-sin(q)
cos(q)
0

0
0
1

cos(q)

sin(q)

0
-sin(q)
0

1
0
0

0
cos(q)
0

0
0
1
35

Rotation Around a General Axis

1.
2.

Translate P so that the rotation axis passes through

the coordinate system origin
Rotate so that the axis of rotation coincides with one
of the coordinate axes

3.
4.
5.

In general, requires 2 rotations (about the other 2 axes)

Rotate around the axis

Perform the reverse of the rotations (2)
Perform the reverse of the translation (1)

36

18

9/13/2016

Rotation Around a General Axis

P = T(-a,-b,-c) Rx(-y) Ry(-r) Rz(q) Ry(r) Rx(y) T(a, b, c) P

Requires 7 matrix multiplications

Each one requiring 64 multiplies and 48 adds
For a total of 448 multiplies and 336 adds
Per point!
Recall objects sometimes have >100k points

37

Pre-multiplication of Transformations
Recall that matrix multiplication is not

commutative: AB != BA
However, it is associative: (AB)C = A(BC)
This implies that you dont have to perform the matrix

multiplies right-to-left

Thus, we can pre-multiply the 7 matrices that dont

change between points to obtain:

A = T(-a,-b,-c) Rx(-y) Ry(-r) Rz(q) Ry(r) Rx(y) T(a, b, c)

Then we repeat the single multiplication P= A P

for each of the 100k points

38

19

9/13/2016

Pre-multiplication of Transformations
The old method produced (for 100k points)
44.8M multiplies and 33.6M adds

The pre-multiplication method produces

approx 6.4M multiplies and 4.8M adds

Plus, not all the multiplies/adds need to be done

since we are assuming 0 0 0 1 in the last row

Plus, these multiplies/adds are often done on
optimized graphics hardware
39

Vectors
Another important mathematical concept used in
graphics is the Vector

If P1 = (x1, y1, z1) is the starting point and

P2 = (x2, y2, z2) is the ending point, then

the vector V = (x2 x1, y2 y1, z2 z1)
This just defines length and direction, but
not position

40

20

9/13/2016

Vector Projections

Projection of v onto the x-axis

41

Vector Projections

Projection of v onto the xz plane

42

21

9/13/2016

2D Magnitude and Direction

The magnitude (length) of a vector:
|V| = sqrt( Vx2 + Vy2 )

Derived from the Pythagorean theorem

The direction of a vector:

a = tan-1 (Vy / Vx)

a.k.a. arctan or atan

a is angular displacement
from the x-axis

43

3D Magnitude and Direction

3D magnitude is a simple extension of 2D
|V| = sqrt( Vx2 + Vy2 + Vz2 )

3D direction is a bit harder than in 2D

Need 2 angles to fully describe direction
Latitude/longitude is a real-world example

Direction Cosines are often used:

a, b, and g are the positive angles that the vector makes with
each positive coordinate axes x, y, and z, respectively
cos b = Vy / |V|

cos a = Vx / |V|

cos g = Vz / |V|
44

22

9/13/2016

Vector Normalization
Normalizing a vector means shrinking or stretching it so

its magnitude is 1

a.k.a. creating unit vectors

Note that this does not change the direction

Normalize by dividing by its magnitude

V = (1, 2, 3)
2
2
2
|V| = sqrt( 1 + 2 + 3 ) = sqrt(14) = 3.74
Vnorm = V / |V| = (1, 2, 3) / 3.74 =
(1 / 3.74, 2 / 3.74, 3 / 3.74) = (.27, .53, .80)
2

|Vnorm| = sqrt( .27 + .53 + .80 ) = sqrt( .9 ) = .95

Note that the last calculation doesnt come out to exactly 1. This is because of the error
introduced by using only 2 decimal places in the calculations above.
45

Vector Addition
Equation:
V3 = V1 + V2 = (V1x + V2x , V1y + V2y , V1z + V2z)

Visually:

46

23

9/13/2016

Vector Subtraction
Equation:
V3 = V1 - V2 = (V1x - V2x , V1y - V2y , V1z - V2z)

Visually:

47

Dot Product
The dot product of 2 vectors is a scalar
V1 . V2 = (V1x V2x) + (V1y V2y ) + (V1z V2z )
Or, perhaps more importantly for graphics:
V1 . V2 = |V1| |V2| cos(q)
where q is the angle between the 2 vectors
and q is in the range 0 q

48

24

9/13/2016

Dot Product
Why is dot product important for graphics?
It is zero if the 2 vectors are perpendicular

cos(90) = 0

49

Dot Product
The Dot Product computation can be simplified when
it is known that the vectors are unit vectors
V1 . V2 = cos(q)
because |V1| and |V2| are both 1
Saves 6 squares, 4 additions, and 2 sqrts

50

25

9/13/2016

Cross Product
The cross product of 2 vectors is a vector
V1 x V2 = ( V1y V2z - V1z V2y ,
V1z V2x - V1x V2z ,
V1x V2y - V1y V2x )
Note that if you are big into linear algebra there is also a

way to do the cross product calculation using matrices

and determinants

51

Cross Product
Again, just as with the dot product, there is a more
graphical definition:
V1 x V2 = u |V1| |V2| sin(q)
where q is the angle between the 2 vectors
and q is in the range 0 q
and u is the unit vector that is perpendicular
to both vectors
Why u?

|V1| |V2| sin(q) produces a scalar and the result needs to be a

vector

52

26

9/13/2016

Cross Product
The direction of u is determined by the right hand

rule
The perpendicular definition leaves an ambiguity in

terms of the direction of u

Note that you cant take the cross product of 2

vectors that are parallel to each other

sin(0) = sin(180) = 0 produces the vector (0, 0, 0)

53

Forming Coordinate Systems

Cross products are great for forming coordinate system
frames (3 vectors that are perpendicular to each other)
from 2 random vectors
Cross V1 and V2 to form V3
V3 is now perpendicular to both V1 and V2
Cross V2 and V3 to form V4
V4 is now perpendicular to both V2 and V3
Then V2, V4, and V3 form your new frame

54

27

9/13/2016

Forming Coordinate Systems

V1 and V2 are in the new xy plane

55

28