2D transformations

Matrices that manipulate 2D vectors

How do we point vectors in the plane in other directions? How do we scale (shorten, lengthen) them? We use matrices and matrix multiplication for these transformations. Most video games use vectorized graphics, where every important point of some moving figure is a vector drawn from some origin on the screen. Those vectors are transformed mathematically by matrix multiplication in order to produce translation, rotation, skewing and other effects.

In this section we'll look at some of the 2×2 matrices that transform 2-D vectors (vectors in a plane). The transformations we'll look at are

Translation: moving right, left, up and down without any rotation or other kind of transformation,
Scaling: changing size – shrinking or expanding the length of a vector,
Skewing: slanting a figure composed of more than one vector,
Rotating: Turning a vector by a known angle.

Translations

Translation of a 2-D vector is done by adding a constant value to its x and/or y coordinate(s). Oddly, translation is perhaps the least straightforward operation on vectors in terms of the geometry. We have to be careful about what we are translating. The figure below shows vector (2, 2) extending from the origin (vector on the right).

If we want to translate just that vector two units to the left, it's not enough to subtract 2 from the x-coordinate of (2, 2), which would give us the vector (0, 2), which doesn't have the same direction (slope) as (2, 2). We actually need to subtract 2 from the x coordinates of both the origin (0, 0) and the tip of vector (2, 2), which gives us the properly-translated vector on the left. We do translations like this all the time to manipulate vectors numerically.

The second scenario is when vectors describe the vertices or special points of some figure. These are really just sums and differences of vectors, and here we only care about the locations of the pointed ends.

The figure below shows the square (pink) formed by vectors (1, 1), (-1, 1), (-1,-1) and (1,-1). The dotted black square is formed from translating the ends of those vectors one unit to the right: (2, 1), (0, 1), (0,-1) and (2,-1). Pretty simple.

There is a matrix method for doing this translation. It involves "padding" the vector with an extra 1. For a 2×2 translation, the matrix is

$$\left( \begin{matrix} 1 & 0 & T_x \\ 0 & 1 & T_y \\ 0 & 0 & 1 \end{matrix} \right)$$

where $T_x$ and $T_y$ are the x- and y-translation distances. Here's how we calculate the translations of the vertices of that square (we'll do two):

$$\left( \begin{matrix} 1 & 0 & 1 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix} \right)\left( \begin{matrix} 1 \\ 1 \\ 1 \end{matrix} \right) = \left( \begin{matrix} 2 \\ 1 \\ 1 \end{matrix} \right)$$

$$\left( \begin{matrix} 1 & 0 & 1 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix} \right)\left( \begin{matrix} 1 \\ -1 \\ 1 \end{matrix} \right) = \left( \begin{matrix} 2 \\ -1 \\ 1 \end{matrix} \right)$$

The result vectors are (2, 1) and (2,-1). The last 1 is "padding" so that the matrix method works, and is dropped to get the solution.

Scaling

A scaling matrix takes a vector or set of vectors, and expands or reduces it along one or more of the two dimensions, x and y. The generic scaling matrix looks like this:

$$ \left( \begin{matrix} S_x & 0 \\ 0 & S_y \end{matrix} \right),$$

where $S_x$ and $S_y$ are scaling factors in the x- and y-directions. Let's see how this works by applying a scaling matrix to the square, graphed here, formed by the endpoints of vectors (1, 1), (-1, 1), (-1,-1) and (1,-1). Here are the multiplications of our scaling matrix, with $S_x = S_y = 2:$

$$ \left( \begin{matrix} 2 & 0 \\ 0 & 2 \end{matrix} \right) \left( \begin{matrix} 1 \\ 1 \end{matrix} \right) = \left( \begin{matrix} 2 \\ 2 \end{matrix} \right)$$

$$ \left( \begin{matrix} 2 & 0 \\ 0 & 2 \end{matrix} \right) \left( \begin{matrix} -1 \\ 1 \end{matrix} \right) = \left( \begin{matrix} -2 \\ 2 \end{matrix} \right)$$

$$ \left( \begin{matrix} 2 & 0 \\ 0 & 2 \end{matrix} \right) \left( \begin{matrix} -1 \\ -1 \end{matrix} \right) = \left( \begin{matrix} -2 \\ -2 \end{matrix} \right)$$

