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 right-most column of the matrix. In this class we will follow the convention of storing the 16 matrix values in row-major order: [ x0, x1, x2, x3,   y0, y1, y2, y3,   z0, z1, z2, z3,   t0, t1, t2, t3 ]

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 right-most 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 right-most 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 top-left 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 non-uniform 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:

  0. [-1,-1, 0],
  1. [ 1,-1, 0],
  2. [-1, 1, 0],
  3. [ 1, 1, 0]

  Or as an array of objects (more flexible):

  0. new Vector3(-1,-1,0);
  1. new Vector3( 1,-1,0);
  2. new Vector3(-1, 1,0);
  3. 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:

  0. new Vector3(-1,-1,-1);
  1. new Vector3( 1,-1,-1);
  2. new Vector3(-1, 1,-1);
  3. new Vector3( 1, 1,-1);
  4. new Vector3(-1,-1, 1);
  5. new Vector3( 1,-1, 1);
  6. new Vector3(-1, 1, 1);
  7. 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.