Project 2 - Transformations Demo

Here is the base demo, with no transforms set up initially! Feel free to fiddle with it, or read through the more guided demos below it.

 1.00  0.00  0.00  0.00
 0.00  1.00  0.00  0.00
 0.00  0.00  1.00  0.00
 0.00  0.00  0.00  1.00

Translation

This translates in the +Y direction (up on the screen). +X is towards the right of the screen, and +Z is into the screen. Observe that the +Z transform is not noticable until a perspective value is set.

If the vertices end up outside the preset boundaries, the shapes will be clipped.

 1.00  0.00  0.00  0.00
 0.00  1.00  0.00  0.00
 0.00  0.00  1.00  0.00
 0.00  0.50  0.00  1.00

  1. (1) Translate(0.00, 0.50, 0.00)

Scale

Scaling lets us squish/stretch the shape on different axes.

 0.50  0.00  0.00  0.00
 0.00  1.50  0.00  0.00
 0.00  0.00  1.00  0.00
 0.00  0.00  0.00  1.00

  1. (1) Scale(0.50, 1.50, 1.00)

Reflection

This mirrors the vertices across one of the planes. In this case, it is reflected across the X axis. Notice that the produced transformation matrix is the same as when Scale X is set to -1 and Scale Y and Z are set to 1.

-1.00  0.00  0.00  0.00
 0.00  1.00  0.00  0.00
 0.00  0.00  1.00  0.00
 0.00  0.00  0.00  1.00

  1. (1) Reflect(Y-Z Plane)

Skew

This demo shows skew! The two parameters, S and T, control how the third axis affects the selected axes.

 1.00  0.00  0.00  0.00
 0.50  1.00  0.00  0.00
 0.00  0.00  1.00  0.00
 0.00  0.00  0.00  1.00

  1. (1) SkewYZ(s=0.50, t=0.00)

Rotation

This demo rotates the pyramid 45° around the Y axis. Fiddle with the axis of rotation, animate the rotation angle, and try adding an additional rotation transform afterwards!

 0.71  0.00  0.71  0.00
 0.00  1.00  0.00  0.00
-0.71  0.00  0.71  0.00
 0.00  0.00  0.00  1.00

  1. (1) RotateY(45.00°)

Inversion

This demo uses inversion of a transform to perform a rotation around an axis offset from the origin.

Notice how a translation, followed by a rotation, followed by the inverse translation allows us to rotate about an axis displaced from the origin. In this example, try adjusting the y rotation and notice how it rotates around the axis through one of the edges of the pyramid.

 0.64  0.00  0.77  0.00
 0.00  1.00  0.00  0.00
-0.77  0.00  0.64  0.00
 0.33  0.00  0.15  1.00

  1. (1) Translate(0.20, 0.00, 0.00)

  2. (2) RotateY(50.00°)

  3. (3) Invert(Translate(0.20, 0.00, 0.00))