Quantunet.com

My Account

Joins Us
Flash 8 Actionscript 2.0 Knowledgebase
The 2D Rotation Matrix  

The 2d rotation matrix operator can be used to rotate a point or set of points in 2 dimensional space. When the rotation matrix is multiplied by a vector it has the effect of changing the direction of the vector but not changing its magnitude.

Rotation About the z axis (yaw)

In flash the 2d rotation matrix can best be thought of as a 3x3 matrix with the following elements:



Where q is the angle of roation about the z axis (in radians) and x and y are the coordinates of a point in 2d space (x,y).

rotation matrix multiplication
This simplifies to the same equation for coordinates rotation as derived from trigonometric rotation about the z axis. Again this shows how matrices are ultimately used in coordinates transformation, they organize multiple operations and linear calculations into a clear and easy to manage format.

rotation matrix results

To learn more about how to rotate 2d points using trigonometry see: [Point Rotation Trigonometry Knowledgebase].


Note:
The rotation matrix operator used in this example could be simplified to a 2x2 matrix by removing all the zeros and ones. This would further simplify the multiplication however I have used an extended 3x3 matrix to show this operation as it ties in more consistently with the 3x3 transformation matrix used in flash.

Matrix Rotation Using Actionscript (movie clips)

In Flash there are two main ways to use rotation matrices to manipulate movie clips using a modified transformation matrix or using the rotation transformation "method".

Method I: Modified Transformation matrix (movie clip)

import flash.geom.Matrix;
var angle:Number = 0;

onEnterFrame = function{
angle +=5;
var cos:Number = Math.cos(angle);
var sin:Number = Math.sin(angle);

my_mc.transform.matrix = new Matrix(cos, sin, -sin, cos, Stage.width/2, Stage.height/2);
}

import flash.geom.Matrix;

this imports the flash matrix geometry class into the movie form the flash.geom package. The geom.Matrix class holds all the instructions that control the transformation matrix. The trans formation matrix determines how to change the coordinates of a movie clip or bitmap object so that they geometrically transform the object in 2d space. In this case we will be rotating a movie clip object by using the transformation matrix to rotate the 2d coordinates of the object in 2d space.

my_mc.transform.matrix = new Matrix(cos, sin, -sin, cos, Stage.width/2, Stage.height/2);

This constructs a new object (ie transformation matrix) to manipulate the properties of the movie clip "my_mc". The values of the elements a, b, c, and d are set to cos, sin, -sin and cos respectively. Then the value of tx and ty are set to half the stage with and half the stage height centralizing the movie clip in the middle of the stage.

Note: Only The values a,b,c,d , tx and ty can be set in the bult in translation matrix in flash 8. The other terms u, v and w are automatically set to 0,0 and 1 as the matrix class can only operate in 2 dimensional space.

To learn more about the transformation matrix see [The Transformation Matrix Knowledgebase].

Method II: Using a specific matrix transformation method (movie clip)

import flash.geom.Matrix;
var angle:Number = 0;

onEnterFrame = function{
angle +=5;

my_rotmatrix = new Matrix()
my_mc.my_rotmatrix.rotate(angle);
}

Matrix Rotation Using Actionscript (points)

2D Rotation of a Point (about the z axis)
In this example a single 2d point is rotated about the z axis using a simplified 2x2 rotation operator. Each "matrix" is actually a simple one dimensional array. The values of the x and y coordinates of the point (20, 150) are stored in the array "my_point_matrix" and the values for the rotation matrix operator are stored in "z_rot_matrix". The function "matrix_mult" is called which takes the arrays "my_point_matrix_ and "y_rot_matrix" as arguments. The function is defined to take the first array and multiply it by the second as though they were both structured as a matrix and multiplied together. It then takes the results of this matrix multiplication and returns a single array called "results_coords".

var q = 30*(Math.PI/180);

my_point_matrix = new Array (20,150);
z_rot_matrix = new Array (cos(q),cos(q), -sin(q),cos(q));

matrix_mult (my_point_matrix, z_rot_matrix);


matrix_mult (matrixA:Array, martrixB:Array):Array {
var result_coords:Array = new Array();

result_coords[0] = matrixA[0]*martrixB[0] + matrixA[1]*martrixB[2];
result_coords[1] = matrixA[0]*martrixB[1] + matrixA[1]*martrixB[3];

return result_coords;
}

2D Roation of Multiple Points (about the z axis)
This example has four 2d points stored in the array "my point_matrix" these are multiplied by the rotation matrix "z_rot_matrix" using the function "matrix_mult". The resulting array of values is then returned to the array "result_coords". Each one of the 2d points is rotated by the angle q about the z axis to create a new set of points.

var q = 30*(Math.PI/180);

my_point_matrix = new Array (20,150, 80,60, 95,130, 220,110);
z_rot_matrix = new Array (cos(q),cos(q), -sin(q),cos(q));

matrix_mult (my_point_matrix, z_rot_matrix);


matrix_mult (matrixA:Array, martrixB:Array):Array {
var result_coords:Array = new Array();

result_coords[0] = matrixA[0]*martrixB[0] + matrixA[1]*martrixB[3];
result_coords[1] = matrixA[0]*martrixB[1] + matrixA[1]*martrixB[4];

result_coords[2] = matrixA[2]*martrixB[0] + matrixA[3]*martrixB[3];
result_coords[3] = matrixA[2]*martrixB[1] + matrixA[3]*martrixB[4];

result_coords[4] = matrixA[4]*martrixB[0] + matrixA[5]*martrixB[3];
result_coords[5] = matrixA[4]*martrixB[1] + matrixA[5]*martrixB[4];

result_coords[6] = matrixA[6]*martrixB[0] + matrixA[7]*martrixB[3];
result_coords[7] = matrixA[6]*martrixB[1] + matrixA[7]*martrixB[4];

return result_coords;
}

To learn how to create a matrix coordinate rotation of 3d points see [3D Matrix Rotations Knowledgebase].

When manipulating a point or a set of multiple points in flash it is usefull to use matrix transformations as they can act help simplify and organize actionscript making it more elegant and easier to read or edit.

However there can be some notable performance drawbacks. For each matrix multiplication flash must complete a series of calculations to determine the value of each element of the resulting matrix each time. Even if in most cases the value the results of a majority of those calculations are trivial (equal to zero) the calculation still requires processor time and memory. If you are performing a simple transformation on a large number of points, using matrix operations is a cumbersome and simple set of linear equations would be less taxing for the processor. With all this said if you were to perform multiple transitions on a large number of points such as a transformation, distortion, and a rotation (at the same time) custom matrix multiplications are an efficient and elegant way to structure and manipulate code in actionsctipt as there would be no redundant ablutions because few if any terms in the transformation matrix would be equal to zero.

To learn more about matrices in flash see the [Matrices Knowledgebase].


© 2008 Quantunet LLC All Rights Reserved | Intellectual Property | Terms of Use | Privacy
Home | About Quantunet | FAQ's | Contact Us