COS3712/102/3/201

Tutorial Letter 103/3/2016

Computer Graphics
COS3712
Semesters 1 and 2

School of Computing
This tutorial letter contains important
information about your module.

Open Rubric
 2

1 Introduction

This tutorial letter contains additional notes that should help you get into COS3712. The prescribed
book assumes that you have a working understanding of certain mathematical concepts, especially
linear algebra. This tutorial letter is intended as a linear algebra primer for computer graphics
programming.

2 Notes on Linear Algebra

The following notes are intended to cover most of the mathematical prerequisites, i.e. the necessary
concepts of linear algebra, needed for COS3712. Please note that they do not cover all the
mathematics required for Computer Graphics in general, or COS3712 in particular. The prescribed
book covers the additional topics you need to understand and to be able to apply.

2.1 3-dimensional space

Most of the computer graphics in COS3712 is done in 3-dimensional space. We assume there is a
set of three axes, x, y and z, at right angles to each other, according to which any position can be
specified. Angel (2009) defines an affine space as a vector space that also includes points. By
3-dimensional space we mean an affine space.
 3 COS3712/102/3/2016

2.2 Points, vectors and scalars

A point in 3-dimensional space, generally represented graphically by a single dot, is a position or

location specified by three values placed in parentheses, representing the x, y and z coordinates of
the point with respect to the set of axes. For example, (1, 2, 3) represents the point with 1 as its x-
coordinate, 2 as its y-coordinate and 3 as its z-coordinate. The point (0, 0, 0) represents the point
where the x, y and z axes intersect each with the value 0, and is referred to as the origin. We
generally use lowercase letters of the alphabet, eg. p, q and r to refer to points.

A vector in 3-dimensional space, generally represented graphically by an arrow, is a direction with a

certain magnitude. A vector is normally also specified by three values placed in parentheses, but
should not be confused with a point which specifies a position. The vector (1, 2, 3) merely
represents the direction from the origin (0, 0, 0) to the point (1, 2, 3). Its magnitude is the length of
the line segment from (0, 0, 0) to (1, 2, 3). Note that a vector does not have a position. The vector
(1, 2, 3) is not positioned at the origin, neither is it positioned at (1, 2, 3). Its position can be
anywhere. It is just handy to specify a vector as if it started at the origin and ended at (1, 2, 3). We
generally use lowercase letters of the alphabet, eg. u, v and w, to refer to vectors.

Also, do not confuse a vector with a line segment. A line segment in 3-dimensional space has a
begin and endpoint (whereas a vector does not) and a line segment doesn't point in one of two
possible directions (whereas a vector does).

A scalar is a value or a magnitude. It has neither position nor direction. Examples of scalars are 1,
&37, 3.141579... and 0. We generally use lower case letters of the Greek alphabet, eg. α, β or γ, to
represent arbitrary scalars, but sometimes also lowercase letters of the alphabet.

2.3 Expressing points and vectors in homogenous coordinates

We can distinguish between points and vectors by expressing them in four dimensions, i.e. by
adding a fourth coordinate. For a point, the fourth coordinate is 1 and for a vector it is 0. In other
words, the point (1, 2, 3) is represented in homogenous coordinates by (1, 2, 3, 1) and the vector
(1, 2, 3) is represented by (1, 2, 3, 0).

The above explanation is really an oversimplification of the theory behind what points and vectors
are and how they are related to each other, and in particular why we use 1 as the fourth coordinate
for points and 0 for vectors. However, this simple explanation is all you need to know to express
points and vectors in homogenous coordinates and use them in computer graphics.

2.4 Adding and subtracting vectors and points

We can add two vectors together, or subtract two vectors from one another. We can add a vector to
a point (or subtract a vector from a point, although this is the same as adding a vector pointing in the
opposite direction). We cannot add two points together, but we can subtract one point from another.

The sum of two vectors is another vector. We simply add the corresponding coordinates. For
example if u is the vector (1, 2, 3) and v is the vector (4, 5, 6), then u + v is the vector (5, 7, 9). This
can be seen graphically by drawing the two vectors end-to-end. The sum of the two vectors is a
vector drawn from the beginning of the first vector to the end of the second.

The difference of two vectors is another vector. We simply subtract the corresponding coordinates.
 4

For example if u is the vector (1, 2, 3) and v is the vector (4, 5, 6), then u - v is the vector (-3, -3, -3)
and v - u is the vector (3, 3, 3).

The sum of a point and a vector (or a vector and a point) is a point. We simply add the
corresponding coordinates. For example if p is the point (1, 2, 3) and v is the vector (4, 5, 6), then
p + v is the point (5, 7, 9). You can think of this as moving the point in the direction and distance
specified by the vector.

The difference between two points is a vector. We simply subtract the corresponding coordinates.
For example if p is the point (1, 2, 3) and q is the point (4, 5, 6), then p - q is the vector (-3, -3, -3)
and q - p is the vector (3, 3, 3). You can think of subtraction of two points as the vector specifying
the direction and distance between the two points.

2.5 Multiplying a vector by a scalar

The product of a vector and a scalar is a vector. We simply multiply each of the coordinates by the
scalar. For example, if v is the vector (0, 1, 2) and α is the scalar 3, then αv is the vector (0, 3, 6).
You can think of this as increasing the magnitude of a vector without changing its direction.

Similarly, we can divide a vector by a scalar.

2.6 Magnitude of a vector

The magnitude of a vector is a scalar. It is the square root of the sum of the squares of its
coordinates. In other words, if v is the vector (vx, vy, vz), then the magnitude of v, written as |v|, is
.

For example, if v is the vector (3, 0, 4), then

The magnitude of a vector represents its size, without specifying its direction. It can be thought of
the length of the arrow used to represent it.

2.7 Normalising a vector

A normalised vector is a vector with a magnitude of 1. To normalise a vector, we divide it by its

magnitude. In other words, if v is a vector, then v normalised is v / |v| .

For example, say v is the vector (3, 0, 4) then v normalised is (3, 0, 4) / 5 = (0.6, 0, 0.8). We can
check that this vector indeed has a magnitude of 1:
|(0.6, 0, 0.8)| =

2.8 Dot product of two vectors

The dot product (also called the inner product) of two vectors is a scalar. It is the sum of the
products of the corresponding coordinates of the two vectors. In other words, if vectors u and v are
defined as (vx, vy, vz) and (ux, uy, uz) respectively, then their dot product, written as u v, is vx.ux +
vy.uy + vz.uz.

For example, say vectors u and v are (1, 2, 3) and (-1, 0, 1) respectively.
 13 COS3712/102/3/2016

Then u v is 1.-1 + 2.0 + 3.1 = -1 + 0 + 3 = 2.

The dot product of two vectors is useful for calculating the angle θ between two vectors by means of
the following formula:

cos θ = (u v) / (|u||v|)

2.9 Cross product of two vectors

The cross product of two vectors is a vector. Each coordinate is calculated as the difference between
the products of the other two coordinates of the two vectors. In other words, if u and v are vectors (ux,
uy, uz) and (vx, vy, vz) respectively, then their cross product, written as u × v, is (uy.vz - uz.vy, uz.vx -
ux.vz, ux.vy - uy.vx).

For example, say vectors u and v are (1, 2, 3) and (-1, 0, 1) respectively.
Then u × v is (2.1 - 3.0, 3.-1 - 1.1, 1.0 - 2.-1) = (2, -4, 2).

The cross product is useful for calculating a vector normal (i.e. at right angles) to two vectors.

You can see that u × v = n is at right angles to u and v by calculating the dot product of n and u and
n and v.

n u = 2.1 - 4.2 + 3.2 = 0

If cos θ = 0, then θ = 90 .

Similarly, you can check that n v = 0.

2.10 Lines

Apart from vectors and points, we often have to deal with lines in 3-dimensional space. There are
various ways of specifying them.

In 2-dimensions, the equation of a line is

y = mx + c
It is sometimes handy to rearrange this to the form
ax + by + c = 0

To specify a line in 3-dimensions by means of an equation is somewhat trickier. This can done by a
set of so-called Cartesian equations:

where q1, q2, q3, d1, d2 and d3 are scalars, and x, y and z are the coordinates of any point on the line.

An alternative way of specifying lines in 3-dimensions is by means of parametric equations:

Say we have a point q on the line and a vector d pointing in the direction of the line. Then the
following parametric equation specifies the coordinates of any point p on the line:
p = q + γd
where γ is a scalar value.
 14

To see how this equation relates to the Cartesian equations of the line, we write it in expanded form,
namely
(x, y, z) = (q1, q2, q3) + γ(d1, d2, d3)
where x, y and z are the coordinates of point p, and q1, q2 and q3 are the coordinates of point q and
d1, d2 and d3 are the coordinates of vector d.

If we separate out the coordinates of these points and vectors, we get three equations:
x = q1 + γd1
y = q2 + γd2
z = q3 + γd3
Then if we express each of these equations in terms of γ, we get the Cartesian equations above.

For example, say we have the point q = (1, 2, 3) and the vector d = (1, 4, -1), then the line passing
through point q and in the direction of d is specified by the Cartesian equations

Note that if one of the components of the direction vector is zero, then the Cartesian equations turn
out to be the equation of a line in 2-dimensions. For example, say the direction vector d = (1, 4, 0),
then the Cartesian equations are

i.e.
y = 4x - 2

We can also specify a line by means of a parametric equation if we have two points q and r on the
line:
p = q + γ(r - q)
Here, r - q determines the direction vector. (Remember that the difference between two points is a
vector.) For values of γ between 0 and 1 we have all the points on the line segment between points q
and r.

Sometimes the parametric equation of a line is rearranged in the form

p = γr + (1-γ)q

2.11 Planes

A plane (in 3-dimensions) can be specified by means of an equation of the form

ax + by + cz + d = 0
where a, b, c and d are scalars, and x, y and z are the coordinates of any point in the plane. (As it
turns out, a, b and c are the components of a vector normal to the plane.)

For example, the equation x + 2y + 3z - 4 = 0 is the equation of a plane with normal vector (1, 2, 3),
i.e. at right-angles to it.

A plane can be determined in various ways: (i) by a point on the plane and a normal vector, (ii) a
point and two (linearly independent) vectors in the plane, (iii) three non-collinear points (i.e. not in a
straight line), or (iv) a line and a point (not on the line). From each of these combinations, the
equation of the plane can be determined:
 15 COS3712/102/3/2016

(i) Given a point q on the plane and a vector n normal to the plane (with components n1, n2 and n3)
then (as stated above) the equation
n 1 x + n2 y + n 3 z + d = 0
will define the plane. To get a value for scalar d, we substitute the coordinates of point q:
n1qx + n2qy + n3qz + d = 0
so
d = -(n1qx + n2qy + n3qz)

(ii) Given a point q on the plane and two vectors u and v in the plane, the cross product u × v will
give a normal to the plane. Then using the method above, we can determine the equation of the
plane.

(iii) Given three non-collinear points q, r and s in the plane, we can use two pairs of these points to
determine two vectors in the plane by subtracting the points from one another. For instance, q - r
and q - s will give two vectors in the plane. Then using the methods described above we can
determine a normal to the plane (in this instance (q - r) × (q - s) ) and hence determine the equation
of the plane.

For example, say we have three points q = (1, 2, 0), r = (0, 1, 2) and s = (2, 0, 1) and we wish to
determine the equation of the plane through them. One vector in the plane will be q - r = (1, 1, -2)
and another will be q - s = (-1, 2, -1). The cross product of these two vectors is n = (1.-1 - -2.2, -2.-1
- 1.-1, 1.2 - 1.-1) = (3, 3, 3) which will be a normal to the plane. Then the equation of the plane
passing through the point q (or r or s) is 3x + 3y + 3z - 9 = 0 or x + y + z - 3 = 0.

(iv) Say we have a line in the plane and point r in the plane. The line must be specified in some way,
say a set of Cartesian equations as above, or a parametric equation. Then two vectors in the plane will
be the direction vector d = (d1, d2, d3) and the vector q - r (where q is the point (q1, q2, q3) on the line
and r is the other point on the plane). Now we have two vectors and a point on the plane (either q or
r), and we can follow the above methods to determine the equation of the plane.

Planes can also be specified by means of parametric equations. These can be formed easily for cases
(ii) and (iii) above:

(ii) Given a point q and two (linearly independent) vectors u and v in the plane, the equation
p = q + αu + βv
will specify all points p on the plane.

(iii) Given three non-collinear points q, r and s, q - r and q - s will give two linearly independent
vectors in the plane. The equation
p = q + α(q - r) + β(q - s)
will then specify all points p on the plane. For values of α and β between 0 and 1, this equation
gives all the points in the triangle formed by q, r and s.

