A Visual Explorable of Matrix Transformations

What do matrices mean to you?

Why do we need a way to represent an array of rows and columns of numbers, and to execute computations and operations between them?

[12−20][−12]=[32]\left[\begin{array}{r} 1 & 2 \ -2 & 0 \end{array}\right]\left[\begin{array}{r} -1 \ 2 \end{array}\right]=\left[\begin{array}{l} 3 \ 2 \end{array}\right]

In school, you may recall reluctantly performing drill after drills of matrix-vector multiplications mechanically. You may even have been taught to memorize several inane formulas.

[abcd][xy]=x[ac]+y[bd]=[ax+bycx+dy] \begin{aligned} {\left[\begin{array}{ll} a & b \ c & d \end{array}\right]\left[\begin{array}{l} x \ y \end{array}\right] } & =x\left[\begin{array}{l} a \ c \end{array}\right]+y\left[\begin{array}{l} b \ d \end{array}\right] \ & =\left[\begin{array}{l} a x+b y \ c x+d y \end{array}\right] \end{aligned}

Let’s explore a deeper, and a more visual intuition behind what matrices represent.

A vector multiplied by a matrix returns yet another vector — it transforms a vector into a new vector. Let’s visualize this transformation with an example.

Let’s first think about what the coordinates of a vector represent.

In the xyxy-coordinate plane, any vector can be thought of as the sum of two scaled vectors: the unit vector in the xx-direction, and the unit vector in the yy-direction.

[−12]=−1[10]+2[01]\textcolor{#04cefb}{\left[\begin{array}{r} \textcolor{#ff79c6}{-1} \ \textcolor{#bd93f9}{2} \end{array}\right]}=\textcolor{#ff79c6}{-1}\left[\begin{array}{l} \textcolor{#ff57b6}{1} \ \textcolor{#ff57b6}{0} \end{array}\right] +\textcolor{#bd93f9}{2}\left[\begin{array}{l} \textcolor{#aa73f7}{0} \ \textcolor{#aa73f7}{1} \end{array}\right] These are also known as our standard basis vectors. The vector’s coordinates encode the amount to scale each individual basis vector, before adding them up.

This scaling and addition of vectors is called a linear combination, and every vector can be expressed as a linear combination of basis vectors.

[abcd][xy]=x[ac]+y[bd]=[ax+bycx+dy] \begin{aligned} {\left[\begin{array}{ll} \textcolor{#ff57b6}{a} & \textcolor{#aa73f7}{b} \ \textcolor{#ff57b6}{c} & \textcolor{#aa73f7}{d} \end{array}\right]\textcolor{#04cefb}{\left[\begin{array}{l} \textcolor{#ff79c6}{x} \ \textcolor{#bd93f9}{y} \end{array}\right]} } & =\textcolor{#ff79c6}{x}\left[\begin{array}{l} \textcolor{#ff57b6}{a} \ \textcolor{#ff57b6}{c} \end{array}\right]+\textcolor{#bd93f9}{y}\left[\begin{array}{l} \textcolor{#aa73f7}{b} \ \textcolor{#aa73f7}{d} \end{array}\right] \ & =\textcolor{#04cefb}{\left[\begin{array}{l} \textcolor{#ff57b6}{a} \textcolor{#ff79c6}{x}+\textcolor{#aa73f7}{b} \textcolor{#bd93f9}{y} \ \textcolor{#ff57b6}{c} \textcolor{#ff79c6}{x}+\textcolor{#aa73f7}{d} \textcolor{#bd93f9}{y} \end{array}\right]} \end{aligned}

Did you notice anything similar with the expression for matrix-vector multiplication? A vector multiplied with a matrix can also be expressed as a linear combination; only this time the standard basis vectors are replaced by the columns of the matrix.

[12−20][−12]=−1[1−2]+2[20]=[32]\begin{aligned} {\left[\begin{array}{r} \textcolor{#ff57b6}{1} & \textcolor{#aa73f7}{2} \ \textcolor{#ff57b6}{-2} & \textcolor{#aa73f7}{0} \end{array}\right] \textcolor{#04cefb}{\left[\begin{array}{r} \textcolor{#ff79c6}{-1} \ \textcolor{#bd93f9}{2} \end{array}\right]} } & =\textcolor{#ff79c6}{-1}\left[\begin{array}{r} \textcolor{#ff57b6}{1} \ \textcolor{#ff57b6}{-2} \end{array}\right]+\textcolor{#bd93f9}{2} \left[\begin{array}{r} \textcolor{#aa73f7}{2} \ \textcolor{#aa73f7}{0} \end{array}\right] \ & = \left[\begin{array}{l} \textcolor{#04cefb}{3} \ \textcolor{#04cefb}{2} \end{array}\right] \end{aligned}

In other words, a matrix can be viewed as a way of packaging information about the new basis vectors that we want. This is the core insight: a matrix transforms a vector by transforming the original basis vectors; creating an entirely new coordinate system.

Again, the transformed vector is a linear combination of the new basis vectors, which are scaled by the coordinates of the original vector.

In that vein, a matrix transformation appears to warp and transform space. To get a visceral feel of this, let’s visualize what happens to not just a single vector, but a sample of vectors in space, each multiplied by the same matrix.

In order to make the space less visually cluttered, we can represent each vector with just its tip as a point in space. We’ll transform the grid lines along too, overlaying on top a copy of the original.

The transformation appears to rotate and stretch the space, accordingly with where the new basis vectors land.

As we’ll see when you have a chance to tinker around with different basis vectors, a matrix performs a particular kind of transformation, called a linear transformation. Visually, you’ll notice that:

• All lines in the original space remain as lines, without getting curved, and
• Origin remains fixed in place.

As an example, all grid lines stay parallel and evenly spaced after the transformation.

[abcd][xy]=x[ac]+y[bd]=[ax+bycx+dy] \begin{aligned} {\left[\begin{array}{ll} \textcolor{#ff57b6}{a} & \textcolor{#aa73f7}{b} \ \textcolor{#ff57b6}{c} & \textcolor{#aa73f7}{d} \end{array}\right]\textcolor{#04cefb}{\left[\begin{array}{l} \textcolor{#ff79c6}{x} \ \textcolor{#bd93f9}{y} \end{array}\right]} } & =\textcolor{#ff79c6}{x}\left[\begin{array}{l} \textcolor{#ff57b6}{a} \ \textcolor{#ff57b6}{c} \end{array}\right]+\textcolor{#bd93f9}{y}\left[\begin{array}{l} \textcolor{#aa73f7}{b} \ \textcolor{#aa73f7}{d} \end{array}\right] \ & =\textcolor{#04cefb}{\left[\begin{array}{l} \textcolor{#ff57b6}{a} \textcolor{#ff79c6}{x}+\textcolor{#aa73f7}{b} \textcolor{#bd93f9}{y} \ \textcolor{#ff57b6}{c} \textcolor{#ff79c6}{x}+\textcolor{#aa73f7}{d} \textcolor{#bd93f9}{y} \end{array}\right]} \end{aligned}

Recap

• Any vector can be expressed as the addition of scaled basis vectors, i.e. a linear combination of basis vectors.
• A matrix can be viewed as a way to package information about a linear transformation. The columns of a matrix represent where the new basis vectors land after the transformation.
• Matrix-vector multiplication is a way to compute where a given vector lands after the transformation defined by a matrix.

With our understanding so far, try to tinker about and figure out what kinds of transformations are possible with matrices!

What basis vectors should you choose in order to scale space uniformly in all directions? How about a reflection, rotation or a shear?

Try it

• Drag the numbers to increase or decrease the values in the matrix or input vector
• Double click the numbers to input your own values in the matrix or input vector
• Scrub through the animation of the matrix transformation
• Scroll to zoom in or out
• Left click and drag to pan around the space

Beyond Two-Dimensions

So far we’ve only been talking about matrix transformations in two-dimensions on the xyxy-plane. Do the same intuitions carry over to higher dimensions?

To make up three dimensions, we have yet another standard basis vector — the unit vector in the zz-direction. This also means we’re now fiddling around with vectors of length 33 — representing the xyzxyz coordinates — and matrices of size 3×33\times3.

The concept of matrix transformations in 3D is exactly the same. The three basis vectors are transformed to their new locations, warping space along with them. These locations are completely determined by the columns of the matrix.

[11001−1011][−121]−1[100]+2[111]1[0−11]=[113]\begin{aligned} & {\left[\begin{array}{rrr} \textcolor{#ff57b6}{1} & \textcolor{#aa73f7}{1} & \textcolor{#ffa647}{0} \ \textcolor{#ff57b6}{0} & \textcolor{#aa73f7}{1} & \textcolor{#ffa647}{-1} \ \textcolor{#ff57b6}{0} & \textcolor{#aa73f7}{1} & \textcolor{#ffa647}{1} \end{array}\right]\textcolor{#04cefb}{\left[\begin{array}{r} \textcolor{#ff79c6}{-1} \ \textcolor{#bd93f9}{2} \ \textcolor{#ffb86c}{1} \end{array}\right]}} \ & \textcolor{#ff79c6}{-1}\left[\begin{array}{r} \textcolor{#ff57b6}{1} \ \textcolor{#ff57b6}{0} \ \textcolor{#ff57b6}{0} \end{array}\right]+\textcolor{#bd93f9}{2}\left[\begin{array}{r} \textcolor{#aa73f7}{1} \ \textcolor{#aa73f7}{1} \ \textcolor{#aa73f7}{1} \end{array}\right]\textcolor{#ffb86c}{1}\left[\begin{array}{r} \textcolor{#ffa647}{0} \ \textcolor{#ffa647}{-1} \ \textcolor{#ffa647}{1} \end{array}\right] \ & =\left[\begin{array}{r} \textcolor{#04cefb}{1} \ \textcolor{#04cefb}{1} \ \textcolor{#04cefb}{3} \end{array}\right] \end{aligned}

Originally, any vector is composed of a linear combination of these three standard basis vectors. To figure out the where the vector lands after the transformation, it is a linear combination of the transformed basis vectors, each scaled by the respective coordinates in the starting vector.

From these visually-focused examples we’ve seen thus far, the most obvious application of matrix transformations would be that of computer graphics. In fact, this is precisely how this article was built! Matrices provide a language to rotate, scale and translate vectors and points and consequently entire objects in 2D or 3D space.

Go forth and wrap your head around matrix transformations in 3D! Now you have a whole additional dimension to fidget around with.

Try it

• Drag the numbers to increase or decrease the values in the matrix or input vector
• Double click the numbers to input your own values in the matrix or input vector
• Scrub through the animation of the matrix transformation
• Scroll to zoom in or out
• Left click and drag to pan around the space
• Right click and drag to rotate around the space