$$ \left( \begin{matrix} 2 & 0 \\ 0 & 2 \end{matrix} \right) \left( \begin{matrix} 1 \\ -1 \end{matrix} \right) = \left( \begin{matrix} 2 \\ -2 \end{matrix} \right)$$

Both the original square and the expanded square are plotted here. Clearly our scaling matrix "blew up" the figure by a factor of 2. Notice that all four corner vectors point in their original directions, but they have been elongated to twice their original length. The length of (1, 1) is

$$L_{(1,1)} = \sqrt{1^2 + 1^2} = \sqrt{2} \; \text{units}$$

and the length of (2, 2) is

$$ \begin{align} L_{(2,2)} = \sqrt{2^2 + 2^2} &= \sqrt{8} \\[4pt] &= 2 \sqrt{2} \; \text{units} \end{align}$$

It's not too difficult to see that we might construct a scaling matrix in which

$S_x, \; S_y \lt 1,$ which would shrink the vector rather than expand it, and

$S_x \ne S_y,$ which would scale the vector differently along the x- and y-axes.

For example, matrix A would stretch by a factor of two along the x-axis and shrink by a factor of two along the y-axis, and matrix B would increase the y-axis scaling by 120% while the x-axis scale would be reduced to 50%.

$$ A = \left( \begin{matrix} 2 & 0 \\ 0 & \frac{1}{2} \end{matrix} \right) \; \; B = \left( \begin{matrix} 0.5 & 0 \\ 0 & 1.2 \end{matrix} \right)$$

It's also clear that we could construct scaling matrices for spaces with more dimensions. for example, here's the form of a 3-D scaling matrix:

$$ S = \left( \begin{matrix} S_x & 0 & 0 \\ 0 & S_y & 0 \\ 0 & 0 & S_z \end{matrix} \right)$$

A little further on, we'll learn about combining scaling with translation and other manipulations.

Skewing

To skew a plane figure in this sense means to cause its angles to change uniformly in some direction. A skewed rectangle looks like a non-rectangular parallelogram. Here's how it works

One possible 2-D skewing matrix might be

$$K = \left( \begin{matrix} 1 & 0.25 \\ 0 & 1 \end{matrix} \right)$$

Let's once again consider our square with corners (1, 1), (-1, 1), (-1,-1) and (1,-1), and apply the skewing matrix:

$$ \left( \begin{matrix} 1 & 0.25 \\ 0 & 1 \end{matrix} \right) \left( \begin{matrix} 1 \\ 1 \end{matrix} \right) = \left( \begin{matrix} 1.25 \\ 1 \end{matrix} \right)$$

$$ \left( \begin{matrix} 1 & 0.25 \\ 0 & 1 \end{matrix} \right) \left( \begin{matrix} -1 \\ 1 \end{matrix} \right) = \left( \begin{matrix} -0.75 \\ 1 \end{matrix} \right)$$

$$ \left( \begin{matrix} 1 & 0.25 \\ 0 & 1 \end{matrix} \right) \left( \begin{matrix} -1 \\ -1 \end{matrix} \right) = \left( \begin{matrix} -1.25 \\ -1 \end{matrix} \right)$$

$$ \left( \begin{matrix} 1 & 0.25 \\ 0 & 1 \end{matrix} \right) \left( \begin{matrix} 1 \\ -1 \end{matrix} \right) = \left( \begin{matrix} 0.75 \\ -1 \end{matrix} \right)$$

Both quadrilaterals are graphed here so you can see the effect of skewing. It's like grasping the top and bottom of the square and moving them in opposite directions, each by 0.25 units.

So we can devise some general 2-D skewing matrices for skewing in the x- and y- directions like this:

$$K_x = \left( \begin{matrix} 1 & k \\ 0 & 1 \end{matrix} \right) \; \; Ky = \left( \begin{matrix} 1 & 0 \\ k & 1 \end{matrix} \right)$$

In three dimensions, figures can be skewed in three directions, so the matrices are a little more complicated, but not much. You could figure it out.

Rotation

The generic 2-D rotation matrix looks like this:

$$R_{\theta} = \left( \begin{matrix} cos(\theta) & -sin(\theta) \\ sin(\theta) & cos(\theta) \end{matrix} \right)$$

where $\theta$ is the counter-clockwise rotation angle. We'd expect a rotation through $2\pi$ radians or 360˚ to leave a vector unchanged by such a matrix. For that angle that matrix is

