# Matrices In Action, Grafix 2.0

The 4-by-4 matrices in the panels on the following screenshots are at the heart of computer graphics. They describe objects moving in three-dimensional space and are essential to MATLAB's Handle Graphics, to CAD (Computer Added Design) packages, to CGI (Computer Graphics Imagery) in films, and to most popular video games.

### Contents

#### Grafix 2.0

Here is the opening screen from version 2.0 of Grafix, my tool for investigating the matrices involved in 3-D computer graphics. The MATLAB code for Grafix is availble here.

I am interested in the matrix in the panel, which I call M. Many matrices like this one describe the dyamic transformations to be made on a set of target objects in a complex three-dimensional scene. This particular M is the product of a scaling and a rotation that results in the size and orientation of the plane shown.

I also want to point out the coordinate axes being used. This is view(3), MATLAB's default 3-D cordinate system. The positive $x$-axis goes up and to the right on the screen, the positive $y$-axis up and to the left, and the positive $z$-axis goes straight up.

#### Rotations

The homogeneous coordinates system used in modern computer graphics makes it possible to describe rotations, translations and many other operations with 4-by-4 matrices. These matrices operate on vectors with the position of an object in the first three components and, for now, a one as the fourth component, eg. [ $x$, $y$, $z$, 1 ]',

Rotations are described by products of these matrices, each of which operates on only two of the first three components of the vector. The first matrix, $R_x$, leaves $x$ unchanged while it rotates $y$ and $z$. The second matrix, $R_y$, leaves $y$ unchanged while it rotates $x$ and $z$. And the third matrix, $R_z$, leaves $z$ unchanged while it rotates $x$ and $y$.

$$R_x(\theta) = \left[ \begin{array}{rrrr} 1 & 0 & 0 & 0 \\ 0 & \cos{\theta} & -\sin{\theta} & 0 \\ 0 & \sin{\theta} & \cos{\theta} & 0 \\ 0 & 0 & 0 & 1 \end{array} \right]$$

$$R_y(\theta) = \left[ \begin{array}{rrrr} \cos{\theta} & 0 & -\sin{\theta} & 0 \\ 0 & 1 & 0 & 0 \\ \sin{\theta} & 0 & \cos{\theta} & 0 \\ 0 & 0 & 0 & 1 \end{array} \right]$$

$$R_z(\theta) = \left[ \begin{array}{rrrr} \cos{\theta} & -\sin{\theta} & 0 & 0 \\ \sin{\theta} & \cos{\theta} & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right]$$

#### Pitch, Roll, and Yaw

The terms pitch, roll and yaw are often used to describe the motion of vehicles like aircraft, marine craft, and spacecraft. Pitch is $R_x$, rotation about the $x$-axis.

Roll is $R_y$, rotation about the $y$-axis.

And yaw is $R_z$, rotation about the $z$-axis.

#### Translations

Translations are described by matrices with values in the fourth column. Multiplying a vector by one of these matrices produces a translation in the direction of the corresponding axis.

$$T_x(\delta) = \left[ \begin{array}{rrrr} 1 & 0 & 0 & \delta \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right]$$

$$T_y(\delta) = \left[ \begin{array}{rrrr} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & \delta \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right]$$

$$T_z(\delta) = \left[ \begin{array}{rrrr} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & \delta \\ 0 & 0 & 0 & 1 \end{array} \right]$$

While it is true that translations could be accomplished simply by adding the increment to the specified coordiate, the use of matrix multiplication allows translations to be combined in a uniform way with rotations and other operations. The arithmetic units on today's Graphics Processing Units, GPUs, are designed to do 4-by-4 matrix multiplications at speeds hundreds of times faster than general purpose Central Processing Units, CPUs.

#### Horizontal and Vertical

Inspired by David Singmaster's notation for Rubik's cubes, L, R, B, F, U, and D, we can use the descriptive terms left and right for horizontal motion in the $x$ direction; back and forth for horizontal motion in the $y$ direction; and up and down for vertical motion in the $z$ direction.

$T_x$, left and right.

$T_y$, back and forth.

$T_z$, up and down.

#### Scalings

This matrix applies a single scaling factor to all three axes.

$$S(\sigma) = \left[ \begin{array}{rrrr} \sigma & 0 & 0 & 0 \\ 0 & \sigma & 0 & 0 \\ 0 & 0 & \sigma & 0 \\ 0 & 0 & 0 & 1 \end{array} \right]$$

#### Larger and Smaller

$S$

#### Suggestions

Refresh your browser to syncronize the animations.