
Notes for October 7 class  Introduction to matrices
Homogeneous coordinates
We can deal with both points in a scene and directions (which are essentially points at infinity)
by adding an extra coordinate, which we call the homogeneous coordinate.
For example, in two dimensions, we would write [x,y,w]
to represent (x/w, y/w).
In the example to the right, we have both points and directions.
The point at (1,0) is represented by [1,0,1],
whereas the direction vector (1,0) (shown in red)
is represented by [1,0,0].
By convention we place all points on the w=1 plane (shown in gray),
although scaling arbitrarily to [cx,cy,cz] still describes the
same point (x/w, y/w), as shown by the upward slanting arrows in the figure.



Coordinate transformations
The default coordinate system in three dimensions has
coordinate axes [1,0,0,0], [0,1,0,0] and [0,0,1,0], respectively
(the x, y and z global direction vectors).
Its origin is
[0,0,0,1] (the point (0,0,0)),
as shown in the figure to the right in black.
We can describe a transformed coordinate system
by redefining each of the x, y and z axes,
and by translating the origin to point t,
as shown in the figure to the right in blue.
Note that this is a very general representation.
For example, the new x, y and z directions
do not need to be perpendicular to each other.
Nor do they need to be unit length.
For



Transformation matrices
All of the information of a coordinate transformation
can be placed in a 4×4 matrix, as shown in the
figure to the right.
The x, y and z axes form the first three respective
columns of the matrix.
The origin t forms the rightmost column of the matrix.
In this class we will follow the convention of storing
the 16 matrix values in rowmajor order:
[
x_{0},
x_{1},
x_{2},
x_{3},
y_{0},
y_{1},
y_{2},
y_{3},
z_{0},
z_{1},
z_{2},
z_{3},
t_{0},
t_{1},
t_{2},
t_{3}
]



Transforming a point
We can use a 4×4 matrix to transform a vector.
By convention, we represent the input as a column vector, and place it to the right of the matrix.
Also, by convention, if we leave out the fourth (homogeneous) coordinate of the input,
we assume a value of 1.0 for its homogeneous coordinate,
unless otherwise specified.
The result of the transformation is another column vector,
which we obtain by taking the inner product
of each successive row of the matrix with the input vector.
In this case, the matrix is rotating the point (1,0,0) about the z axis.



The identity transformation
The identity matrix is the "do nothing" transformation.
It will transform any point or direction to itself.
You generally want to call the identity() method on a matrix
object to initialize that matrix.



The translate transformation
To translate a point, we use only the rightmost column of the matrix.
The rest of the matrix is the same as the identity matrix.
Note that translation affects only points, not directions.
Because the homogeneous coordinate of a direction is zero,
its value cannot be affected by the rightmost column of the matrix.



Rotate about the x axis
Rotation about the x axis only affects the y and z axes.
"Positive" rotation is counterclockwise
when looking from the positive x direction.



Rotate about the y axis
Rotation about the y axis only affects the z and x axes.
"Positive" rotation is counterclockwise
when looking from the positive y direction.



Rotate about the z axis
Rotation about the z axis only affects the x and y axes.
"Positive" rotation is counterclockwise
when looking from the positive z direction.



The scale transformation
Like rotation, a scale transformation (which makes shapes bigger or smaller)
only uses the topleft 3×3 portion of the 4#215;4 matrix.
In this case we are performing a uniform
scale, by using the same values for the three locations
along the diagonal of the matrix.
If we were to use differing values at these three locations,
then we would perform a nonuniform scale,
which would result in the shape becoming squashed or stretched.



For this week's assignment, we will define a shape as:
 A list of vertices
 A list of edges
Example: A square
 Vertices:
As an array of arrays:
 [1,1, 0],
 [ 1,1, 0],
 [1, 1, 0],
 [ 1, 1, 0]
Or as an array of objects (more flexible):
 new Vector3(1,1,0);
 new Vector3( 1,1,0);
 new Vector3(1, 1,0);
 new Vector3( 1, 1,0);
 Edges (an array of pairs of vertex indices):
[0,1], [1,3], [3,2], [2,0]
Example: A cube
 Vertices:
 new Vector3(1,1,1);
 new Vector3( 1,1,1);
 new Vector3(1, 1,1);
 new Vector3( 1, 1,1);
 new Vector3(1,1, 1);
 new Vector3( 1,1, 1);
 new Vector3(1, 1, 1);
 new Vector3( 1, 1, 1);
 Edges:
Left as an exercise for the reader. ☺
Viewport transformation:
You'll want to do all your 3D modeling and matrix math in "model space":
Values go from 1...+1 in both x and y.
But you will need to do your drawing as pixels in "image space":
Values go from 0...canvas.width in x (left to right).
Values go from 0...canvas.height in y (top to bottom).
To transform from 3D modeling space to pixels in image space:
px = (width / 2) + x * (width / 2);
py = (height / 2)  y * (width / 2);
The HTML5 Canvas object:
For this assignment you will really need to know only
the following few Canvas methods:
beginPath(), moveTo(x,y), lineTo(x,y), stroke()
But you might be interested in exploring the full
power of the Canvas object.
By following this link you can find a
comprehensive reference
to the methods available to you for drawing on an HTML5 Canvas.
Examples we started in class:
Both of the below interactive diagrams make use of
my little convenience library
drawlib1.js.
To see how the diagrams themselves are implemented you can
look at the Javascript source for this page:
In Chrome: View → Developer → View Source
In Firefox: Tools → Web Developer → Page Source
In Safari: Develop → Show Page Source


Here is where you would put a description of what you
are trying to explain with this animated diagram.
For example,
in this case I am showing how to use
cursor.x
and
cursor.y
to position a square, while using
cursor.z
(the indicator of whether the mouse button is pressed)
to change the color of the square.



Here is where you would put a description of what you
are trying to explain with this animated diagram.
For example, here I am showing how to animate
on object using variable
time .

The above example is also available via this zip file.
Homework (due before class on Wednesday October 14)
Create a Matrix object class in Javascript.
For that class, implement the following methods:
identity()
translate(x, y, z)
rotateX(theta)
rotateY(theta)
rotateZ(theta)
scale(x, y, z)
transform(src, dst) // arguments are vectors
Show that you have these working by creating
the vertices and edges of some cool shape or set of shapes,
applying matrix transformations to them every
animation frame,
and showing the result by drawing on a Canvas to create an animated diagram.
You will get extra credit
if you create something really beautiful or
interestingly interactive,
maybe that tells a story or forms a fun game or puzzle.
