MODULES Uize.Math.Matrix2D
1. Introduction
The Uize.Math.Matrix2D module provides support for building and applying 2-D affine transformations in a 2-dimensional plane.
DEVELOPERS: Petar Ivanov & Ben Ilegbodu, original code contributed by Zazzle Inc.
1.1. Not a Uize Subclass
First off, it's worth emphasizing that the Uize.Math.Matrix2D object is not a Uize.Class subclass, but a very lightweight object.
As such, the Uize.Math.Matrix2D object does not support events, does not provide state properties, does not inherit subclassing facilities from the Uize.Class base class, etc. This object is deliberately designed to be very lightweight and to have a really tiny footprint - in the spirit of JavaScript's native objects, such as String, Number, Date, and the like.
1.2. Examples
There are no dedicated showcase example pages for the Uize.Math.Matrix2D module.
SEARCH FOR EXAMPLES
Use the link below to search for example pages on the UIZE Web site that reference the Uize.Math.Matrix2D module...
SEARCH
1.3. Implementation Info
The Uize.Math.Matrix2D module defines the Uize.Math.Matrix2D object under the Uize.Math namespace.
1.3.1. Features Introduced in This Module
The features listed in this section have been introduced in this module.
INSTANCE METHODS
clone | multiply | rotate | scale | toString | translate | values | xForm
STATIC PROPERTIES
Uize.Math.Matrix2D.moduleName | Uize.Math.Matrix2D.pathToResources
1.3.2. Features Overridden in This Module
No features have been overridden in this module.
1.3.3. Features Inherited From Other Modules
This module has no inherited features.
1.3.4. Modules Directly Under This Namespace
There are no modules directly under this namespace.
1.3.5. Unit Tests
There is no dedicated unit tests module for the Uize.Math.Matrix2D module.
2. Constructor
Creates an instance of the Uize.Math.Matrix2D object from the specified coefficients.
SYNTAX
var matrixOBJ = Uize.Math.Matrix2D(xxFLOAT, yxFLOAT, xyFLOAT, yyFLOT, xFLOAT, yFLOAT);
EXAMPLE
var matrix = Uize.Math.Matrix2D (2.0, 3.0, 4.0, 5.0, 6.0, 7.0);
This will resultant in a matrix that looks like...
:| 2.0 | 3.0 | 6.0 | :| 4.0 | 5.0 | 7.0 |
VARIATION 1
var matrixOBJ = Uize.Math.Matrix2D(coefficientsARRAY);
In this variation, the coefficients, instead of being passed as individual parameters, are passed as a 6-element array.
EXAMPLE
var matrix = Uize.Math.Matrix2D ([2.0, 3.0, 4.0, 5.0, 6.0, 7.0]);
This will resultant in a matrix that looks like...
:| 2.0 | 3.0 | 6.0 | :| 4.0 | 5.0 | 7.0 |
VARIATION 2
var matrixOBJ = Uize.Math.Matrix2D();
When no parameters are passed to the Uize.Math.Matrix2D constructor, the matrix is initialized as the identity matrix.
EXAMPLE
var identityMatrix = Uize.Math.Matrix2D ();
This will resultant in a matrix that looks like...
EXAMPLE
:| 1 | 0 | 0 | :| 0 | 1 | 0 |
3. Instance Methods
3.1. clone
Makes a copy of the 2-D matrix, returning a reference to the cloned Uize.Math.Matrix2D object.
SYNTAX
var newMatrixOBJ = matrix.clone();
NOTES
Returns a reference to the cloned Uize.Math.Matrix2D object |
IMPLEMENTATION INFO
| this feature was introduced in this module |
3.2. multiply
Multiplies this matrix by the specified otherMatrixOBJ transformation, by appending the specified otherMatrixOBJ.
SYNTAX
var matrixOBJ = matrix.multiply(otherMatrixOBJ);
EXAMPLE
var matrix = Uize.Math.Matrix2D(1,0,0,1,20,30); matrix.multiply(Uize.Math.Matrix2D(2,0,0,2,8,9));
The matrix created in the previous example would be...
:| 2.0 | 0.0 | 48.0 | :| 0.0 | 2.0 | 69.0 |
NOTES
| The other transformation is added after the orignal one (i.e. appended). | |
Returns a reference to the same Uize.Math.Matrix2D object |
IMPLEMENTATION INFO
| this feature was introduced in this module |
3.3. rotate
Appends to this matrix a clockwise rotation, around the origin and by the specified angleFLOAT.
SYNTAX
var matrixOBJ = matrix.rotate(angleFLOAT);
EXAMPLE
var matrix = Uize.Math.Matrix2D(); matrix.rotate(Math.PI / 4);
The matrix created in the previous example would be...
:| 0.7071 | -0.7071 | 0.0 | :| 0.7071 | 0.7071 | 0.0 |
NOTES
| The rotation is added after the original transformation (i.e. appended). | |
angleFLOAT is in radians |
|
| Positive rotation is a rotation from positive X-axis towards positive Y-axis | |
Returns a reference to the same Uize.Math.Matrix2D object |
IMPLEMENTATION INFO
| this feature was introduced in this module |
3.4. scale
Applies the scale vector (specified by xScaleFLOAT and yScaleFLOAT) to this matrix by appending the scale vector.
SYNTAX
var matrixOBJ = matrix.scale(xScaleFLOAT, yScaleFLOAT);
EXAMPLE
var matrix = Uize.Math.Matrix2D(1,2,3,4,20,30); matrix.scale(10, 100);
The matrix created in the previous example would be...
:| 10 | 20 | 200 | :| 300 | 400 | 3000 |
NOTES
| The scaling transformation is added after the original one (i.e. appended). | |
Returns a reference to the same Uize.Math.Matrix2D object |
IMPLEMENTATION INFO
| this feature was introduced in this module |
3.5. toString
| this feature was introduced in this module |
IMPLEMENTATION INFO
SYNTAX
Serializes the 2-D matrix to a string.
var matrixString = matrix.toString();
3.6. translate
Applies the translation vector (specified by xOffsetFLOAT and yOffsetFLOAT) to this matrix by appending the translation vector.
SYNTAX
var matrixOBJ = matrix.translate(xOffsetFLOAT, yOffsetFLOAT);
EXAMPLE
var matrix = Uize.Math.Matrix2D(1,0,0,1,20,30); matrix.translate(8, 9);
The matrix created in the previous example would be...
:| 1 | 0 | 28 | :| 0 | 1 | 39 |
NOTES
| The translation is added after the original transformation (i.e appended). | |
Returns a reference to the same Uize.Math.Matrix2D object |
IMPLEMENTATION INFO
| this feature was introduced in this module |
3.7. values
Gets a 6-element array of values that represent the matrix coefficients of this matrix.
SYNTAX
var coefficiensARRAY = matrix.values();
EXAMPLE
var matrix = Uize.Math.Matrix2D(); matrix.rotate(Math.PI / 2); matrix.translate(20,30); var matrixArray = matrix.values();
The array returned in the previous example would be [0,-1,1,0,20,30].
NOTES
| Returns an new array containing the matrix coefficients | |
| The translation coefficients are at the end of the array |
IMPLEMENTATION INFO
| this feature was introduced in this module |
3.8. xForm
Applies this matrix to the 2-D vector (specified by xFLOAT and yFLOAT).
SYNTAX
var vectorOBJ = matrix.xForm(xFLOAT, yFLOAT);
EXAMPLE
var matrix = Uize.Math.Matrix2D(); matrix.rotate(Math.PI / 2); var vector = matrix.xForm(1,0);
The vector returned in the previous example would be {x:0, y:1}.
VARIATION
var vectorOBJ = matrix.xForm(vectorOBJ);
In this variation, the 2-D vector is specified a simple object, vectorOBJ, with 2 properties x and y.
EXAMPLE
var matrix = Uize.Math.Matrix2D();
matrix.rotate(Math.PI / 2);
var vector = matrix.xForm({x:1, y:0});
The vector returned in the previous example would be {x:0, y:1}.
NOTES
Returns a vector object with x and y properties |
IMPLEMENTATION INFO
| this feature was introduced in this module |