Transformations as Matrices

If you are not familiar with the mathematics behind transformations and have not examined the fields of a CGAffineTransform and NSAffineTransformStruct structures, the technology of transformations may strike you more like smoke and mirrors than hard science. The computer represents transformations using matrices. A matrix is a compact way for representing transformations (more specifically linear transformations), and matrices have a corresponding mathematics, Linear Algebra, that makes it easy to combine transformations and apply them to points.

Quartz 2D uses matrices to represent its affine transformations. The fields of the CGAffineTransform structure refer to specific portions of the matrix that represents the transformation. In this section we will very briefly discuss the matrix representation of transformations and how the fields of the CGAffineTransform structure relate to that representation. Unfortunately, this is not the proper context to present an extensive introduction to matrix mathematics and the way it relates to linear transformations of 2D graphics. Most modern introductory graphics texts cover matrices and transformations in some detail, and the curious reader should seek one of those for more information.

In its simplest form, a matrix is simply a sequence of numbers. When you write down a matrix, you usually arrange the numbers into a rectangular array with a fixed number of rows and columns of numbers. In representing the affine transformations for 2D graphics, the matrices contain three rows and three columns (a 3x3 matrix). One such matrix is the "identity matrix." The identity matrix looks like the following:

To combine transformations, the computer multiplies the matrices that represent the transformations together using the rules of Linear Algebra. The identity matrix is unique because if you take any matrix and multiply it by the identity matrix, you get back the original matrix. This is analogous to taking a real number and multiplying it by one.

Homogeneous Coordinates

When the computer wants to apply a transformation to a point, it interprets the point as a matrix and multiplies the point's matrix by the transformation. The result of this multiplication is a matrix that you can reinterpret as a new point. If you have a point (x,y), you can reinterpret it as a matrix of the following form:

The additional 1 at the end of the matrix may seem a bit unusual. This is a necessary addition to the matrix representation of a point. A three element matrix of this type represents a point in a homogeneous coordinate system. The details of what makes a homogenous coordinate system are largely irrelevant to this discussion other than to say this additional component allows you to use represent transformations using 3x3 matrices (if Quartz only had to support scaling and rotation, you could actually get by with just 2x2 matrices and without the additional component in the point matrix).

Matrix Representations of Transforms

The CGAffineTransform structure consists of six fields, a, b, c, d, tx, and ty. Putting these fields into their corresponding space in a 3x3 transformation matrix would look like this:

The fields of an NSAffineTransformStruct are similar except the fields m11, m12, m21, m22 are substituted for fields a through d. The numbers refer to the positions of those matrix elements in the matrix. m11, for example is the matrix element in row 1, column 1. The discussion continues using the a through d notation.

If you were to take the matrix representation of a point and multiply it, this matrix would result:

From this information we see that the a, b, c, and d entries in the matrix are multiplied by the x and y coordinates of our point. These fields correspond to the scaling and rotation potions of the transformation. The tx and ty fields are added to the results. These fields represent the translation portion of the transformation.

The third column of the transformation matrix ends up not contributing anything to the final point matrix. In representing affine transformations, this third column always has the values shown. That is why the CGAffi neTransforamation structure only contains six elements but represents a 3x3 (or nine element) matrix.

We can represent the three basic transformations using matrices as well. Here is the matrix that represents a translation:

The tx and ty elements of the matrix are the x and y offsets that are applied to the point. Substituting this matrix into the preceding matrix multiplication equation, you can see that sending a point through this matrix yields the point (x + tx, y + ty)(x + tx, y + ty).

The matrix for a scale transform looks like this:

The sx and sy entries represent the x and y scaling factors respectively. If this matrix is substituted into the point multiplication equation, the resulting point is (sx*x, sy *y)(sx*x, sy *y).

The rotation matrix requires augmentation of Linear Algebra with a touch of trigonometry. The matrix that represents a rotation incorporates the angle that we want to use in our rotation by using the sin and cos functions of trigonometry. The matrix that represents a rotational transformation is

Mulitplying this matrix by a point matrix yields a longer expression than the previous matrices:

If your application contains its own matrix mathematics, you can perform the calculations needed to construct a matrix yourself and simply fill in the fields of a CGAffineTransform structure. The Quartz 2D API provides a convenience routine, CGAffineTransformMake, to aid you in this task. Once you have an affine transformation that you've constructed this way, you can use it anywhere you need a transformation.

The transformations in Quartz 2D are one of the most pervasive and powerful features of the library, and using them effectively can greatly simplify the drawing process. More importantly, however, using transformations can add a lot of interest to your graphics. Prior to Quartz 2D, creating dials with spinning indicators or tabs with vertical orientations was difficult because QuickDraw did not make it easy to rotate graphics or text. With Quartz 2D and its transformations, these kinds of graphics are not only possible, but rather simple to produce. Keep your eyes peeled for opportunities to use transformations as the discussion of drawing with Quartz 2D continues.