Linear Algebra usage in Computer Graphics

10 / 08 / 2012

Michael Eckmann

Plan for today

• I am Michael Eckmann, Assistant professor of computer science.

• I teach a course in computer graphics in which we utilize linear algebra.

• Today we'll see how some linear algebra is used in computer graphics.

What is Computer Graphics?

• The basic idea is that computer graphics deals with generating images with computers as opposed to cameras.

• In what ways can a computer generate an image?

What is Computer Graphics?

• One way could be - given some description of a scene

– Spatial information of objects (where they are in the scene, how big they are, etc.)

– Surface properties of the objects (shiny/matte, what color?, transparent, etc.)

– Lighting (where are the lights, what kind of lights are they, what color are they, etc.

• have a computer generate an image of the scene given that the viewer is viewing the scene from some viewpoint and what kind of projection (e.g. perspective.)

Many Computer Graphics topics use Linear Algebra

• To name a few:– dotdot (aka scalar, inner) productproduct of two vectors

• can be used to measure angles– crosscross (aka vector) productproduct of two vectors

• can be used to find the direction perpendicular to a plane (the one that the two vectors live on)

– matrix multiplication matrix multiplication • matrices often represent some geometric transformation;

multiplying two together yields a matrix that represents the composite of the two transformations (as if one transformation is applied and afterwards the other one is applied.)

• can be used to project a 3d object onto a 2d plane using perspective (or some other) projection

Many Computer Graphics topics use Linear Algebra

• To name a few:– matrix multiplied by a vectormatrix multiplied by a vector

• allows some transform (represented by the matrix) to be applied to a set of points (represented by the vectors)

• the set of points can be the positions of the corners of a polygon (e.g. a triangle, an octagon) or a polyhedron (e.g. a cube)

Let's review how to multiply matrices

• Someone remind me how – To multiply a matrix times a vector.– To multiply a matrix times another matrix.–– We'll do this on the board.

Translation (2D)• Translation is a transformation on an object that simply moves it to a

different position somewhere else within the same coordinate system.

To translate an object we translate each of its vertices (points).

• translate the point (x1 , y

1) by t

x in x and t

y in y

– result is (x2, y

2)

– (x2, y

2) = (x

1 + t

x, y

1 + t

y)

• Translations can be represented by adding vectors.

[ x1 ] + [ t

x ] = [ x

1 + t

x ]

[ y1 ] [ t

y ] [ y

1 + t

y ]

Scaling (2D)• Scaling is a transformation on an object that changes its size. Just as the

translation could have been different amounts in x and y, you can scale x

and y by different factors.

• Scaling is a transformation on an object that changes its size within the

same coordinate system. To scale an object we scale each of its vertices

(points).

• To scale a 2d point (x1, y

1) by s

x in the x direction and s

y in the y direction,

we simply calculate the new coordinates to be:

• (x2, y

2) = (s

xx

1 , s

yy

1 )

• Example on the board of scaling a line segment from say 2,3 to 2,7

Scaling (2D)• Scaling

– (x2, y

2) = (x

1 * s

x, y

1 * s

y)

• Scaling can be represented by matrix multiplication where the scale

factors are along the diagonal.

[ sx 0 ] [ x

1 ] = [ s

x*x

1]

[ 0 sy ] [ y

1 ] [s

y*y

1]

Rotation (2D)• Rotation is a transformation on an object that changes its position by

rotating the object some angle about some axis.

• Rotations in the x-y plane are about an axis parallel to z. The point of

intersection of the rotation axis with the x-y plane is the pivot point.

• We need to specify the angle and pivot point about which the object is

to be rotated.

• To rotate an object we rotate each of its vertices (points).

• Positive angles are in the counterclockwise direction.

Rotation (2D)• Let's derive the rotation matrix.

• To rotate a 2d point (x1, y

1) an arbitrary angle of B, about the origin as a

pivot point do the following.

• From the diagram on the board we have:sin(A + B) = y

2 / r => y

2 = r sin(A + B)

cos(A + B) = x2 / r x

2 = r cos(A + B)

sin(A) = y1 / r y

1 = r sin(A)

cos(A) = x1 / r x

1 = r cos(A)

• Known equalities exist for sin(A+B) and cos(A+B)sin(A + B) = sin(A) cos(B) + cos(A) sin(B)cos(A + B) = cos(A) cos(B) – sin(A) sin(B)

Rotation (2D)• Solve for x

2 and y

2.

• x2 = r cos(A + B) = r cos(A) cos(B) – r sin(A) sin(B)

= x1 cos(B) – y

1 sin(B)

• y2 = r sin(A + B) = r sin(A) cos(B) + r cos(A) sin(B)

= y1 cos(B) + x

1 sin(B)

• So, (x2, y

2) = (x

1 cos(B) – y

1 sin(B) , y

1 cos(B) + x

1 sin(B)

)

• This will rotate a point (x1, y

1) an angle of B about the pivot point of the

origin.

Rotation (2D)• Rotation

– Rotate (x1 , y

1) by some angle B counterclockwise

– result is (x2, y

2)

– (x2, y

2) = (x

1 * cos(B) – y

1 * sin(B) , y

1 * cos(B) + x

1 * sin(B)

)

– Derivation on the board

• Rotation can be represented by matrix multiplication:

( x2 ) = ( cos(B)

– sin(B) ) ( x

1 )

( y2 ) ( sin(B)

cos(B) ) ( y

1 )

Transformation Matrices (2D)• TRANSLATION: (x

2, y

2) = (x

1 + t

x , y

1 + t

y )

( x2 ) = ( x

1 ) + ( t

x )

( y2 ) ( y

1 ) ( t

y )

• SCALING: (x2, y

2) = (s

xx

1 , s

yy

1 )

( x2 ) = ( s

x 0 ) ( x

1 )

( y2 ) ( 0 s

y ) ( y

1 )

• ROTATION: (x2, y

2) = (x

1 cos(B) – y

1 sin(B) , y

1 cos(B) + x

1 sin(B)

)

( x2 ) = ( cos(B)

– sin(B) ) ( x

1 )

( y2 ) ( sin(B)

cos(B) ) ( y

1 )

Example• Let's consider a triangle:

(3,6)

/\

/ \

(1,2) /____\ (5,2)

• We could scale this by 2 in x and 1.5 in y by using a matrix like this: [ 2 0 ] [ 0 1.5 ]

Example• Multiply the following matrix by each of the points (1,2), (5,2), 3,6).

