Notes for Tuesday and Thursday February 25-27 class -- Matrix transformations

 

We talked about 4x4 matrices, and our convention for storing them in column major order.

For example, the GLSL constructor:

      mat4(0.,1.,2.,3.,  4.,5.,6.,7.,  8.,9.,10.,11.,  12.,13.,14.,15.)
represents:
  0.  4.  8.  12.
  1.  5.  9.  13.
  2.  6.  10.  14.
  3.  7.  11.  15.

We talked about 4x4 matrix transformations, and the six most useful basic matrix primitives:
 
identity()

      Set to:

  1  0  0  0
  0  1  0  0
  0  0  1  0
  0  0  0  1
 
translate(tx,ty,tz)

      Transform by:

  1  0  0  tx
  0  1  0  ty
  0  0  1  tz
  0  0  0  1
 
rotateX(θ)

      Transform by:

  1  0  0  0
  0  cos θ  -sin θ  0
  0  sin θ  cos θ  0
  0  0  0  1
 
rotateY(θ)

      Transform by:

  cos θ  0  sin θ  0
  0  1  0  0
  -sin θ  0  cos θ  0
  0  0  0  1
 
rotateZ(θ)

      Transform by:

  cos θ  -sin θ  0  0
  sin θ  cos θ  0  0
  0  0  1  0
  0  0  0  1
 
scale(sx,sy,sz)

      Transform by:

  sx  0  0  0
  0  sy  0  0
  0  0  sz  0
  0  0  0  1

At the end of Tuesday's lecture we watched WORLD BUILDER by Bruce Branit

The code for everything we did in class this week is at: hw4.zip

Homework -- due before start of class on Thursday March 5

For homework, you need to implement a Matrix object and apply it to animate that triangle strip we created in class.

I got you started by creating a Javascript class for Matrix objects.

You can see it near the bottom of index.html, in the section that looks like:

   function Matrix() {
      ...
   }

   let matrix = new Matrix();
Your job is to finish implementing the Matrix class, and then apply it to creating an animation.

Also, if you are feeling ambitious, feel free to modify the vertex[] array in lib3.js to create a different shape.

As usual, be creative. Use your imagination. Impress me. :-)