$$R_{2\pi} = \left( \begin{matrix} cos(2\pi) & -sin(2\pi) \\ sin(2\pi) & cos(2\pi) \end{matrix} \right) \; = \; \left( \begin{matrix} 1 & 0 \\ 0 & 1 \end{matrix} \right)$$

Which is the identity matrix, so indeed, this rotation leaves any 2D vector unchanged. Now let's test a more interesting angle, $\theta = \frac{\pi}{2} = 45˚.$ Because $cos \left( \frac{\pi}{2} \right) = sin \left( \frac{\pi}{2} \right) = \frac{\sqrt{2}}{2},$ the rotation matrix is

$$R_{\pi/2} = \left( \begin{matrix} \frac{\sqrt{2}}{2} & -\frac{\sqrt{2}}{2} \\ \frac{\sqrt{2}}{2} & \frac{\sqrt{2}}{2} \end{matrix} \right)$$

Let's multiply this matrix by two vectors (just to have two examples) (1, 2) and (3,-1) to see what the effect is:

$$ \left( \begin{matrix} \frac{\sqrt{2}}{2} & -\frac{\sqrt{2}}{2} \\ \frac{\sqrt{2}}{2} & \frac{\sqrt{2}}{2} \end{matrix} \right) \left( \begin{matrix} 1 \\ 2 \end{matrix} \right) = \left( \begin{matrix} \frac{-\sqrt{2}}{2} \\ \frac{3\sqrt{2}}{2} \end{matrix} \right) $$

$$ \left( \begin{matrix} \frac{\sqrt{2}}{2} & -\frac{\sqrt{2}}{2} \\ \frac{\sqrt{2}}{2} & \frac{\sqrt{2}}{2} \end{matrix} \right) \left( \begin{matrix} 3 \\ -1 \end{matrix} \right) = \left( \begin{matrix} 2\sqrt{2} \\ \sqrt{2} \end{matrix} \right) $$

Here's what those vectors and their rotated counterparts look like:

You can prove to yourself that the angle between each pair of vectors is indeed 45˚ $(\pi/2)$ by calculating the dot products.

Reflection across x-y

The 2D matrix,

$$ \left( \begin{matrix} 0 & 1 \\ 1 & 0 \end{matrix} \right)$$

reflects any 2D vector across the line y = x (dashed line). The figure shows its action on the vector (1, 2). The multiplication is

$$ \left( \begin{matrix} 0 & 1 \\ 1 & 0 \end{matrix} \right)\left( \begin{matrix} 1 \\ 2 \end{matrix} \right) = \left( \begin{matrix} 2 \\ 1 \end{matrix} \right)$$

This transformation can come in handy. Recall that if a point (x, y) is on the graph of a function $f(x),$ the point (y, x) is on the graph of its inverse, $f^{-1}(x).$

Translation

Translation is motion in one or more of the three Cartesian (x, y, z) directions, or a combination of them, without any rotation.

Practice problems

Consider the vectors

$$A = \left( \begin{matrix} 2 \\ 3 \end{matrix} \right), \; \color{#E90F89}{\text{&}} \; \; B = \left( \begin{matrix} \frac{2 - 3\sqrt{3}}{2} \\ \frac{2\sqrt{3} + 3}{2} \end{matrix} \right)$$

Calculate the dot product $A\cdot B$ and use it to determine the rotation matrix for converting $A$ into $B.$

Using vector $(1, 3),$ show that counterclockwise rotation by $\frac{\pi}{4}$ and reflection across $y = x$ are not commutative.

Consider the figure with vertices at (0,1), (-1,0), (0,-1) and (1,0). Sketch the figure on a graph. Apply the skew matrix

$$\left( \begin{matrix} 1 & \frac{1}{2} \\ 0 & 1 \end{matrix} \right),$$

followed by a counterclockwise rotation by $\frac{\pi}{6},$ then redraw the resulting figure.

Show that rotation of a vector by $\pi$ has the same result as multiplication of the vector by the inversion matrix,

$$\left( \begin{matrix} -1 & 0 \\ 0 & -1 \end{matrix} \right),$$

xaktly.com by Dr. Jeff Cruzan is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. © 2016, Jeff Cruzan. All text and images on this website not specifically attributed to another source were created by me and I reserve all rights as to their use. Any opinions expressed on this website are entirely mine, and do not necessarily reflect the views of any of my employers. Please feel free to send any questions or comments to jeff.cruzan@verizon.net.

xaktly | Matrix algebra | vectors