The
Matrix Arcade

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 $xy$-coordinate plane, any vector can be thought of as the sum of two scaled vectors: the unit vector in the $x$-direction, and the unit vector in the $y$-direction.

$$\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.

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.

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.

Beyond Two-Dimensions

So far we've only been talking about matrix transformations in two-dimensions on the $xy$-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 $z$-direction. This also means we're now fiddling around with vectors of length $3$ — representing the $xyz$ coordinates — and matrices of size $3\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.

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.