[ 2 0 ] [ 0 1.5 ]

• After multiplying that matrix by each of the points we get:(1,2) -> (2,3)(5,2) -> (10,3)(3,6) -> (6,9)

• Let me draw this on the board.

Example• It scaled correctly but it moved. You can choose the point that gets fixed

(the one that doesn't move) and do a fixedpoint scaling by first

translating the fixed point to the origin, then scale, then translate back to

fixed point.

• If we want the center of the triangle (3,4) to be fixed, we could subtract[ 3 ][ 4 ]

from each point, to get the center to go to the origin and then apply the

scaling matrix as before and then add [ 3 ][ 4 ]

back into each point and we'd end up with our desired result.

• The corners of the triangle will be (-1,1) (7,1) and (3,7)

Homogeneous Coordinates• The problem with what we just saw is that we can't simply represent the

fixed point scaling as one matrix transformation. A similar thing

happens with fixed point rotations and any other transformation that has

some kind of translation embedded in it. Why?

• Ideally we would like to represent composite transformations as one

matrix.

• Hence we use what are called homogeneous coordinates.

Homogeneous Coordinates• To represent a 2d point in homogeneous coordinates instead of just an x and

a y to represent a 2d point, we use an x, a y and an additional value, the

homogeneous parameter.

• (x,y) => (c*x, c*y, c) where c (which cannot = 0) is the homogeneous

parameter. There are an infinite number of equivalent homogeneous

representations for each coordinate point (x,y).

• When c = 1, we have (x,y) => (x, y, 1)

• Using homogeneous coordinates allows us to represent 2d transformations as

matrix multiplications exclusively.

Homogeneous Coordinates• Transformations on homogeneous coordinates

• TRANSLATION: (x2, y

2) = (x

1 + t

x , y

1 + t

y )

( x2 ) = ( 1 0 t

x ) ( x

1 )

( y2 ) ( 0 1 t

y ) ( y

1 )

( 1 ) ( 0 0 1 ) ( 1 ) NOTICE: translation is now represented by a matrix multiplication

• SCALING: (x2, y

2) = (s

xx

1 , s

yy

1 )

( x2 ) = ( s

x 0 0 ) ( x

1 )

( y2 ) ( 0 s

y 0 ) ( y

1 )

( 1 ) ( 0 0 1 ) ( 1 )

Homogeneous Coordinates• Transformations on homogeneous coordinates

• ROTATION: (x2, y

2) = (x

1 cos(B) – y

1 sin(B) , y

1 cos(B) + x

1 sin(B)

)

( x2 ) = (cos(B)

– sin(B) 0 ) ( x

1 )

( y2 ) (sin(B)

cos(B) 0 ) ( y

1 )

( 1 ) ( 0 0 1 ) ( 1 )

• These three transform matrices are sometimes written as– T(t

x,t

y)

– S(sx,s

y)

– R(B)

Fixed Point Scaling• Our composite fixed point scaling matrix would then become:[ 1 0 3 ] [ 2 0 0 ] [ 1 0 -3 ] [ 2 0 -3 ][ 0 1 4 ] x [ 0 1.5 0 ] x [ 0 1 -4 ] = [ 0 1.5 -2 ][ 0 0 1 ] [ 0 0 1 ] [ 0 0 1 ] [ 0 0 1 ]

• Then we could just use the composite matrix multiplied by all the points to get our

result.

Fixed point rotation• To rotate an object some angle B about a fixed point (x

p, y

p) we do:

– a) first translate (xp, y

p) to the origin

