Modify this simple animated cube by one that does more general translation, rotation and scale transformations. We'll be getting to WebGL shortly, but for now we'll just be drawing lines on the HTML5 canvas to represent the edges of 3D shapes.

View the source of this page to see the JS that animates the cube. Your job is to replace the simple translation matrix in that script by more general software that implements and demonstrates all the types of matrix transformation primitives. To make your code work, you will also need to implement a 4x4 matrix multiply function.

A transformation matrix is a 4x4 array, but to be compatible with WebGL, you should represent your matrix as a column-major array with sixteen elements. For example, the translation matrix:

should be represented in JavaScript as: [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 5,1,-3,1 ];

X : Y : Z :
H: P : R :
S :