2.12 Two-dimensional matrices, including the identity matrix

A two-dimensional matrix is a table of values with a fixed number of rows and columns. The values
in the table are generally placed in a single pair of extended square brackets.
 16

For example, M = has 4 rows and 4 columns, and is called a 4 by 4 matrix.

N= has 2 rows and 3 columns, and is called a 2 by 3 matrix.

A matrix with only one row is called a row matrix, and a matrix with only one column is called a
column matrix (see transpose of a matrix below for examples).

A matrix with the same number of rows and columns is called a square matrix. Matrix M above is
an example of a square matrix.

A square matrix filled with zeroes except the main diagonal which is filled with ones is called an
identity matrix.

For example, I = is a 4 by 4 identity matrix.

Matrices do no represent any specific geometric objects in 3-dimensional space. They are
sometimes used to represent objects, for example a row or column matrix can be used to represent a
point or vector. 4 by 4 matrices are used to represent transformations, for example a rotation or a
translation that can be applied to an object (see matrix multiplication below). We generally use
uppercase letters of the alphabet, eg. M and N, to refer to matrices.

2.13 Transpose of a matrix

The transpose of a matrix is another matrix with all its row and column values swapped. To be more
precise, if A is an m by n matrix, then the transpose of A, written as AT,
is the n by m matrix with αT ij = α ji.

For example, the transpose of the row matrix [1 2 3 4] is the column matrix

The transpose of the 4 by 4 matrix is the 4 by 4 matrix

 17 COS3712/102/3/2016

2.14 Matrix addition and subtraction

Matrix addition is only defined for two matrices that have the same number of rows and columns,
and their sum is another matrix, also with the same number of rows and columns. Each value of the
resulting matrix is simply the sum of the corresponding values of the two matrices.

For example, if M = and N = then the sum of M and N is

M+N= =

Similarly, one matrix can be subtracted from another (provided they once again have the same
number of rows and columns). Each value of the resulting matrix is simply the difference between
the corresponding values of the two matrices.

2.15 Multiplying a matrix by a scalar

The result of multiplying a matrix by a scalar is a matrix with each value multiplied by the scalar.

For example, say α = 2 and M = then αM =

2.16 Dot product of two matrices

The product of one matrix with another is a matrix. In particular, the product of an n by l matrix A
with an l by m matrix B, written A B, is the n by m matrix D = [δij] where

For example, say we have two 4 by 4 matrices A and B:

Then their product is

 18

(To keep things simple, we have only shown the value in row 3, column 2 of the product matrix. It is
determined from the product of row 3 of matrix A and column 2 of matrix B as indicated. Similarly,
all the other values of A B are the products of the respective rows of A and columns of B.)

As a more concrete example, say we want to multiply a 4 by 4 matrix R with a 4 by 1 column matrix
V where

and
V = [5 6 7 8]T

Then the product of R and V is the 4 by 1 column matrix

In Computer Graphics, the product of two matrices is used for so-called transformations. For
example, if we want to translate, scale or rotate an object, we multiply each of its points (specified
as column matrices) by the applicable transformation matrix. See Section 4.10 of Angel (2009) for a
discussion of the different transformation matrices that are used.

2.17 Determinant of a matrix

The determinant of a matrix is a scalar and can only be calculated for square matrices. In particular,

the determinant ∆ of an n by n matrix A is defined as (for some j) where

and where Mij is the minor of matrix A (i.e. the matrix formed by eliminating
row i and column j from A).

For example, say we have the following 3 by 3 matrix:

Then
 19 COS3712/102/3/2016

The determinant of a matrix is used for various purposes, for example to determine whether a
collection of vectors are linearly independent. For example, the fact that the determinant of above
matrix is 0 means that the vectors (1, 2, 3), (4, 5, 6) and (7, 8, 9) are linearly dependent (i.e. not
linearly independent).

3 References

Angel, E. (2012) Interactive Computer Graphics: A Top-Down Approach Using Shader Based
OpenGL. 6th edition. Addison-Wesley.

Astle, D. & Hawkins, K. (2002) OpenGL Games Programming First edition. Course Technology
PTR.

Deitel, H.M & Deitel, P.J. (2000) C How to Program. Third edition. Prentice Hall

UNISA 2014