– b) rotate by angle B– c) then translate the origin back to (x

p, y

p)

• This will yield a matrix multiplication McM

bM

a = M

fpr which we will then multiply

Mfpr P, where P is a homogeneous point, to get the transformed point.

(1 0 xp) (cos(B) – sin(B) 0 ) (1 0 -x

p) ( cos(B) -sin(B) x

p) ( 1 0 -x

p )

(0 1 yp) (sin(B)

cos(B) 0 ) (0 1 -y

p) = ( sin(B) cos(B) y

p) ( 0 1 -y

p)

(0 0 1 ) (0 0 1) (0 0 1 ) ( 0 0 1 ) ( 0 0 1 )

( cos(B) -sin(B) -xpcos(B) + y

psin(B) + x

p)

= ( sin(B) cos(B) -xp sin(B) – y

pcos(B) + y

p)

( 0 0 1 )

Other transformations• Shearing

• Y shear:(1 0 0)(sh

y 1 0)

(0 0 1)

• X shear:(1 sh

x 0)

(0 1 0)(0 0 1)

• Examples of what these do on the board.

Other transformations• Reflections

• About the y-axis:(-1 0 0)(0 1 0)(0 0 1)

• About the x-axis:(1 0 0)(0 -1 0)(0 0 1)

• About the z-axis:(-1 0 0)(0 -1 0)(0 0 1)

• Examples of what these do on the board.

• About the line y=x:(0 1 0)(1 0 0)(0 0 1)

• About the line y=-x:(0 -1 0)(-1 0 0)(0 0 1)

Recap• N-dimensional vectors represent ...

• (n+1)-dimensional vectors represent ...

• Matrices can represent ...

• A matrix multiplied by a vector ...

• A matrix multiplied by another matrix ...

Recap• N-dimensional vectors represent points in n-dimensional space

– (n+1)-dimensional vectors represent homogeneous coordinates of

points in n-dimensional space

• Matrices can represent geometric transformations that when multiplied

by the vectors representing the points (vertices of polygons) the result

is that the polygon is transformed in the way that the matrix defined.

• A Matrix multiplied by a vector transforms the point represented by that

vector in the transformative fashion that the matrix represents.

• A matrix multiplied by another matrix produces a matrix that represents a

composite of the two transformations.

Example Ray Traced image