#797 – Scale Transforms Using Homogeneous Coordinates

You can apply a scale transform to a 2D point using a 2 x 2 transformation, multiplying it by a 2 x 1 point matrix.  This results in a second 2 x 1 point matrix that represents the transformed (scaled) point.

789-001

 

In WPF, however, scaling transforms are done using homogeneous coordinates, which means that we multiply a 3 x 3 transformation matrix by a 3 x 1 point matrix.

Untitled

 

In the resulting 3 x 1 matrix, the first and second rows contain the x and y values of the transformed (scaled) point.

 

Advertisements

#796 – WPF Transforms Use Homogeneous Coordinates

We saw that we can perform scale and rotation transforms on points in 2D by multiplying a 2 x 2 transformation by a 2 x 1 matrix representing a point.  A translation transform, however, could not be accomplished using a 2 x 2 matrix.  Instead, we multiply a 3 x 3 matrix by a 3 x 1 matrix that represents the 2D point.

795-001

In WPF, all 2D transforms are accomplished using a 3 x 3 transformation matrix and a 3 x 1 point matrix.  The 3 x 1 matrix contains the x and y components of the point in the first two rows and a value of 1 as the third row.  This is done so that we can easily combine scale, rotate and translation transforms, since they all use matrices of the same dimensions.

In representing a 2D point using a 3 x 1 matrix, WPF is making us of homogeneous coordinates, which involves adding a third dimension, represented by the third row of the point matrix.

#795 – How a Translation Transform Works

A 2D translation transform in WPF is accomplished by using a transformation matrix.  The transformation matrix is multiplied by another matrix representing a single 2D point to be transformed.  The resulting matrix describes the transformed point.

Unlike rotation and scaling transforms, we can’t perform a translation by multiplying a 2 x 2 matrix (representing the transform) by a 2 x 1 matrix (representing the point).  Instead, we multiple a 3 x 3 matrix by a 3 x 1 matrix, as shown below.

795-001

In this case, we represent the point (x, y) not by a 2 x 1 matrix, but by a 3 x 1 matrix where the third row is always 1.  The resulting 3 x 1 matrix then also contains a third row with a value of 1 and the new transformed (x, y) point in the first two rows.

Notice that we get what we expect for a translation.  Tx is added to x and Ty is added to y, representing a translation.

#794 – Matrix Multiplication, Part IV – Some Examples

Here are a few examples of doing matrix multiplication, for some of the typical matrix sizes used for doing 2D and 3D transforms.

794-002

 

#792 – Matrix Multiplication, Part II – Multiplying a Row by a Column

When you multiply two matrixes together, you perform a series of operations where you multiply a row in the first matrix by a column in the second matrix.  This multiplication results in a single term that will appear in the resulting matrix.

To multiply a row by a column, they must have the same number of elements.  If you consider each of them as vectors, you multiply them by calculating the dot product of the two vectors.

A dot product is calculated by multiplying the corresponding elements in the two vectors and then adding the terms together.

For example, we might multiply a row containing the values a, b, c with a column containing the values x, y, z as follows:

792-001

#790 – How a Rotation Transform Works

A 2D rotation transform in WPF is accomplished by using a transformation matrix.  The transformation matrix is multiplied by another matrix representing a single 2D point to be transformed.  The resulting matrix describes the transformed point.  When rotating a user interface element, this transformation is done individually on each point to generate the set of points representing the transformed element.

The transformation operation for rotation looks like:

790-001

Where ϴ represents the Angle property of the ScaleTransform, indicating the number of degrees to rotate the point in a clockwise direction.

This leads to the equations:

790-002

#787 – Transforming a Point Using Matrix Multiplication

In WPF, all 2D transformations (e.g. scale, rotate, translate) are done internally using matrix multiplication.

Every point that you want to transform is represented as a 2 x 1 matrix (two rows and one column).  For example:

787-001

 

Assume that you want to transform this point, represented by x and y, into a new point.  We do this by multiplying a 2 x 2 transformation matrix by our original 2 x 1 matrix.  The result is another 2 x 1 matrix, containing our new (transformed) point.

The operation is written as follows, assuming that a, b, c and represent the four values in our 2 x 2 matrix.  We multiply the 2 x 2 transformation matrix by the original 2 x 1 matrix to get a new 2 x 1 matrix.

787-002

 

(Don’t worry about the values of a, b, c and d for now–we’ll fill them in later).  The actual multiplication is done as follows:

787-003