Cross Product

In which you learn a new vector operation that produces a new vector perpendicular to its operands.

You remember the dot product. It measures the alignment between two vectors by combining the vectors' associated components together:

$$ \mathbf{p} \cdot \mathbf{q} = p_x \times q_x + p_y \times q_y + p_z \times q_z $$

The dot product is a scalar value that is maximized when \(p_x\) is near \(q_x\), \(p_y\) is near \(q_y\), and \(p_z\) is near \(q_z\).

In several of the input systems you are about to explore, you will make use of a different but related vector operation called the cross product. Stick out two of your fingers. The cross product of your two fingers is a third vector that is perpendicular to both. This perpendicular vector will be quite useful in many graphics algorithms. However, before you can do anything with the cross product, you must learn how to compute one.

Various symbols are used to represent the cross product. The standard multiplication symbol is commonly used. Be careful, though, because this symbol is used to mean several different things:

$$ \begin{aligned} \mathbf{M} \times \mathbf{q} &\leftarrow \text{matrix-vector multiplication} \\ \mathbf{p} \times 2 &\leftarrow \text{vector-scalar multiplication} \\ \mathbf{p} \times \mathbf{q} &\leftarrow \text{cross product} \end{aligned} $$

Unlike the dot product, which measures the similarity within each dimension, the cross product measures the dissimilarity between two different dimensions. There are three ways that the x-, y-, and z-dimensions may be paired. The cross product is therefore a 3-vector. Its three components each tell their own story about the two vectors:

• The x-coordinate measures the dissimilarity between the y- and z-coordinates of \(\mathbf{p}\) and \(\mathbf{q}\).
• The y-coordinate measures the dissimilarity between z and x.
• The z-coordinate measures the dissimilarity between x and y.

The more that the y- and z-coordinates of the two vectors are dissimilar, the bigger the x-coordinate of the cross product will be. Prove this to yourself by dragging around on the red and green vectors in this renderer:

The blue vector is the cross product of the other red and green vectors. What happens to the magnitude of the cross product as the vectors become similar?

Recall that the dot product of two normalized vectors is the cosine of the angle between them. The cross product's magnitude is the sine of the angle. When the angle is 0, the magnitude is 0. When the angle is 90 degrees, the magnitude is 1.

If all you care about is how to compute the product, here is your mathematical definition:

$$ \mathbf{p} \times \mathbf{q} = \begin{bmatrix} p_y \times q_z - p_z \times q_y \\ p_z \times q_x - p_x \times q_z \\ p_x \times q_y - p_y \times q_x \end{bmatrix} $$

Explore how the two vectors combine to form the cross product by entering some values for the x-, y-, and z-coordinates of \(\mathbf{p}\) and \(\mathbf{q}\):

Try entering components such that the x- and y-coordinates of the two vectors are the same but not 0. Then their xy-products will cancel out and the z-coordinate of cross product is 0. The xy-dimensions couldn't be more similar.

Mnemonic

You don't need to memorize the cross product formula, as you're probably just going to add a cross method to your Vector3 class. However, consider the following mnemonic if you want remember how to construct it.

Start with a table charting the interplay between the components of the two vectors:

Since the cross product is concerned with interactions across dimensions, zero out the interactions within the same dimension:

The zeroed interactions are terms of the dot product, not the cross product.

Starting at the 0 in each row, move rightward, counting to 2 and filling each cell with the current count. Wrap back to the start of the row as needed. The completed table looks like this:

The table serves as your guide for computing the components of the cross product. When computing the x-component, you ignore the x-row and x-column, leaving just the bottom-right of the table:

The cell marked 1 represents the product \(p_y \times q_z\). The cell marked 2 represents the product \(p_z \times q_y\). The x-component of the cross product \(\mathbf{c}\) is cell 1 minus cell 2:

$$ c_x = p_y \times q_z - p_z \times q_y $$

The y-component is computed by first ignoring the y-row and y-column:

And then again subtracting cell 2 from cell 1:

$$ c_y = p_z \times q_x - p_x \times q_z $$

The z-component is computed by first ignoring the z-row and z-column:

And then again subtracting cell 2 from cell 1:

$$ c_z = p_x \times q_y - p_y \times q_x $$

Exercises

The cross product is at the core of many graphics algorithms. Get to know it by completing the following exercises: