Computer Graphics

Mathematical Fundamentals

Matrix Math

• Matrix dimensions are specified as: rows x cols

1 2 3 4

5 6 7 8

Matrix Addition

• The dimensions must match to add

1 2

3 4

1 2

3 4

2 4

6 8

Scalar Multiplication

• The dimensions can be any size to perform scalar multiplication

1 2

3 4

5 10

15 20

Matrix Multiplication

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

• rows from the first matrix

• columns from the second matrix

1 2 3

4 5 6

1 2 3

4 5 6

7 8 9

30 36 42

66 81 96

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

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

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

Translation

• The equation to translate a single point(x, y) by tx in the x direction and ty in they direction:

x’ = x + tx

y’ = y + ty

Resulting in the new point (x’, y’)

Translation

• These equation can be represented using matrices:P = P’ = T =

• Then using matrix math we simply have:P’ = P + T

x

y

x’

y’

tx

ty

Rotation

• The equations to rotate a point through an angle, (ccw), around the origin:

x’ = x cos() – y sin()y’ = x sin() + y cos()

• In matrix form:R =

• Using matrix math: P’ = R P

cos() -sin()

sin() cos()

Scaling

• The equations to scale a point along the coordinate axes: x’ = x sx

y’ = y sy

• Using matrix math: P’ = S P

• Where S = ?

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

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

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() – y sin() ) + tx

y’ = (x sin() + y cos() ) + ty

Transformation Sequences

• Put them into matrix form:

• The only problem is that our original point, P, now need a 3x1 matrix while the resulting point, P’, needs a 2x1 matrix

x’

y’

x

y

1

cos() –sin() tx

sin() cos() ty

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

Homogeneous Coordinates

• 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

x’

y’

1

x

y

1

cos() -sin() tx

sin() cos() ty

0 0 1

2D Transformation Matrices

• Translation: T(x, y)

• Rotation: R(

• Scaling: S(x, y)

1 0 tx

0 1 ty

0 0 1

cos() -sin() 0

sin() cos() 0

0 0 1

sx 0 0

0 sy 0

0 0 1

Transformation Composition

• Example: How do you rotate point P about a random “pivot point”?

• Note that normal rotation has the origin as a pivot

1. Translate P so pivot point lines up with the origin

2. Rotate P around origin3. Translate P back so pivot point is back

on original position

Rotation Around Pivot Point

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() T(-x, -y) P

– Recall that order make a huge difference!

Other Transformations-1 0 0

0 1 0

0 0 1

• Reflection– about x axis (left)– about y axis (right)

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

• Identity

1 0 0

0 -1 0

0 0 1

1 shx 0

0 1 0

0 0 1

1 0 0

0 1 0

0 0 1

1 0 0

shy 1 0

0 0 1

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.

3D Transformations

• I’ll 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 intothe screen

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

3D Translation

T(x, y, z):

1 0 0 tx

0 1 0 ty

0 0 1 tz

0 0 0 1

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)

Rz()

• Extending our 2D rotation equations to 3D:x’ = x cos() – y sin()

y’ = x sin() + y cos() same as in 2D

z’ = z the height stays the same

Rz():

cos( -sin( 0 0

sin( cos( 0 0

0 0 1 0

0 0 0 1

Rx() and Ry()

Rx():

Ry():

0 0

cos( -sin( 0

0 sin( cos( 0

0 0 0 1

cos( sin( 0

0 0

-sin( 0 cos( 0

0 0 0 1

Rotation Around a General Axis

1. Translate P so that the rotation axis passes through the coordinate system origin

2. Rotate so that the axis of rotation coincides with one of the coordinate axes

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

3. Rotate around the axis

4. Perform the reverse of the rotations (2)

5. Perform the reverse of the translation (1)

Rotation Around a General Axis

P’ = T(-a,-b,-c) Rx(-) Ry(-) Rz() Ry() Rx() 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

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 don’t have to perform the matrix

multiplies right-to-left

• Thus, we can pre-multiply the 7 matrices that don’t change between points to obtain:A = T(-a,-b,-c) Rx(-) Ry(-) Rz() Ry() Rx() T(a, b, c)

• Then we repeat the single multiplication P’= A P for each of the 100k points

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

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, butnot position

Vector Projections

• Projection of v onto the x-axis

Vector Projections

• Projection of v onto the xz plane

2D Magnitude and Direction

• The magnitude (length) of a vector:|V| = sqrt( Vx

2 + Vy2 )

• Derived from the Pythagorean theorem

• The direction of a vector: = tan-1 (Vy / Vx)

• a.k.a. arctan or atan• atan vs. atan2• is angular displacement

from the x-axis

3D Magnitude and Direction

• 3D magnitude is a simple extension of 2D|V| = sqrt( Vx

2 + Vy2 + Vz

2 )

• 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:• , , and are the positive angles that the vector makes

with each positive coordinate axes x, y, and z, respectively

cos = Vx / |V|

cos = Vy / |V| cos = Vz / |V|

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) |V| = sqrt( 12 + 22 + 32) = sqrt(14) = 3.74

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

|Vnorm| = sqrt( .272 + .532 + .802) = sqrt( .9 ) = .95

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

Vector Addition

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

• Visually:

Vector Subtraction

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

• Visually:

Dot Product

• The dot product of 2 vectors is a scalarV1 . V2 = (V1x V2x) + (V1y V2y ) + (V1z V2z )

• Or, perhaps more importantly for graphics:V1 . V2 = |V1| |V2| cos()

where is the angle between the 2 vectors

and is in the range 0

Dot Product

• Why is dot product important for graphics?– It is zero iff the 2 vectors are perpendicular

• cos(90) = 0

Dot Product

• The Dot Product computation can be simplified when it is known that the vectors are unit vectors

V1 . V2 = cos()

because |V1| and |V2| are both 1

– Saves 6 squares, 4 additions, and 2 sqrts

Cross Product

• The cross product of 2 vectors is a vectorV1 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

Cross Product

• Again, just as with the dot product, there is a more graphical definition:V1 x V2 = u |V1| |V2| sin() where is the angle between the 2

vectorsand is in the range 0

and u is the unit vector that is perpendicular to both vectors

– Why u?• |V1| |V2| sin() produces a scalar and the result

needs to be a vector

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 can’t take the cross product of 2 vectors that are parallel to each other– sin(0) = sin(180) = 0 produces the vector (0, 0, 0)

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

Forming Coordinate Systems

• V1 and V2 are in the new xy plane