├── docs
    ├── img
    │   ├── glyphicons-halflings.png
    │   └── glyphicons-halflings-white.png
    ├── scripts
    │   ├── toc.js
    │   └── bootstrap-dropdown.js
    ├── classes.list.html
    ├── styles
    │   └── sunlight.dark.css
    ├── index.html
    └── Matrix.html
├── bower.json
├── Change.log
├── demos
    ├── reflect.html
    └── demo.html
├── matrix.min.js
├── readme.md
└── src
    └── matrix.js


/docs/img/glyphicons-halflings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deoxxa/transformation-matrix-js/HEAD/docs/img/glyphicons-halflings.png


--------------------------------------------------------------------------------
/docs/img/glyphicons-halflings-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deoxxa/transformation-matrix-js/HEAD/docs/img/glyphicons-halflings-white.png


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "transformation-matrix-js",
 3 |   "version": "2.0.0",
 4 |   "homepage": "https://github.com/epistemex/transformation-matrix-js",
 5 |   "authors": [
 6 |     "epistemex <github@epistemex.com>"
 7 |   ],
 8 |   "description": "Powerful transformation matrix that can be used to apply transformations to points, canvas etc.",
 9 |   "main": "matrix.min.js",
10 |   "keywords": [
11 |     "matrix",
12 |     "transformation",
13 |     "javascript",
14 |     "canvas"
15 |   ],
16 |   "license": "MIT",
17 |   "ignore": [
18 |     "**/.*",
19 |     ".*",
20 |     "bower_components",
21 |     "docsmd",
22 |     "tests",
23 |     "tuts"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/docs/scripts/toc.js:
--------------------------------------------------------------------------------
  1 | (function($) {
  2 | $.fn.toc = function(options) {
  3 |   var self = this;
  4 |   var opts = $.extend({}, jQuery.fn.toc.defaults, options);
  5 | 
  6 |   var container = $(opts.container);
  7 |   var headings = $(opts.selectors, container);
  8 |   var headingOffsets = [];
  9 |   var activeClassName = opts.prefix+'-active';
 10 |   var navbarHeight = $('.navbar').height();
 11 | 
 12 |   var scrollTo = function(e) {
 13 |     if (opts.smoothScrolling) {
 14 |       e.preventDefault();
 15 |       var elScrollTo = $(e.target).attr('href');
 16 |       var $el = $(elScrollTo);
 17 |       var offsetTop = $el.offset().top - navbarHeight;
 18 | 
 19 |       $('body,html').animate({ scrollTop: offsetTop }, 400, 'swing', function() {
 20 |         location.hash = elScrollTo;
 21 |       });
 22 |     }
 23 |     $('li', self).removeClass(activeClassName);
 24 |     $(e.target).parent().addClass(activeClassName);
 25 |   };
 26 | 
 27 |   //highlight on scroll
 28 |   var timeout;
 29 |   var highlightOnScroll = function(e) {
 30 |     if (timeout) {
 31 |       clearTimeout(timeout);
 32 |     }
 33 |     timeout = setTimeout(function() {
 34 |       var top = $(window).scrollTop(),
 35 |         highlighted;
 36 |       for (var i = 0, c = headingOffsets.length; i < c; i++) {
 37 |         if (headingOffsets[i] >= top) {
 38 |           $('li', self).removeClass(activeClassName);
 39 |           if (i > 0) {
 40 |             highlighted = $('li:eq('+(i-1)+')', self).addClass(activeClassName);
 41 |             opts.onHighlight(highlighted);
 42 |           }
 43 |           break;
 44 |         }
 45 |       }
 46 |     }, 50);
 47 |   };
 48 |   if (opts.highlightOnScroll) {
 49 |     $(window).bind('scroll', highlightOnScroll);
 50 |     highlightOnScroll();
 51 |   }
 52 | 
 53 |   return this.each(function() {
 54 |     //build TOC
 55 |     var el = $(this);
 56 |     var ul = $('<ul/>');
 57 |     headings.each(function(i, heading) {
 58 |       var $h = $(heading);
 59 |       headingOffsets.push($h.offset().top - opts.highlightOffset);
 60 | 
 61 |       //add anchor
 62 |       var anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix)).insertBefore($h);
 63 | 
 64 |       //build TOC item
 65 |       var a = $('<a/>')
 66 |         .text(opts.headerText(i, heading, $h))
 67 |         .attr('href', '#' + opts.anchorName(i, heading, opts.prefix))
 68 |         .bind('click', function(e) { 
 69 |           scrollTo(e);
 70 |           el.trigger('selected', $(this).attr('href'));
 71 |         });
 72 | 
 73 |       var li = $('<li/>')
 74 |         .addClass(opts.itemClass(i, heading, $h, opts.prefix))
 75 |         .append(a);
 76 | 
 77 |       ul.append(li);
 78 |     });
 79 |     el.html(ul);
 80 |   });
 81 | };
 82 | 
 83 | 
 84 | jQuery.fn.toc.defaults = {
 85 |   container: 'body',
 86 |   selectors: 'h1,h2,h3',
 87 |   smoothScrolling: true,
 88 |   prefix: 'toc',
 89 |   onHighlight: function() {},
 90 |   highlightOnScroll: true,
 91 |   highlightOffset: 100,
 92 |   anchorName: function(i, heading, prefix) {
 93 |     return prefix+i;
 94 |   },
 95 |   headerText: function(i, heading, $heading) {
 96 |     return $heading.text();
 97 |   },
 98 |   itemClass: function(i, heading, $heading, prefix) {
 99 |     return prefix + '-' + $heading[0].tagName.toLowerCase();
100 |   }
101 | 
102 | };
103 | 
104 | })(jQuery);
105 | 


--------------------------------------------------------------------------------
/Change.log:
--------------------------------------------------------------------------------
  1 | Change log for 2D Transformation Matrix
  2 | ---------------------------------------
  3 | 
  4 | 2.0
  5 | 
  6 | ADD: interpolateAnim() suitable for animation and is using decomposition
  7 | for interpolation rather than naive interpolation (which can make rotations
  8 | "flip" etc.).
  9 | 
 10 | 
 11 | 1.9.3
 12 | 
 13 | ADD: toString(), toCSS(), toJSON(), toArray()
 14 | 
 15 | 
 16 | 1.9.2
 17 | 
 18 | FIX: Speed improvements, trimmed code to reduce minify size.
 19 | 
 20 | 
 21 | 1.9.1
 22 | 
 23 | FIX: Change in isValid() left boolean inverted.
 24 | 
 25 | 
 26 | 1.9
 27 | 
 28 | ADD: scaleU()
 29 | ADD: optional context parameter for interpolate()
 30 | ADD: optional parameter for applyToTypedArray to use 64-bit float array
 31 | CHG: some optimizations, reduced size
 32 | FIX: divideScalar() did not update context if set
 33 | FIX: internal use of isInvertible in inverse() was handled as property
 34 | REM: getInverse() (use inverse() instead)
 35 | 
 36 | 
 37 | 1.8
 38 | 
 39 | CHG: getInverse() -> inverse(). getInverse() will be removed in the future.
 40 | ADD: rotateFromVector(x, y)
 41 | ADD: decompose(lu|qr) (BETA) (L)
 42 | ADD: determinant()
 43 | ADD: divide(matrix)
 44 | ADD: divideScalar(n)
 45 | ADD: isInvertible()
 46 | ADD: Error check for inverse(), throws error if non-invertible
 47 | 
 48 | Thanks to github.com/leeoniya (L) for decompose() implementation
 49 | (with some additional changes)
 50 | 
 51 | 
 52 | 1.7
 53 | 
 54 | ADD: reflectVector() (BETA: possible special cases, simple impl. for now)
 55 | ADD: concat() current instance onto supplied child matrix and return new
 56 | ADD: isValid() to check the state of the matrix
 57 | ADD: clone() current instance
 58 | IMP: getInverse() now checks if identity first and skips calculations if it is
 59 | 
 60 | 
 61 | 1.6
 62 | 
 63 | CHG: IMPORTANT! All skew() methods renamed to shear() (L)
 64 | ADD: New skew() takes an angle in radians. (L)
 65 | 
 66 | Thanks to github.com/leeoniya (L) for these contributions
 67 | 
 68 | 
 69 | 1.5
 70 | 
 71 | ADD: new method applyToTypedArray()
 72 | CHG: Code restructured to "minify" better (L)
 73 | FIX: applyToArray() (L)
 74 | 
 75 | Thanks to github.com/leeoniya (L) for these contributions
 76 | 
 77 | 
 78 | 1.4
 79 | 
 80 | ADD: Made non-returning methods chain-able.
 81 | 
 82 | 
 83 | 1.3
 84 | 
 85 | ADD: New method applyToContext().
 86 | 
 87 | 
 88 | 1.2
 89 | 
 90 | ADD: Two new helper methods flipX() and flipY()
 91 | ADD: Two new helper methods skewX() and skewY()
 92 | ADD: Two new helper methods scaleX() and scaleY()
 93 | ADD: Two new helper methods translateX() and translateY()
 94 | ADD: Helper method rotateDeg() to rotate by degrees
 95 | ADD: New method isEqual() to compare current matrix with another matrix
 96 | CHG: getInverse() and interpolate() no longer apply parent's context to returned matrix
 97 | CHG: Epsilon tolerance for floating point equal checks
 98 | REM: Previous (partly experimental) added methods for add/subtract removed due to non-linear nature.
 99 | 
100 | 
101 | 1.1
102 | 
103 | ADD: New method reset()
104 | ADD: New method add() (obsoleted)
105 | ADD: New method addMatrix() (obsoleted)
106 | ADD: New method subtract() (obsoleted)
107 | ADD: New method subtractMatrix() (obsoleted)
108 | CHG: NOTE: Method applyToPoint() takes pair of x/y instead of point object
109 | CHG: Method applyToArray() can now take two forms of arrays (point objects and point pair values)
110 | FIX: If context is provided it will now be initialized to identity matrix to enable 100% sync
111 | FIX: Some documentation errors
112 | 
113 | 
114 | 1.0
115 | 
116 | Initial release
117 | 


--------------------------------------------------------------------------------
/demos/reflect.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<meta name="author" content="(C) Epistemex 2014-2015">
  6 | 	<title>Reflect Vector demo</title>
  7 | 	<style>
  8 | 		html, body {width:100%;margin:0}
  9 | 		body {background:#101240;font:16px sans-serif;color:gold}
 10 | 		h1 {width:100%;border-bottom:1px solid #777;padding-bottom:10px}
 11 | 		#container {width:802px;margin:30px auto}
 12 | 		#canvas {border:4px solid #eee;margin:20px 0 0 200px}
 13 | 	</style>
 14 | </head>
 15 | <body>
 16 | 
 17 | 	<div id="container">
 18 | 		<h1>Transformation Matrix reflectVector() demo</h1>
 19 | 		<canvas id="canvas" width="400" height="400"></canvas>
 20 | 	</div>
 21 | 
 22 | <script src="../matrix.min.js"></script>
 23 | <script>
 24 | 
 25 | 	function Ball(x, y, r, vx, vy) {
 26 | 		this.x = x;
 27 | 		this.y = y;
 28 | 		this.vx = vx || 1;
 29 | 		this.vy = vx || 1;
 30 | 		this.radius = r || 4;
 31 | 		this.isHit = false;
 32 | 
 33 | 		this.update = function(ctx, w, h) {
 34 | 
 35 | 			this.x += this.vx;
 36 | 			this.y += this.vy;
 37 | 
 38 | 			// collision? NOTE: the detections in here are not
 39 | 			// accurate but will do for demoing the reflection.
 40 | 			// Some is compensated for using sub-framing in the loop.
 41 | 
 42 | 			if (this.x <= 0 || this.x >= w) {
 43 | 				this.vx = -this.vx;
 44 | 				this.x += this.vx;
 45 | 			}
 46 | 			if (this.y <= 0 || this.y >= h) {
 47 | 				this.vy = -this.vy;
 48 | 				this.y += this.vy;
 49 | 			}
 50 | 
 51 | 			if (ctx.isPointInPath(this.x, this.y)) {
 52 | 				if (!this.isHit) {
 53 | 					this.isHit = true;
 54 | 					return true;
 55 | 				}
 56 | 			}
 57 | 			else {
 58 | 				this.isHit = false;
 59 | 			}
 60 | 
 61 | 			ctx.moveTo(this.x + this.radius, this.y);
 62 | 			ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
 63 | 			ctx.closePath();
 64 | 
 65 | 			return false;
 66 | 		}
 67 | 	}
 68 | 
 69 | 	var ball = new Ball(100, 100, 4),
 70 | 	    ball2 = new Ball(200, 360, 4),
 71 | 	    matrixRect = new Matrix(),
 72 | 	    matrixNormal = new Matrix(),
 73 | 	    rx = 200,
 74 | 	    ry = 7,
 75 | 	    rect = [-rx, -ry, rx, -ry, rx, ry, -rx, ry],
 76 | 		rdlt = 0.007,
 77 | 		ctx = document.getElementById("canvas").getContext("2d");
 78 | 
 79 | 	matrixRect.translate(200, 200);
 80 | 
 81 | 	function addRect(ctx) {
 82 | 		var pts = matrixRect.applyToArray(rect);
 83 | 		ctx.moveTo(pts[0], pts[1]);
 84 | 		ctx.lineTo(pts[2], pts[3]);
 85 | 		ctx.lineTo(pts[4], pts[5]);
 86 | 		ctx.lineTo(pts[6], pts[7]);
 87 | 		ctx.closePath();
 88 | 	}
 89 | 
 90 | 	ctx.fillStyle = "#fff";
 91 | 
 92 | 	(function render() {
 93 | 
 94 | 		ctx.clearRect(0, 0, 400, 400);
 95 | 
 96 | 		// use sub-frames
 97 | 		for(var i = 0; i < 4; i++) {
 98 | 			matrixRect.rotate(rdlt);
 99 | 			matrixNormal.rotate(rdlt);
100 | 
101 | 			ctx.beginPath();
102 | 
103 | 			// pad also function as collision object
104 | 			addRect(ctx);
105 | 
106 | 			// update and test collision
107 | 			if (ball.update(ctx, 400, 400)) {
108 | 
109 | 				//reflect velocity vector
110 | 				var v = matrixNormal.reflectVector(ball.vx, ball.vy);
111 | 
112 | 				ball.vx = v.x;
113 | 				ball.vy = v.y;
114 | 				ball.x += ball.vx;
115 | 				ball.y += ball.vy;
116 | 			}
117 | 
118 | 			// update and test collision
119 | 			if (ball2.update(ctx, 400, 400)) {
120 | 
121 | 				//reflect velocity vector
122 | 				var v2 = matrixNormal.reflectVector(ball2.vx, ball2.vy);
123 | 
124 | 				ball2.vx = v2.x;
125 | 				ball2.vy = v2.y;
126 | 				ball2.x += ball2.vx;
127 | 				ball2.y += ball2.vy;
128 | 			}
129 | 		}
130 | 
131 | 		ctx.fill();
132 | 
133 | 		requestAnimationFrame(render);
134 | 	})();
135 | 
136 | </script>
137 | </body>
138 | </html>
139 | 


--------------------------------------------------------------------------------
/demos/demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="copyright" content="Epistemex 2014-2015">
 6 | 
 7 | 	<title>2D Affine Transformation Matrix demo</title>
 8 | 
 9 | 	<style>
10 | 		body {
11 | 			background:#ddd;
12 | 			color:#555;
13 | 			font-family:sans-serif;
14 | 			}
15 | 		#container {width:600px;margin:0 auto}
16 | 		#canvas {background:#e4e4e4}
17 | 		footer {margin:16px 0 0 12px}
18 | 		img {float:right}
19 | 	</style>
20 | </head>
21 | <body>
22 | 
23 | 	<div id="container">
24 | 		<header>
25 | 			<h2>2D Affine Transformation Matrix</h2>
26 | 		</header>
27 | 
28 | 		<div id="main">
29 | 			<p>Synchronizing a canvas context by applying various transformations,
30 | 			then apply those to four points for a rectangle.</p>
31 | 			<p>The manually transformed rectangle is drawn on top in blue transparent of the canvas transformed
32 | 			rectangle in red to show they are in perfect sync.</p>
33 | 			<canvas id="canvas" width="600" height="400" style="border:1px solid #000">
34 | 				<h1>Sorry, need a modern browser...</h1>
35 | 			</canvas>
36 | 		</div>
37 | 
38 | 		<footer>
39 | 			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAAAWCAMAAAA2NMTdAAAAhFBMVEUAAAA4SZ44SZ44SZ6AZEw3S584SZ44SZ44SZ44SZ44SZ44SZ4jerSWRV43fo/ULyqxszv1fzFovUX+vzI4SZ6weEY4SZ44SZ44SZ43fo+WRV71fzGxszs4SZ7BkjY3fo9ovUX+vzI4SZ4jerTULypovUX+vzI3fo+WRV6xszv1fzGAZEzOcUV7AAAAInRSTlMAEJ/PQDDvQIC/YCB/QEB/QECAgI8QcK/fgICAgFAwEHBw8/jPYwAAAcJJREFUSMftk9tS4zAMhuW4diyHhQVy2kPKrva8vP/7Ef21YwJTOr0hXPBNZyxZPnwdK/QbfL/+D66vfgJ6VZLE7XYSE7fbS7Tebi8RRt5egtwb6AnlFuy7L6DbXwGUTJ0xJWxmdaf+AcQGyzKP180ZLeiEW4ql1swJ0UfQdTtA3Qdw2CiZGmGKiZmoErHM7EViLYUSBxJhygSdYMlQFAsL5/00D//A19092H3+C5KEWq5DJy0xYwBm5HRLWhcoI35JHGIuUmrRwMHR+RIkrIeVvG2PSgQWR8D6mCWKhXdwOCnR1wceS1R6WCO8tMhaosrdMUs03h5EpVc7tqnmkgUcTkpk9PCgtKP0+EdBEj6uJTL1LEG9tJgcCBICUq9oOuh4xnNYBkNPkKDU65P1x5+DaJCazOiNFrCvUEk1/86SKCEkHLvyDi9IGD+aQSZ6JmGsCsDi6Cd6QkLbJSXDixI0CW7LEmuHxeIG7O8+gTt3AcobgPhUgqwwsDKsJca8RSVwzWiyhOdEdsgWv8DN5R9wefEDkNKETN2EhhZiJDIxlSKBOjzdQgHeJjgU5iyGzBR6SvTBHZV4Td4l3qTEt00lHgBjlGG7Su2augAAAABJRU5ErkJggg==">
40 | 		</footer>
41 | 	</div> 	<!-- container -->
42 | 
43 | <script src="../matrix.min.js"></script>
44 | <script>
45 | 
46 | 	var canvas = document.getElementById('canvas'),
47 | 		ctx = canvas.getContext('2d'),
48 | 		rect = [{x: 100, y: 100}, {x: 900, y: 100}, {x: 900, y: 400}, {x: 100, y: 400}],
49 | 		matrix = new Matrix(ctx),
50 | 		y = 20;
51 | 
52 | 	// apply various transformations (context is synced by class)
53 | 	matrix
54 | 		.scale(1.2, 1.2)
55 | 		.rotate(0.7)
56 | 		.translate(20, 20)
57 | 		.scale(0.5, 0.5)
58 | 		.shear(0.5, 0)
59 | 		.translate(100, -220)
60 | 		.rotate(-0.3);
61 | 
62 | 	// apply transform to our point array
63 | 	rect = matrix.applyToArray(rect);
64 | 
65 | 	// draw canvas transformed rectangle
66 | 	ctx.strokeStyle = '#f00';
67 | 	ctx.lineWidth = 2;
68 | 	ctx.strokeRect(100, 100, 800, 300);
69 | 
70 | 	// draw custom transformed rectangle
71 | 	ctx.setTransform(1, 0, 0, 1, 0, 0); // reset for demo so transforms doesn't add up
72 | 	ctx.strokeStyle = 'rgba(0,0,255,0.5)';
73 | 	ctx.moveTo(rect[0].x, rect[0].y);
74 | 	ctx.lineTo(rect[1].x, rect[1].y);
75 | 	ctx.lineTo(rect[2].x, rect[2].y);
76 | 	ctx.lineTo(rect[3].x, rect[3].y);
77 | 	ctx.closePath();
78 | 	ctx.stroke();
79 | 
80 | 	// print transformation details
81 | 	ctx.translate(0, 250);
82 | 	ctx.font = '14px sans-serif';
83 | 	ctx.fillText('matrix.scale(1.2, 1.2);', 20, nxy());
84 | 	ctx.fillText('matrix.rotate(0.7);', 20, nxy());
85 | 	ctx.fillText('matrix.translate(20, 20);', 20, nxy());
86 | 	ctx.fillText('matrix.scale(0.5, 0.5);', 20, nxy());
87 | 	ctx.fillText('matrix.shear(0.5, 0);', 20, nxy());
88 | 	ctx.fillText('matrix.translate(100, -220);', 20, nxy());
89 | 	ctx.fillText('matrix.rotate(-0.3);', 20, nxy());
90 | 
91 | 	function nxy() {y+=16;return y}
92 | 
93 | </script>
94 | </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------
/matrix.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 	2D Transformation Matrix v2.0
 3 | 
 4 | 	(c) Epistemex 2014-2015
 5 | 	www.epistemex.com
 6 | 	By Ken Nilsen
 7 | 	Contributions by leeoniya.
 8 | 	License: MIT, header required.
 9 | */
10 | function Matrix(a){var b=this;b._t=b.transform;b.a=b.d=1;b.b=b.c=b.e=b.f=0;b.context=a;if(a){a.setTransform(1,0,0,1,0,0)}}Matrix.prototype={concat:function(a){return this.clone()._t(a.a,a.b,a.c,a.d,a.e,a.f)},flipX:function(){return this._t(-1,0,0,1,0,0)},flipY:function(){return this._t(1,0,0,-1,0,0)},reflectVector:function(c,e){var b=this.applyToPoint(0,1),a=2*(b.x*c+b.y*e);c-=a*b.x;e-=a*b.y;return{x:c,y:e}},reset:function(){return this.setTransform(1,0,0,1,0,0)},rotate:function(a){var b=Math.cos(a),c=Math.sin(a);return this._t(b,c,-c,b,0,0)},rotateFromVector:function(a,b){return this.rotate(Math.atan2(b,a))},rotateDeg:function(a){return this.rotate(a*Math.PI/180)},scaleU:function(a){return this._t(a,0,0,a,0,0)},scale:function(a,b){return this._t(a,0,0,b,0,0)},scaleX:function(a){return this._t(a,0,0,1,0,0)},scaleY:function(a){return this._t(1,0,0,a,0,0)},shear:function(a,b){return this._t(1,b,a,1,0,0)},shearX:function(a){return this._t(1,0,a,1,0,0)},shearY:function(a){return this._t(1,a,0,1,0,0)},skew:function(a,b){return this.shear(Math.tan(a),Math.tan(b))},skewX:function(a){return this.shearX(Math.tan(a))},skewY:function(a){return this.shearY(Math.tan(a))},setTransform:function(g,h,i,j,k,l){var m=this;m.a=g;m.b=h;m.c=i;m.d=j;m.e=k;m.f=l;return m._x()},translate:function(a,b){return this._t(1,0,0,1,a,b)},translateX:function(a){return this._t(1,0,0,1,a,0)},translateY:function(a){return this._t(1,0,0,1,0,a)},transform:function(b,d,f,h,j,l){var m=this,a=m.a,c=m.b,e=m.c,g=m.d,i=m.e,k=m.f;m.a=a*b+e*d;m.b=c*b+g*d;m.c=a*f+e*h;m.d=c*f+g*h;m.e=a*j+e*l+i;m.f=c*j+g*l+k;return m._x()},divide:function(b){if(!b.isInvertible()){throw"Input matrix is not invertible"}var a=b.inverse();return this._t(a.a,a.b,a.c,a.d,a.e,a.f)},divideScalar:function(a){var b=this;b.a/=a;b.b/=a;b.c/=a;b.d/=a;b.e/=a;b.f/=a;return b._x()},inverse:function(){if(this.isIdentity()){return new Matrix()}else{if(!this.isInvertible()){throw"Matrix is not invertible."}else{var p=this,g=p.a,h=p.b,i=p.c,j=p.d,l=p.e,n=p.f,o=new Matrix(),k=g*j-h*i;o.a=j/k;o.b=-h/k;o.c=-i/k;o.d=g/k;o.e=(i*n-j*l)/k;o.f=-(g*n-h*l)/k;return o}}},interpolate:function(c,e,a){var d=this,b=a?new Matrix(a):new Matrix();b.a=d.a+(c.a-d.a)*e;b.b=d.b+(c.b-d.b)*e;b.c=d.c+(c.c-d.c)*e;b.d=d.d+(c.d-d.d)*e;b.e=d.e+(c.e-d.e)*e;b.f=d.f+(c.f-d.f)*e;return b._x()},interpolateAnim:function(e,j,a){var f=this,d=a?new Matrix(a):new Matrix(),b=f.decompose(),c=e.decompose(),g=b.rotation+(c.rotation-b.rotation)*j,k=b.translate.x+(c.translate.x-b.translate.x)*j,l=b.translate.y+(c.translate.y-b.translate.y)*j,h=b.scale.x+(c.scale.x-b.scale.x)*j,i=b.scale.y+(c.scale.y-b.scale.y)*j;d.translate(k,l);d.rotate(g);d.scale(h,i);return d._x()},decompose:function(w){var l=this,e=l.a,h=l.b,i=l.c,j=l.d,f=Math.acos,g=Math.atan,u=Math.sqrt,m=Math.PI,v={x:l.e,y:l.f},o=0,q={x:1,y:1},t={x:0,y:0},k=e*j-h*i;if(w){if(e){t={x:g(i/e),y:g(h/e)};q={x:e,y:k/e}}else{if(h){o=m*0.5;q={x:h,y:k/h};t.x=g(j/h)}else{q={x:i,y:j};t.x=m*0.25}}}else{if(e||h){var n=u(e*e+h*h);o=h>0?f(e/n):-f(e/n);q={x:n,y:k/n};t.x=g((e*i+h*j)/(n*n))}else{if(i||j){var p=u(i*i+j*j);o=m*0.5-(j>0?f(-i/p):-f(i/p));q={x:k/p,y:p};t.y=g((e*i+h*j)/(p*p))}else{q={x:0,y:0}}}}return{scale:q,translate:v,rotation:o,skew:t}},determinant:function(){return this.a*this.d-this.b*this.c},applyToPoint:function(b,c){var a=this;return{x:b*a.a+c*a.c+a.e,y:b*a.b+c*a.d+a.f}},applyToArray:function(e){var a=0,d,b,c=[];if(typeof e[0]==="number"){b=e.length;while(a<b){d=this.applyToPoint(e[a++],e[a++]);c.push(d.x,d.y)}}else{for(;d=e[a];a++){c.push(this.applyToPoint(d.x,d.y))}}return c},applyToTypedArray:function(e,f){var a=0,d,b=e.length,c=f?new Float64Array(b):new Float32Array(b);while(a<b){d=this.applyToPoint(e[a],e[a+1]);c[a++]=d.x;c[a++]=d.y}return c},applyToContext:function(a){var b=this;a.setTransform(b.a,b.b,b.c,b.d,b.e,b.f);return b},isIdentity:function(){var a=this;return(a._q(a.a,1)&&a._q(a.b,0)&&a._q(a.c,0)&&a._q(a.d,1)&&a._q(a.e,0)&&a._q(a.f,0))},isInvertible:function(){return !this._q(this.determinant(),0)},isValid:function(){return !this._q(this.a*this.d,0)},clone:function(c){var b=this,a=new Matrix();a.a=b.a;a.b=b.b;a.c=b.c;a.d=b.d;a.e=b.e;a.f=b.f;if(!c){a.context=b.context}return a},isEqual:function(a){var b=this,c=b._q;return(c(b.a,a.a)&&c(b.b,a.b)&&c(b.c,a.c)&&c(b.d,a.d)&&c(b.e,a.e)&&c(b.f,a.f))},toArray:function(){var a=this;return[a.a,a.b,a.c,a.d,a.e,a.f]},toCSS:function(){return"matrix("+this.toArray()+")"},toJSON:function(){var a=this;return'{"a":'+a.a+',"b":'+a.b+',"c":'+a.c+',"d":'+a.d+',"e":'+a.e+',"f":'+a.f+"}"},toString:function(){return""+this.toArray()},_q:function(a,b){return Math.abs(a-b)<1e-14},_x:function(){var a=this;if(a.context){a.context.setTransform(a.a,a.b,a.c,a.d,a.e,a.f)}return a}};


--------------------------------------------------------------------------------
/docs/classes.list.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<title>transformation-matrix-js Classes</title>
  7 | 
  8 | 	<!--[if lt IE 9]>
  9 | 	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 10 | 	<![endif]-->
 11 | 	<link type="text/css" rel="stylesheet" href="styles/sunlight.dark.css">
 12 | 
 13 | 	<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
 14 | 
 15 | </head>
 16 | 
 17 | <body>
 18 | <div class="container-fluid">
 19 | 	<div class="navbar navbar-fixed-top ">
 20 | 		<div class="navbar-inner">
 21 | 			<a class="brand" href="index.html">transformation-matrix-js</a>
 22 | 			<ul class="nav">
 23 | 				
 24 | 				<li class="dropdown">
 25 | 					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
 26 | 						class="caret"></b></a>
 27 | 
 28 | 					<ul class="dropdown-menu ">
 29 | 						
 30 | 						<li>
 31 | 							<a href="Matrix.html">Matrix</a>
 32 | 						</li>
 33 | 						
 34 | 
 35 | 					</ul>
 36 | 				</li>
 37 | 				
 38 | 			</ul>
 39 | 		</div>
 40 | 	</div>
 41 | 
 42 | 	<div class="row-fluid">
 43 | 
 44 | 		
 45 | 		<div class="span8">
 46 | 			
 47 | 				<div id="main">
 48 | 					
 49 | 
 50 | 
 51 | 	<h1 class="page-title">Classes</h1>
 52 | <section>
 53 | 
 54 | <header>
 55 |     <h2>
 56 |     
 57 |     </h2>
 58 |     
 59 | </header>
 60 | 
 61 | <article>
 62 |     <div class="container-overview">
 63 |     
 64 | 
 65 |     
 66 |         
 67 | 
 68 |         
 69 | <dl class="details">
 70 | 	
 71 | 
 72 | 	
 73 | 
 74 | 	
 75 | 
 76 | 	
 77 | 
 78 | 	
 79 | 
 80 | 	
 81 | 
 82 | 	
 83 | 
 84 | 	
 85 | 
 86 | 	
 87 | 
 88 | 
 89 | 
 90 | 	
 91 | 
 92 | 	
 93 | 
 94 | 	
 95 | 
 96 | 	
 97 | </dl>
 98 | 
 99 | 
100 |         
101 |     
102 |     </div>
103 | 
104 |     
105 | 
106 |     
107 | 
108 |     
109 | 
110 |     
111 |         <h3 class="subsection-title">Classes</h3>
112 | 
113 |         <dl>
114 |             <dt><a href="Matrix.html">Matrix</a></dt>
115 |             <dd></dd>
116 |         </dl>
117 |     
118 | 
119 |     
120 | 
121 |     
122 | 
123 |     
124 | 
125 |     
126 | 
127 |     
128 | </article>
129 | 
130 | </section>
131 | 
132 | 
133 | 
134 | 
135 | 				</div>
136 | 
137 | 				<div class="clearfix"></div>
138 | 				<footer>
139 | 					
140 | 					<p><b><a href='https://github.com/epistemex/'>Epistemex at GitHib</a></b></p>
141 | 					<br />
142 | 					
143 | 					
144 | 		<span class="copyright">
145 | 		Copyright &copy; 2015 Epistemex
146 | 		</span>
147 | 					<br />
148 | 					
149 | 		<span class="jsdoc-message">
150 | 		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.1</a>
151 | 		on Fri Nov 6th 2015 using the <a
152 | 			href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
153 | 		</span>
154 | 				</footer>
155 | 			</div>
156 | 
157 | 			
158 | 			<div class="span3">
159 | 				<div id="toc"></div>
160 | 			</div>
161 | 			
162 | 			<br clear="both">
163 | 		</div>
164 | 
165 | 	</div>
166 | 	<!--<script src="scripts/sunlight.js"></script>-->
167 | 	<script src="scripts/docstrap.lib.js"></script>
168 | 	<script src="scripts/bootstrap-dropdown.js"></script>
169 | 	<script src="scripts/toc.js"></script>
170 | 
171 | 	<script>
172 | 		$( function () {
173 | 			$( "[id*='$']" ).each( function () {
174 | 				var $this = $( this );
175 | 
176 | 				$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
177 | 			} );
178 | 
179 | 			$( "#toc" ).toc( {
180 | 				anchorName  : function ( i, heading, prefix ) {
181 | 					return $( heading ).attr( "id" ) || ( prefix + i );
182 | 				},
183 | 				selectors   : "h1,h2,h3,h4",
184 | 				showAndHide : false,
185 | 				scrollTo    : "100px"
186 | 			} );
187 | 
188 | 			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
189 | 			$( "#main span[id^='toc']" ).addClass( "toc-shim" );
190 | 			$( '.dropdown-toggle' ).dropdown();
191 | //			$( ".tutorial-section pre, .readme-section pre" ).addClass( "sunlight-highlight-javascript" ).addClass( "linenums" );
192 | 
193 | 			$( ".tutorial-section pre, .readme-section pre" ).each( function () {
194 | 				var $this = $( this );
195 | 
196 | 				var example = $this.find( "code" );
197 | 				exampleText = example.html();
198 | 				var lang = /{@lang (.*?)}/.exec( exampleText );
199 | 				if ( lang && lang[1] ) {
200 | 					exampleText = exampleText.replace( lang[0], "" );
201 | 					example.html( exampleText );
202 | 					lang = lang[1];
203 | 				} else {
204 | 					lang = "javascript";
205 | 				}
206 | 
207 | 				if ( lang ) {
208 | 
209 | 					$this
210 | 						.addClass( "sunlight-highlight-" + lang )
211 | 						.addClass( "linenums" )
212 | 						.html( example.html() );
213 | 
214 | 				}
215 | 			} );
216 | 
217 | 			Sunlight.highlightAll( {
218 | 				lineNumbers : false,
219 | 				showMenu : true,
220 | 				enableDoclinks : true
221 | 			} );
222 | 		} );
223 | 	 </script>
224 | 
225 | 
226 | 
227 | 	<!--Navigation and Symbol Display-->
228 | 	
229 | 
230 | 
231 | 	<!--Google Analytics-->
232 | 	
233 | 
234 | </body>
235 | </html>


--------------------------------------------------------------------------------
/docs/scripts/bootstrap-dropdown.js:
--------------------------------------------------------------------------------
  1 | /* ============================================================
  2 |  * bootstrap-dropdown.js v2.3.2
  3 |  * http://getbootstrap.com/2.3.2/javascript.html#dropdowns
  4 |  * ============================================================
  5 |  * Copyright 2013 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ============================================================ */
 19 | 
 20 | 
 21 | !function ($) {
 22 | 
 23 |   "use strict"; // jshint ;_;
 24 | 
 25 | 
 26 |  /* DROPDOWN CLASS DEFINITION
 27 |   * ========================= */
 28 | 
 29 |   var toggle = '[data-toggle=dropdown]'
 30 |     , Dropdown = function (element) {
 31 |         var $el = $(element).on('click.dropdown.data-api', this.toggle)
 32 |         $('html').on('click.dropdown.data-api', function () {
 33 |           $el.parent().removeClass('open')
 34 |         })
 35 |       }
 36 | 
 37 |   Dropdown.prototype = {
 38 | 
 39 |     constructor: Dropdown
 40 | 
 41 |   , toggle: function (e) {
 42 |       var $this = $(this)
 43 |         , $parent
 44 |         , isActive
 45 | 
 46 |       if ($this.is('.disabled, :disabled')) return
 47 | 
 48 |       $parent = getParent($this)
 49 | 
 50 |       isActive = $parent.hasClass('open')
 51 | 
 52 |       clearMenus()
 53 | 
 54 |       if (!isActive) {
 55 |         if ('ontouchstart' in document.documentElement) {
 56 |           // if mobile we we use a backdrop because click events don't delegate
 57 |           $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
 58 |         }
 59 |         $parent.toggleClass('open')
 60 |       }
 61 | 
 62 |       $this.focus()
 63 | 
 64 |       return false
 65 |     }
 66 | 
 67 |   , keydown: function (e) {
 68 |       var $this
 69 |         , $items
 70 |         , $active
 71 |         , $parent
 72 |         , isActive
 73 |         , index
 74 | 
 75 |       if (!/(38|40|27)/.test(e.keyCode)) return
 76 | 
 77 |       $this = $(this)
 78 | 
 79 |       e.preventDefault()
 80 |       e.stopPropagation()
 81 | 
 82 |       if ($this.is('.disabled, :disabled')) return
 83 | 
 84 |       $parent = getParent($this)
 85 | 
 86 |       isActive = $parent.hasClass('open')
 87 | 
 88 |       if (!isActive || (isActive && e.keyCode == 27)) {
 89 |         if (e.which == 27) $parent.find(toggle).focus()
 90 |         return $this.click()
 91 |       }
 92 | 
 93 |       $items = $('[role=menu] li:not(.divider):visible a', $parent)
 94 | 
 95 |       if (!$items.length) return
 96 | 
 97 |       index = $items.index($items.filter(':focus'))
 98 | 
 99 |       if (e.keyCode == 38 && index > 0) index--                                        // up
100 |       if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
101 |       if (!~index) index = 0
102 | 
103 |       $items
104 |         .eq(index)
105 |         .focus()
106 |     }
107 | 
108 |   }
109 | 
110 |   function clearMenus() {
111 |     $('.dropdown-backdrop').remove()
112 |     $(toggle).each(function () {
113 |       getParent($(this)).removeClass('open')
114 |     })
115 |   }
116 | 
117 |   function getParent($this) {
118 |     var selector = $this.attr('data-target')
119 |       , $parent
120 | 
121 |     if (!selector) {
122 |       selector = $this.attr('href')
123 |       selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
124 |     }
125 | 
126 |     $parent = selector && $(selector)
127 | 
128 |     if (!$parent || !$parent.length) $parent = $this.parent()
129 | 
130 |     return $parent
131 |   }
132 | 
133 | 
134 |   /* DROPDOWN PLUGIN DEFINITION
135 |    * ========================== */
136 | 
137 |   var old = $.fn.dropdown
138 | 
139 |   $.fn.dropdown = function (option) {
140 |     return this.each(function () {
141 |       var $this = $(this)
142 |         , data = $this.data('dropdown')
143 |       if (!data) $this.data('dropdown', (data = new Dropdown(this)))
144 |       if (typeof option == 'string') data[option].call($this)
145 |     })
146 |   }
147 | 
148 |   $.fn.dropdown.Constructor = Dropdown
149 | 
150 | 
151 |  /* DROPDOWN NO CONFLICT
152 |   * ==================== */
153 | 
154 |   $.fn.dropdown.noConflict = function () {
155 |     $.fn.dropdown = old
156 |     return this
157 |   }
158 | 
159 | 
160 |   /* APPLY TO STANDARD DROPDOWN ELEMENTS
161 |    * =================================== */
162 | 
163 |   $(document)
164 |     .on('click.dropdown.data-api', clearMenus)
165 |     .on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
166 |     .on('click.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
167 |     .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
168 | 
169 | }(window.jQuery);
170 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | 2D Affine Transformation Matrix
  2 | -------------------------------
  3 | 
  4 | An affine transformation matrix (3x3) class for JavaScript that performs
  5 | various transformations such as rotate, scale, translate, skew, shear, add,
  6 | subtract, multiply, divide, inverse, decomposing and more (full HTML
  7 | documentation is included).
  8 | 
  9 | It's primarily intended for situations where you need to track or create
 10 | transforms and want to apply it permanently/manually to your own points
 11 | and polygons.
 12 | 
 13 | The matrix can optionally synchronize a canvas 2D context object so the
 14 | transformations on the canvas matches pixel perfect the local
 15 | transformations of the Matrix object.
 16 | 
 17 | Using toCSS() can synchronize a DOM element as well.
 18 | 
 19 | No dependencies.
 20 | 
 21 | Includes a vector reflection method (see included demo for example usage):*
 22 | 
 23 | 
 24 | Install
 25 | -------
 26 | 
 27 | Download zip and extract to folder.
 28 | 
 29 | git via HTTPS:
 30 | 
 31 |     $ git clone https://github.com/epistemex/transformation-matrix-js.git
 32 | 
 33 | git via SSH:
 34 | 
 35 |     $ git clone git@github.com:epistemex/transformation-matrix-js.git
 36 | 
 37 | Using Bower:
 38 | 
 39 |     $ bower install transformation-matrix-js
 40 | 
 41 | 
 42 | Usage
 43 | -----
 44 | 
 45 | Just include the script and create a new instance like:
 46 | 
 47 |     var matrix = new Matrix([context]);
 48 | 
 49 | You can supply an optional context as argument which in case will be
 50 | synchronized with the transformations that are applied to the matrix
 51 | object.
 52 | 
 53 | Some of the methods:
 54 | 
 55 |     matrix.interpolateAnim();           // decomposed interpolation
 56 |     matrix.toString();
 57 |     matrix.toJSON();
 58 |     matrix.toCSS();
 59 |     matrix.toArray();
 60 |     matrix.rotate(angle);    		    // angle in radians
 61 |     matrix.rotateDeg(angle);   		    // angle in degrees
 62 |     matrix.rotateFromVector(x, y);      // use a vector to set angle
 63 |     matrix.translate(x, y);
 64 |     matrix.translateX(x);
 65 |     matrix.translateY(y);
 66 |     matrix.scale(sx, sy);
 67 |     matrix.scaleX(sx);
 68 |     matrix.scaleY(sy);
 69 |     matrix.scaleU(f);                    // scale both x and y
 70 |     matrix.shear(sx, sy);
 71 |     matrix.shearX(sx);
 72 |     matrix.shearY(sy);
 73 |     matrix.skew(ax, ay);                // angle in radians
 74 |     matrix.skewX(ax);
 75 |     matrix.skewY(ay);
 76 |     matrix.transform(a, b, c, d, e, f);
 77 |     matrix.setTransform(a, b, c, d, e, f);
 78 |     matrix.divide();                    // divide matrix on another matrix
 79 |     matrix.divideScalar();              // divide matrix by scalar value
 80 |     matrix.inverse();
 81 |     matrix.decompose([lu]);             // BETA decompose matrix using QR or LU
 82 |     matrix.determinant();               // get determinant of current matrix
 83 | 	matrix.reset();
 84 |     matrix.clone();
 85 |     matrix.isInvertible();
 86 | 	matrix.isValid();
 87 |     matrix.reflectVector(x, y)         // BETA reflects vector on normal (=current x-axis);
 88 |     matrix.concat(childMatrix)
 89 | 
 90 | Get current transform matrix properties:
 91 | 
 92 |     var a = matrix.a;	// scale x
 93 |     var b = matrix.b;	// shear y
 94 |     var c = matrix.c;	// shear x
 95 |     var d = matrix.d;	// scale y
 96 |     var e = matrix.e;	// translate x
 97 |     var f = matrix.f;	// translate y
 98 | 
 99 | (also see `decompose()`).
100 | 
101 | Apply to a point:
102 | 
103 |     var tPoint = matrix.applyToPoint(x, y);
104 | 
105 | Apply to an Array with point objects or point pair values:
106 | 
107 |     var tPoints = matrix.applyToArray([{x: x1, y: y1}, {x: x2, y: y2}, ...]);
108 |     var tPoints = matrix.applyToArray([x1, y1, x2, y2, ...]);
109 |     var tPoints = matrix.applyToTypedArray(...);
110 | 
111 | or apply to a canvas context (other than optionally referenced in constructor):
112 | 
113 |     matrix.applyToContext(myContext);
114 | 
115 | Get inverse transformation matrix (the matrix you need to apply to get back
116 | to a identity matrix from whatever the matrix contains):
117 | 
118 |     var invmatrix = matrix.inverse();
119 | 
120 | or
121 | 
122 |     var invmatrix;
123 | 
124 |     if (matrix.isInvertible()) {                  // check if we can inverse
125 |         invmatrix = matrix.inverse();
126 |     }
127 | 
128 | You can interpolate between current and a new matrix. The function
129 | returns a new matrix:
130 | 
131 |     var imatrix = matrix.interpolate(matrix2, t);  // t = [0.0, 1.0]
132 |     var imatrix = matrix.interpolateAnim(matrix2, t);
133 | 
134 | The former does a naive interpolation which works fine with translate
135 | and scale. The latter is better suited when there is for example rotation
136 | involved to avoid "flipping" (and is what the browsers are using) utilizing
137 | decomposition.
138 | 
139 | Check if there is any transforms applied:
140 | 
141 |     var status = matrix.isIdentity();              // true if identity
142 | 
143 | Check if two matrices are identical:
144 | 
145 |     var status = matrix.isEqual(matrix2);          // true if equal
146 | 
147 | Reset matrix to an identity matrix:
148 | 
149 |     matrix.reset();
150 | 
151 | Methods are also chain-able:
152 | 
153 |     matrix.rotateDeg(45).translate(100, 120);     // rotate, then translate
154 | 
155 | For CSS you could do:
156 | 
157 |     elem.style.transform = matrix.toCSS();        // some browsers may need prefix
158 | 
159 | See documentation for full overview and usage.
160 | 
161 | 
162 | License
163 | -------
164 | 
165 | Released under [MIT license](http://choosealicense.com/licenses/mit/). You can use this class in both commercial and non-commercial projects provided that full header (minified and developer versions) is included.
166 | 
167 | *&copy; 2014-2015 Epistemex*
168 | 
169 | ![Epistemex](http://i.imgur.com/wZSsyt8.png)
170 | 


--------------------------------------------------------------------------------
/docs/styles/sunlight.dark.css:
--------------------------------------------------------------------------------
  1 | /* global styles */
  2 | .sunlight-container {
  3 | 	clear: both !important;
  4 | 	position: relative !important;
  5 | 	margin: 10px 0 !important;
  6 | }
  7 | .sunlight-code-container {
  8 | 	clear: both !important;
  9 | 	position: relative !important;
 10 | 	border: none;
 11 | 	border-color: #626262 !important;
 12 | 	background-color: #262626 !important;
 13 | }
 14 | .sunlight-highlighted, .sunlight-container, .sunlight-container textarea {
 15 | 	font-family: Consolas, Inconsolata, Monaco, "Courier New" !important;
 16 | 	font-size: 12px !important;
 17 | 	line-height: 15px !important;
 18 | }
 19 | .sunlight-highlighted, .sunlight-container textarea {
 20 | 	color: #FFFFFF !important;
 21 | 	margin: 0 !important;
 22 | }
 23 | .sunlight-container textarea {
 24 | 	padding-left: 0 !important;
 25 | 	margin-left: 0 !important;
 26 | 	margin-right: 0 !important;
 27 | 	padding-right: 0 !important;
 28 | }
 29 | .sunlight-code-container > .sunlight-highlighted {
 30 | 	white-space: pre;
 31 | 	overflow-x: auto;
 32 | 	overflow-y: hidden; /* ie requires this wtf? */
 33 | }
 34 | .sunlight-highlighted {
 35 | 	z-index: 1;
 36 | 	position: relative;
 37 | }
 38 | .sunlight-highlighted * {
 39 | 	background: transparent;
 40 | }
 41 | .sunlight-line-number-margin {
 42 | 	float: left !important;
 43 | 	margin-right: 5px !important;
 44 | 	margin-top: 0 !important;
 45 | 	margin-bottom: 0 !important;
 46 | 	padding: 0 !important;
 47 | 	padding-right: 4px !important;
 48 | 	padding-left: 4px !important;
 49 | 	border-right: 1px solid #9A9A9A !important;
 50 | 	background-color: #3E3E3E !important;
 51 | 	color: #9A9A9A !important;
 52 | 	text-align: right !important;
 53 | 	position: relative;
 54 | 	z-index: 3;
 55 | }
 56 | .sunlight-highlighted a, .sunlight-line-number-margin a {
 57 | 	border: none !important;
 58 | 	text-decoration: none !important;
 59 | 	font-style: normal !important;
 60 | 	padding: 0 !important;
 61 | }
 62 | .sunlight-line-number-margin a {
 63 | 	color: inherit !important;
 64 | }
 65 | .sunlight-line-highlight-overlay {
 66 | 	position: absolute;
 67 | 	top: 0;
 68 | 	left: 0;
 69 | 	width: 100%;
 70 | 	z-index: 0;
 71 | }
 72 | .sunlight-line-highlight-overlay div {
 73 | 	height: 15px;
 74 | 	width: 100%;
 75 | }
 76 | .sunlight-line-highlight-overlay .sunlight-line-highlight-active {
 77 | 	background-color: #4B4B4B;
 78 | }
 79 | 
 80 | /* menu */
 81 | .sunlight-menu {
 82 | 	background-color: #FFFFCC;
 83 | 	color: #000000;
 84 | }
 85 | .sunlight-menu ul {
 86 | 	margin: 0 !important;
 87 | 	padding: 0 !important;
 88 | 	list-style-type: none !important;
 89 | }
 90 | .sunlight-menu li {
 91 | 	float: right !important;
 92 | 	margin-left: 5px !important;
 93 | }
 94 | .sunlight-menu a, .sunlight-menu img {
 95 | 	color: #000099 !important;
 96 | 	text-decoration: none !important;
 97 | 	border: none !important;
 98 | }
 99 | 
100 | 
101 | 
102 | 
103 | .sunlight-string,
104 | .sunlight-char,
105 | .sunlight-heredoc,
106 | .sunlight-heredocDeclaration,
107 | .sunlight-nowdoc,
108 | .sunlight-longString,
109 | .sunlight-rawString,
110 | .sunlight-binaryString,
111 | .sunlight-verbatimString,
112 | .sunlight-rawLongString,
113 | .sunlight-binaryLongString,
114 | .sunlight-diff .sunlight-added {
115 | 	color: #55EB54 !important;
116 | }
117 | .sunlight-operator,
118 | .sunlight-punctuation,
119 | .sunlight-delimiter {
120 | 	color: #B1EDEC !important;
121 | }
122 | .sunlight-ident,
123 | .sunlight-diff .sunlight-unchanged {
124 | 	color: #E0E0E0 !important;
125 | 	font-weight: bold !important;
126 | }
127 | .sunlight-comment,
128 | .sunlight-xmlDocCommentContent,
129 | .sunlight-nginx .sunlight-ssiCommand,
130 | .sunlight-sln .sunlight-formatDeclaration,
131 | .sunlight-diff .sunlight-mergeHeader,
132 | .sunlight-diff .sunlight-noNewLine {
133 | 	color: #787D31 !important;
134 | }
135 | .sunlight-number,
136 | .sunlight-cdata,
137 | .sunlight-guid,
138 | .sunlight-diff .sunlight-modified {
139 | 	color: #F7BA7E !important;
140 | 	font-weight: bold !important;
141 | }
142 | .sunlight-named-ident,
143 | .sunlight-xml .sunlight-attribute,
144 | .sunlight-constant,
145 | .sunlight-javascript .sunlight-globalVariable,
146 | .sunlight-globalObject,
147 | .sunlight-css .sunlight-id,
148 | .sunlight-python .sunlight-attribute,
149 | .sunlight-nginx .sunlight-context,
150 | .sunlight-httpd .sunlight-context,
151 | .sunlight-lisp .sunlight-declarationSpecifier,
152 | .sunlight-erlang .sunlight-userDefinedFunction,
153 | .sunlight-diff .sunlight-removed {
154 | 	color: #FBBDEE !important;
155 | 	font-weight: bold !important;
156 | }
157 | .sunlight-keyword,
158 | .sunlight-languageConstruct,
159 | .sunlight-specialOperator,
160 | .sunlight-xml .sunlight-tagName,
161 | .sunlight-xml .sunlight-operator,
162 | .sunlight-bash .sunlight-command,
163 | .sunlight-erlang .sunlight-moduleAttribute {
164 | 	color: #A3CCF7 !important;
165 | 	font-weight: bold !important;
166 | }
167 | .sunlight-shortOpenTag,
168 | .sunlight-openTag,
169 | .sunlight-closeTag,
170 | .sunlight-xmlOpenTag,
171 | .sunlight-xmlCloseTag,
172 | .sunlight-aspOpenTag,
173 | .sunlight-aspCloseTag,
174 | .sunlight-label,
175 | .sunlight-css .sunlight-importantFlag {
176 | 	background-color: #7373C1 !important;
177 | }
178 | .sunlight-content {
179 | 	color: #FFFFFF !important;
180 | 	font-weight: bold !important;
181 | }
182 | .sunlight-function,
183 | .sunlight-globalFunction,
184 | .sunlight-objective-c .sunlight-messageDestination,
185 | .sunlight-ruby .sunlight-specialFunction,
186 | .sunlight-6502asm .sunlight-illegalOpcode,
187 | .sunlight-powershell .sunlight-switch,
188 | .sunlight-lisp .sunlight-macro,
189 | .sunlight-lisp .sunlight-specialForm,
190 | .sunlight-lisp .sunlight-type,
191 | .sunlight-sln .sunlight-sectionName,
192 | .sunlight-diff .sunlight-header {
193 | 	color: #C8BBF1 !important;
194 | 	font-weight: bold !important;
195 | }
196 | .sunlight-variable,
197 | .sunlight-environmentVariable,
198 | .sunlight-specialVariable,
199 | .sunlight-objective-c .sunlight-messageArgumentName,
200 | .sunlight-lisp .sunlight-globalVariable,
201 | .sunlight-ruby .sunlight-globalVariable,
202 | .sunlight-ruby .sunlight-instanceVariable {
203 | 	color: #F5E5B0 !important;
204 | 	font-weight: bold !important;
205 | }
206 | .sunlight-regexLiteral,
207 | .sunlight-lisp .sunlight-operator,
208 | .sunlight-6502asm .sunlight-pseudoOp,
209 | .sunlight-erlang .sunlight-macro,
210 | .sunlight-diff .sunlight-rangeInfo {
211 | 	color: #E0F16A !important;
212 | }
213 | .sunlight-specialVariable {
214 | 	font-style: italic !important;
215 | 	font-weight: bold !important;
216 | }
217 | .sunlight-csharp .sunlight-pragma,
218 | .sunlight-preprocessorDirective,
219 | .sunlight-vb .sunlight-compilerDirective {
220 | 	color: #666363 !important;
221 | 	font-style: italic !important;
222 | }
223 | .sunlight-xmlDocCommentMeta,
224 | .sunlight-java .sunlight-annotation,
225 | .sunlight-scala .sunlight-annotation,
226 | .sunlight-docComment {
227 | 	color: #666363 !important;
228 | }
229 | .sunlight-quotedIdent,
230 | .sunlight-ruby .sunlight-subshellCommand,
231 | .sunlight-lisp .sunlight-keywordArgument,
232 | .sunlight-haskell .sunlight-infixOperator,
233 | .sunlight-erlang .sunlight-quotedAtom {
234 | 	color: #F8CA16 !important;
235 | }
236 | 
237 | 
238 | 
239 | 
240 | /* html/xml */
241 | .sunlight-xml .sunlight-tagName,
242 | .sunlight-xml .sunlight-operator,
243 | .sunlight-xml .sunlight-attribute {
244 | 	font-weight: normal !important;
245 | }
246 | .sunlight-doctype {
247 | 	color: #DEB9B2 !important;
248 | 	font-style: italic !important;
249 | }
250 | .sunlight-xml .sunlight-entity {
251 | 	background-color: #E6E585 !important;
252 | 	color: #000000 !important;
253 | }
254 | 
255 | /* javascript */
256 | .sunlight-javascript .sunlight-reservedWord {
257 | 	font-style: italic !important;
258 | }
259 | 
260 | /* css */
261 | .sunlight-css .sunlight-element {
262 | 	color: #E9EE97 !important;
263 | }
264 | .sunlight-css .sunlight-microsoftFilterPrefix {
265 | 	color: #C9FF9F !important;
266 | }
267 | .sunlight-css .sunlight-rule {
268 | 	color: #0099FF !important;
269 | }
270 | .sunlight-css .sunlight-class {
271 | 	color: #E78282 !important;
272 | }
273 | .sunlight-css .sunlight-pseudoClass, .sunlight-css .sunlight-pseudoElement {
274 | 	color: #73D693 !important;
275 | }
276 | 
277 | /* bash */
278 | .sunlight-bash .sunlight-hashBang {
279 | 	color: #FFFF00 !important;
280 | }
281 | 
282 | .sunlight-bash .sunlight-verbatimCommand {
283 | 	color: #BBA4EE !important;
284 | }
285 | .sunlight-bash .sunlight-variable, 
286 | .sunlight-bash .sunlight-specialVariable {
287 | 	color: #ED8585 !important;
288 | }
289 | 
290 | /* python */
291 | .sunlight-python .sunlight-specialMethod {
292 | 	font-weight: bold !important;
293 | 	color: #B0A3C2;
294 | }
295 | 
296 | /* ruby */
297 | .sunlight-ruby .sunlight-symbol {
298 | 	font-weight: bold !important;
299 | 	color: #90EEA2 !important;
300 | }
301 | 
302 | /* brainfuck */
303 | .sunlight-brainfuck {
304 | 	font-weight: bold !important;
305 | 	color: #000000 !important;
306 | }
307 | .sunlight-brainfuck .sunlight-increment {
308 | 	background-color: #FF9900 !important;
309 | }
310 | .sunlight-brainfuck .sunlight-decrement {
311 | 	background-color: #FF99FF !important;
312 | }
313 | .sunlight-brainfuck .sunlight-incrementPointer {
314 | 	background-color: #FFFF99 !important;
315 | }
316 | .sunlight-brainfuck .sunlight-decrementPointer {
317 | 	background-color: #66CCFF !important;
318 | }
319 | .sunlight-brainfuck .sunlight-read {
320 | 	background-color: #FFFFFF !important;
321 | }
322 | .sunlight-brainfuck .sunlight-write {
323 | 	background-color: #99FF99 !important;
324 | }
325 | .sunlight-brainfuck .sunlight-openLoop, .sunlight-brainfuck .sunlight-closeLoop {
326 | 	background-color: #FFFFFF !important;
327 | }
328 | 
329 | /* 6502 asm */
330 | .sunlight-6502asm .sunlight-label {
331 | 	background: none !important;
332 | 	color: #FFFFFF !important;
333 | 	text-decoration: underline !important;
334 | }
335 | 
336 | /* lisp */
337 | .sunlight-lisp .sunlight-macro {
338 | 	font-style: italic !important;
339 | }
340 | 
341 | /* erlang */
342 | .sunlight-erlang .sunlight-atom {
343 | 	color: #FFFFFF !important;
344 | 	font-weight: bold !important;
345 | }


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<title>transformation-matrix-js Index</title>
  7 | 
  8 | 	<!--[if lt IE 9]>
  9 | 	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 10 | 	<![endif]-->
 11 | 	<link type="text/css" rel="stylesheet" href="styles/sunlight.dark.css">
 12 | 
 13 | 	<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
 14 | 
 15 | </head>
 16 | 
 17 | <body>
 18 | <div class="container-fluid">
 19 | 	<div class="navbar navbar-fixed-top ">
 20 | 		<div class="navbar-inner">
 21 | 			<a class="brand" href="index.html">transformation-matrix-js</a>
 22 | 			<ul class="nav">
 23 | 				
 24 | 				<li class="dropdown">
 25 | 					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
 26 | 						class="caret"></b></a>
 27 | 
 28 | 					<ul class="dropdown-menu ">
 29 | 						
 30 | 						<li>
 31 | 							<a href="Matrix.html">Matrix</a>
 32 | 						</li>
 33 | 						
 34 | 
 35 | 					</ul>
 36 | 				</li>
 37 | 				
 38 | 			</ul>
 39 | 		</div>
 40 | 	</div>
 41 | 
 42 | 	<div class="row-fluid">
 43 | 
 44 | 		
 45 | 		<div class="span8">
 46 | 			
 47 | 				<div id="main">
 48 | 					
 49 | 
 50 | 
 51 | 	
 52 | 	<span class="page-title">Index</span>
 53 | 	
 54 | 	
 55 | 
 56 | 
 57 | 
 58 | 
 59 | 
 60 | 
 61 | 
 62 | 
 63 | 
 64 | 
 65 | 
 66 | 
 67 | 	
 68 | 	
 69 | 
 70 | 
 71 | 
 72 | 
 73 | 
 74 |     <section class="readme-section">
 75 |         <article><h2>2D Affine Transformation Matrix</h2><p>An affine transformation matrix (3x3) class for JavaScript that performs
 76 | various transformations such as rotate, scale, translate, skew, shear, add,
 77 | subtract, multiply, divide, inverse, decomposing and more (full HTML
 78 | documentation is included).</p>
 79 | <p>It's primarily intended for situations where you need to track or create
 80 | transforms and want to apply it permanently/manually to your own points
 81 | and polygons.</p>
 82 | <p>The matrix can optionally synchronize a canvas 2D context object so the
 83 | transformations on the canvas matches pixel perfect the local
 84 | transformations of the Matrix object.</p>
 85 | <p>Using toCSS() can synchronize a DOM element as well.</p>
 86 | <p>No dependencies.</p>
 87 | <p>Includes a vector reflection method (see included demo for example usage):*</p>
 88 | <h2>Install</h2><p>Download zip and extract to folder.</p>
 89 | <p>git via HTTPS:</p>
 90 | <pre class="prettyprint source"><code>$ git clone https://github.com/epistemex/transformation-matrix-js.git</code></pre><p>git via SSH:</p>
 91 | <pre class="prettyprint source"><code>$ git clone git@github.com:epistemex/transformation-matrix-js.git</code></pre><p>Using Bower:</p>
 92 | <pre class="prettyprint source"><code>$ bower install transformation-matrix-js</code></pre><h2>Usage</h2><p>Just include the script and create a new instance like:</p>
 93 | <pre class="prettyprint source"><code>var matrix = new Matrix([context]);</code></pre><p>You can supply an optional context as argument which in case will be
 94 | synchronized with the transformations that are applied to the matrix
 95 | object.</p>
 96 | <p>Some of the methods:</p>
 97 | <pre class="prettyprint source"><code>matrix.interpolateAnim();           // decomposed interpolation
 98 | matrix.toString();
 99 | matrix.toJSON();
100 | matrix.toCSS();
101 | matrix.toArray();
102 | matrix.rotate(angle);                // angle in radians
103 | matrix.rotateDeg(angle);               // angle in degrees
104 | matrix.rotateFromVector(x, y);      // use a vector to set angle
105 | matrix.translate(x, y);
106 | matrix.translateX(x);
107 | matrix.translateY(y);
108 | matrix.scale(sx, sy);
109 | matrix.scaleX(sx);
110 | matrix.scaleY(sy);
111 | matrix.scaleU(f);                    // scale both x and y
112 | matrix.shear(sx, sy);
113 | matrix.shearX(sx);
114 | matrix.shearY(sy);
115 | matrix.skew(ax, ay);                // angle in radians
116 | matrix.skewX(ax);
117 | matrix.skewY(ay);
118 | matrix.transform(a, b, c, d, e, f);
119 | matrix.setTransform(a, b, c, d, e, f);
120 | matrix.divide();                    // divide matrix on another matrix
121 | matrix.divideScalar();              // divide matrix by scalar value
122 | matrix.inverse();
123 | matrix.decompose([lu]);             // BETA decompose matrix using QR or LU
124 | matrix.determinant();               // get determinant of current matrix
125 | matrix.reset();
126 | matrix.clone();
127 | matrix.isInvertible();
128 | matrix.isValid();
129 | matrix.reflectVector(x, y)         // BETA reflects vector on normal (=current x-axis);
130 | matrix.concat(childMatrix)</code></pre><p>Get current transform matrix properties:</p>
131 | <pre class="prettyprint source"><code>var a = matrix.a;    // scale x
132 | var b = matrix.b;    // shear y
133 | var c = matrix.c;    // shear x
134 | var d = matrix.d;    // scale y
135 | var e = matrix.e;    // translate x
136 | var f = matrix.f;    // translate y</code></pre><p>(also see <code>decompose()</code>).</p>
137 | <p>Apply to a point:</p>
138 | <pre class="prettyprint source"><code>var tPoint = matrix.applyToPoint(x, y);</code></pre><p>Apply to an Array with point objects or point pair values:</p>
139 | <pre class="prettyprint source"><code>var tPoints = matrix.applyToArray([{x: x1, y: y1}, {x: x2, y: y2}, ...]);
140 | var tPoints = matrix.applyToArray([x1, y1, x2, y2, ...]);
141 | var tPoints = matrix.applyToTypedArray(...);</code></pre><p>or apply to a canvas context (other than optionally referenced in constructor):</p>
142 | <pre class="prettyprint source"><code>matrix.applyToContext(myContext);</code></pre><p>Get inverse transformation matrix (the matrix you need to apply to get back
143 | to a identity matrix from whatever the matrix contains):</p>
144 | <pre class="prettyprint source"><code>var invmatrix = matrix.inverse();</code></pre><p>or</p>
145 | <pre class="prettyprint source"><code>var invmatrix;
146 | 
147 | if (matrix.isInvertible()) {                  // check if we can inverse
148 |     invmatrix = matrix.inverse();
149 | }</code></pre><p>You can interpolate between current and a new matrix. The function
150 | returns a new matrix:</p>
151 | <pre class="prettyprint source"><code>var imatrix = matrix.interpolate(matrix2, t);  // t = [0.0, 1.0]
152 | var imatrix = matrix.interpolateAnim(matrix2, t);</code></pre><p>The former does a naive interpolation which works fine with translate
153 | and scale. The latter is better suited when there is for example rotation
154 | involved to avoid &quot;flipping&quot; (and is what the browsers are using) utilizing
155 | decomposition.</p>
156 | <p>Check if there is any transforms applied:</p>
157 | <pre class="prettyprint source"><code>var status = matrix.isIdentity();              // true if identity</code></pre><p>Check if two matrices are identical:</p>
158 | <pre class="prettyprint source"><code>var status = matrix.isEqual(matrix2);          // true if equal</code></pre><p>Reset matrix to an identity matrix:</p>
159 | <pre class="prettyprint source"><code>matrix.reset();</code></pre><p>Methods are also chain-able:</p>
160 | <pre class="prettyprint source"><code>matrix.rotateDeg(45).translate(100, 120);     // rotate, then translate</code></pre><p>For CSS you could do:</p>
161 | <pre class="prettyprint source"><code>elem.style.transform = matrix.toCSS();        // some browsers may need prefix</code></pre><p>See documentation for full overview and usage.</p>
162 | <h2>License</h2><p>Released under <a href="http://choosealicense.com/licenses/mit/">MIT license</a>. You can use this class in both commercial and non-commercial projects provided that full header (minified and developer versions) is included.</p>
163 | <p><em>&copy; 2014-2015 Epistmex</em></p>
164 | <p><img src="http://i.imgur.com/wZSsyt8.png" alt="Epistemex"></p></article>
165 |     </section>
166 | 
167 | 
168 | 
169 | 
170 | 
171 | 
172 | 
173 | 				</div>
174 | 
175 | 				<div class="clearfix"></div>
176 | 				<footer>
177 | 					
178 | 					<p><b><a href='https://github.com/epistemex/'>Epistemex at GitHib</a></b></p>
179 | 					<br />
180 | 					
181 | 					
182 | 		<span class="copyright">
183 | 		Copyright &copy; 2015 Epistemex
184 | 		</span>
185 | 					<br />
186 | 					
187 | 		<span class="jsdoc-message">
188 | 		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.1</a>
189 | 		on Fri Nov 6th 2015 using the <a
190 | 			href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
191 | 		</span>
192 | 				</footer>
193 | 			</div>
194 | 
195 | 			
196 | 			<div class="span3">
197 | 				<div id="toc"></div>
198 | 			</div>
199 | 			
200 | 			<br clear="both">
201 | 		</div>
202 | 
203 | 	</div>
204 | 	<!--<script src="scripts/sunlight.js"></script>-->
205 | 	<script src="scripts/docstrap.lib.js"></script>
206 | 	<script src="scripts/bootstrap-dropdown.js"></script>
207 | 	<script src="scripts/toc.js"></script>
208 | 
209 | 	<script>
210 | 		$( function () {
211 | 			$( "[id*='$']" ).each( function () {
212 | 				var $this = $( this );
213 | 
214 | 				$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
215 | 			} );
216 | 
217 | 			$( "#toc" ).toc( {
218 | 				anchorName  : function ( i, heading, prefix ) {
219 | 					return $( heading ).attr( "id" ) || ( prefix + i );
220 | 				},
221 | 				selectors   : "h1,h2,h3,h4",
222 | 				showAndHide : false,
223 | 				scrollTo    : "100px"
224 | 			} );
225 | 
226 | 			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
227 | 			$( "#main span[id^='toc']" ).addClass( "toc-shim" );
228 | 			$( '.dropdown-toggle' ).dropdown();
229 | //			$( ".tutorial-section pre, .readme-section pre" ).addClass( "sunlight-highlight-javascript" ).addClass( "linenums" );
230 | 
231 | 			$( ".tutorial-section pre, .readme-section pre" ).each( function () {
232 | 				var $this = $( this );
233 | 
234 | 				var example = $this.find( "code" );
235 | 				exampleText = example.html();
236 | 				var lang = /{@lang (.*?)}/.exec( exampleText );
237 | 				if ( lang && lang[1] ) {
238 | 					exampleText = exampleText.replace( lang[0], "" );
239 | 					example.html( exampleText );
240 | 					lang = lang[1];
241 | 				} else {
242 | 					lang = "javascript";
243 | 				}
244 | 
245 | 				if ( lang ) {
246 | 
247 | 					$this
248 | 						.addClass( "sunlight-highlight-" + lang )
249 | 						.addClass( "linenums" )
250 | 						.html( example.html() );
251 | 
252 | 				}
253 | 			} );
254 | 
255 | 			Sunlight.highlightAll( {
256 | 				lineNumbers : false,
257 | 				showMenu : true,
258 | 				enableDoclinks : true
259 | 			} );
260 | 		} );
261 | 	 </script>
262 | 
263 | 
264 | 
265 | 	<!--Navigation and Symbol Display-->
266 | 	
267 | 
268 | 
269 | 	<!--Google Analytics-->
270 | 	
271 | 
272 | </body>
273 | </html>


--------------------------------------------------------------------------------
/src/matrix.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | 	2D Transformation Matrix v2.0
  3 | 
  4 | 	(c) Epistemex 2014-2015
  5 | 	www.epistemex.com
  6 | 	By Ken Nilsen
  7 | 	Contributions by leeoniya.
  8 | 	License: MIT, header required.
  9 | */
 10 | 
 11 | /**
 12 |  * 2D transformation matrix object initialized with identity matrix.
 13 |  *
 14 |  * The matrix can synchronize a canvas context by supplying the context
 15 |  * as an argument, or later apply current absolute transform to an
 16 |  * existing context.
 17 |  *
 18 |  * All values are handled as floating point values.
 19 |  *
 20 |  * @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix
 21 |  * @prop {number} a - scale x
 22 |  * @prop {number} b - shear y
 23 |  * @prop {number} c - shear x
 24 |  * @prop {number} d - scale y
 25 |  * @prop {number} e - translate x
 26 |  * @prop {number} f - translate y
 27 |  * @prop {CanvasRenderingContext2D|null} [context=null] - set or get current canvas context
 28 |  * @constructor
 29 |  */
 30 | function Matrix(context) {
 31 | 
 32 | 	var me = this;
 33 | 	me._t = me.transform;
 34 | 
 35 | 	me.a = me.d = 1;
 36 | 	me.b = me.c = me.e = me.f = 0;
 37 | 
 38 | 	me.context = context;
 39 | 
 40 | 	// reset canvas transformations (if any) to enable 100% sync.
 41 | 	if (context) context.setTransform(1, 0, 0, 1, 0, 0);
 42 | }
 43 | 
 44 | Matrix.prototype = {
 45 | 
 46 | 	/**
 47 | 	 * Concatenates transforms of this matrix onto the given child matrix and
 48 | 	 * returns a new matrix. This instance is used on left side.
 49 | 	 *
 50 | 	 * @param {Matrix} cm - child matrix to apply concatenation to
 51 | 	 * @returns {Matrix}
 52 | 	 */
 53 | 	concat: function(cm) {
 54 | 		return this.clone()._t(cm.a, cm.b, cm.c, cm.d, cm.e, cm.f);
 55 | 	},
 56 | 
 57 | 	/**
 58 | 	 * Flips the horizontal values.
 59 | 	 */
 60 | 	flipX: function() {
 61 | 		return this._t(-1, 0, 0, 1, 0, 0);
 62 | 	},
 63 | 
 64 | 	/**
 65 | 	 * Flips the vertical values.
 66 | 	 */
 67 | 	flipY: function() {
 68 | 		return this._t(1, 0, 0, -1, 0, 0);
 69 | 	},
 70 | 
 71 | 	/**
 72 | 	 * Reflects incoming (velocity) vector on the normal which will be the
 73 | 	 * current transformed x axis. Call when a trigger condition is met.
 74 | 	 *
 75 | 	 * NOTE: BETA, simple implementation
 76 | 	 *
 77 | 	 * @param {number} x - vector end point for x (start = 0)
 78 | 	 * @param {number} y - vector end point for y (start = 0)
 79 | 	 * @returns {{x: number, y: number}}
 80 | 	 */
 81 | 	reflectVector: function(x, y) {
 82 | 
 83 | 		var v = this.applyToPoint(0, 1),
 84 | 			d = 2 * (v.x * x + v.y * y);
 85 | 
 86 | 		x -= d * v.x;
 87 | 		y -= d * v.y;
 88 | 
 89 | 		return {x:x, y:y};
 90 | 	},
 91 | 
 92 | 	/**
 93 | 	 * Short-hand to reset current matrix to an identity matrix.
 94 | 	 */
 95 | 	reset: function() {
 96 | 		return this.setTransform(1, 0, 0, 1, 0, 0);
 97 | 	},
 98 | 
 99 | 	/**
100 | 	 * Rotates current matrix accumulative by angle.
101 | 	 * @param {number} angle - angle in radians
102 | 	 */
103 | 	rotate: function(angle) {
104 | 		var cos = Math.cos(angle),
105 | 			sin = Math.sin(angle);
106 | 		return this._t(cos, sin, -sin, cos, 0, 0);
107 | 	},
108 | 
109 | 	/**
110 | 	 * Converts a vector given as x and y to angle, and
111 | 	 * rotates (accumulative).
112 | 	 * @param x
113 | 	 * @param y
114 | 	 * @returns {*}
115 | 	 */
116 | 	rotateFromVector: function(x, y) {
117 | 		return this.rotate(Math.atan2(y, x));
118 | 	},
119 | 
120 | 	/**
121 | 	 * Helper method to make a rotation based on an angle in degrees.
122 | 	 * @param {number} angle - angle in degrees
123 | 	 */
124 | 	rotateDeg: function(angle) {
125 | 		return this.rotate(angle * Math.PI / 180);
126 | 	},
127 | 
128 | 	/**
129 | 	 * Scales current matrix uniformly and accumulative.
130 | 	 * @param {number} f - scale factor for both x and y (1 does nothing)
131 | 	 */
132 | 	scaleU: function(f) {
133 | 		return this._t(f, 0, 0, f, 0, 0);
134 | 	},
135 | 
136 | 	/**
137 | 	 * Scales current matrix accumulative.
138 | 	 * @param {number} sx - scale factor x (1 does nothing)
139 | 	 * @param {number} sy - scale factor y (1 does nothing)
140 | 	 */
141 | 	scale: function(sx, sy) {
142 | 		return this._t(sx, 0, 0, sy, 0, 0);
143 | 	},
144 | 
145 | 	/**
146 | 	 * Scales current matrix on x axis accumulative.
147 | 	 * @param {number} sx - scale factor x (1 does nothing)
148 | 	 */
149 | 	scaleX: function(sx) {
150 | 		return this._t(sx, 0, 0, 1, 0, 0);
151 | 	},
152 | 
153 | 	/**
154 | 	 * Scales current matrix on y axis accumulative.
155 | 	 * @param {number} sy - scale factor y (1 does nothing)
156 | 	 */
157 | 	scaleY: function(sy) {
158 | 		return this._t(1, 0, 0, sy, 0, 0);
159 | 	},
160 | 
161 | 	/**
162 | 	 * Apply shear to the current matrix accumulative.
163 | 	 * @param {number} sx - amount of shear for x
164 | 	 * @param {number} sy - amount of shear for y
165 | 	 */
166 | 	shear: function(sx, sy) {
167 | 		return this._t(1, sy, sx, 1, 0, 0);
168 | 	},
169 | 
170 | 	/**
171 | 	 * Apply shear for x to the current matrix accumulative.
172 | 	 * @param {number} sx - amount of shear for x
173 | 	 */
174 | 	shearX: function(sx) {
175 | 		return this._t(1, 0, sx, 1, 0, 0);
176 | 	},
177 | 
178 | 	/**
179 | 	 * Apply shear for y to the current matrix accumulative.
180 | 	 * @param {number} sy - amount of shear for y
181 | 	 */
182 | 	shearY: function(sy) {
183 | 		return this._t(1, sy, 0, 1, 0, 0);
184 | 	},
185 | 
186 | 	/**
187 | 	 * Apply skew to the current matrix accumulative.
188 | 	 * @param {number} ax - angle of skew for x
189 | 	 * @param {number} ay - angle of skew for y
190 | 	 */
191 | 	skew: function(ax, ay) {
192 | 		return this.shear(Math.tan(ax), Math.tan(ay));
193 | 	},
194 | 
195 | 	/**
196 | 	 * Apply skew for x to the current matrix accumulative.
197 | 	 * @param {number} ax - angle of skew for x
198 | 	 */
199 | 	skewX: function(ax) {
200 | 		return this.shearX(Math.tan(ax));
201 | 	},
202 | 
203 | 	/**
204 | 	 * Apply skew for y to the current matrix accumulative.
205 | 	 * @param {number} ay - angle of skew for y
206 | 	 */
207 | 	skewY: function(ay) {
208 | 		return this.shearY(Math.tan(ay));
209 | 	},
210 | 
211 | 	/**
212 | 	 * Set current matrix to new absolute matrix.
213 | 	 * @param {number} a - scale x
214 | 	 * @param {number} b - shear y
215 | 	 * @param {number} c - shear x
216 | 	 * @param {number} d - scale y
217 | 	 * @param {number} e - translate x
218 | 	 * @param {number} f - translate y
219 | 	 */
220 | 	setTransform: function(a, b, c, d, e, f) {
221 | 		var me = this;
222 | 		me.a = a;
223 | 		me.b = b;
224 | 		me.c = c;
225 | 		me.d = d;
226 | 		me.e = e;
227 | 		me.f = f;
228 | 		return me._x();
229 | 	},
230 | 
231 | 	/**
232 | 	 * Translate current matrix accumulative.
233 | 	 * @param {number} tx - translation for x
234 | 	 * @param {number} ty - translation for y
235 | 	 */
236 | 	translate: function(tx, ty) {
237 | 		return this._t(1, 0, 0, 1, tx, ty);
238 | 	},
239 | 
240 | 	/**
241 | 	 * Translate current matrix on x axis accumulative.
242 | 	 * @param {number} tx - translation for x
243 | 	 */
244 | 	translateX: function(tx) {
245 | 		return this._t(1, 0, 0, 1, tx, 0);
246 | 	},
247 | 
248 | 	/**
249 | 	 * Translate current matrix on y axis accumulative.
250 | 	 * @param {number} ty - translation for y
251 | 	 */
252 | 	translateY: function(ty) {
253 | 		return this._t(1, 0, 0, 1, 0, ty);
254 | 	},
255 | 
256 | 	/**
257 | 	 * Multiplies current matrix with new matrix values.
258 | 	 * @param {number} a2 - scale x
259 | 	 * @param {number} b2 - shear y
260 | 	 * @param {number} c2 - shear x
261 | 	 * @param {number} d2 - scale y
262 | 	 * @param {number} e2 - translate x
263 | 	 * @param {number} f2 - translate y
264 | 	 */
265 | 	transform: function(a2, b2, c2, d2, e2, f2) {
266 | 
267 | 		var me = this,
268 | 			a1 = me.a,
269 | 			b1 = me.b,
270 | 			c1 = me.c,
271 | 			d1 = me.d,
272 | 			e1 = me.e,
273 | 			f1 = me.f;
274 | 
275 | 		/* matrix order (canvas compatible):
276 | 		* ace
277 | 		* bdf
278 | 		* 001
279 | 		*/
280 | 		me.a = a1 * a2 + c1 * b2;
281 | 		me.b = b1 * a2 + d1 * b2;
282 | 		me.c = a1 * c2 + c1 * d2;
283 | 		me.d = b1 * c2 + d1 * d2;
284 | 		me.e = a1 * e2 + c1 * f2 + e1;
285 | 		me.f = b1 * e2 + d1 * f2 + f1;
286 | 
287 | 		return me._x();
288 | 	},
289 | 
290 | 	/**
291 | 	 * Divide this matrix on input matrix which must be invertible.
292 | 	 * @param {Matrix} m - matrix to divide on (divisor)
293 | 	 * @returns {Matrix}
294 | 	 */
295 | 	divide: function(m) {
296 | 
297 | 		if (!m.isInvertible())
298 | 			throw "Input matrix is not invertible";
299 | 
300 | 		var im = m.inverse();
301 | 
302 | 		return this._t(im.a, im.b, im.c, im.d, im.e, im.f);
303 | 	},
304 | 
305 | 	/**
306 | 	 * Divide current matrix on scalar value != 0.
307 | 	 * @param {number} d - divisor (can not be 0)
308 | 	 * @returns {Matrix}
309 | 	 */
310 | 	divideScalar: function(d) {
311 | 
312 | 		var me = this;
313 | 		me.a /= d;
314 | 		me.b /= d;
315 | 		me.c /= d;
316 | 		me.d /= d;
317 | 		me.e /= d;
318 | 		me.f /= d;
319 | 
320 | 		return me._x();
321 | 	},
322 | 
323 | 	/**
324 | 	 * Get an inverse matrix of current matrix. The method returns a new
325 | 	 * matrix with values you need to use to get to an identity matrix.
326 | 	 * Context from parent matrix is not applied to the returned matrix.
327 | 	 * @returns {Matrix}
328 | 	 */
329 | 	inverse: function() {
330 | 
331 | 		if (this.isIdentity()) {
332 | 			return new Matrix();
333 | 		}
334 | 		else if (!this.isInvertible()) {
335 | 			throw "Matrix is not invertible.";
336 | 		}
337 | 		else {
338 | 			var me = this,
339 | 				a = me.a,
340 | 				b = me.b,
341 | 				c = me.c,
342 | 				d = me.d,
343 | 				e = me.e,
344 | 				f = me.f,
345 | 
346 | 				m = new Matrix(),
347 | 				dt = a * d - b * c;	// determinant(), skip DRY here...
348 | 
349 | 			m.a = d / dt;
350 | 			m.b = -b / dt;
351 | 			m.c = -c / dt;
352 | 			m.d = a / dt;
353 | 			m.e = (c * f - d * e) / dt;
354 | 			m.f = -(a * f - b * e) / dt;
355 | 
356 | 			return m;
357 | 		}
358 | 	},
359 | 
360 | 	/**
361 | 	 * Interpolate this matrix with another and produce a new matrix.
362 | 	 * t is a value in the range [0.0, 1.0] where 0 is this instance and
363 | 	 * 1 is equal to the second matrix. The t value is not constrained.
364 | 	 *
365 | 	 * Context from parent matrix is not applied to the returned matrix.
366 | 	 *
367 | 	 * Note: this interpolation is naive. For animation use the
368 | 	 * intrpolateAnim() method instead.
369 | 	 *
370 | 	 * @param {Matrix} m2 - the matrix to interpolate with.
371 | 	 * @param {number} t - interpolation [0.0, 1.0]
372 | 	 * @param {CanvasRenderingContext2D} [context] - optional context to affect
373 | 	 * @returns {Matrix} - new instance with the interpolated result
374 | 	 */
375 | 	interpolate: function(m2, t, context) {
376 | 
377 | 		var me = this,
378 | 			m = context ? new Matrix(context) : new Matrix();
379 | 
380 | 		m.a = me.a + (m2.a - me.a) * t;
381 | 		m.b = me.b + (m2.b - me.b) * t;
382 | 		m.c = me.c + (m2.c - me.c) * t;
383 | 		m.d = me.d + (m2.d - me.d) * t;
384 | 		m.e = me.e + (m2.e - me.e) * t;
385 | 		m.f = me.f + (m2.f - me.f) * t;
386 | 
387 | 		return m._x();
388 | 	},
389 | 
390 | 	/**
391 | 	 * Interpolate this matrix with another and produce a new matrix.
392 | 	 * t is a value in the range [0.0, 1.0] where 0 is this instance and
393 | 	 * 1 is equal to the second matrix. The t value is not constrained.
394 | 	 *
395 | 	 * Context from parent matrix is not applied to the returned matrix.
396 | 	 *
397 | 	 * Note: this interpolation method uses decomposition which makes
398 | 	 * it suitable for animations (in particular where rotation takes
399 | 	 * places).
400 | 	 *
401 | 	 * @param {Matrix} m2 - the matrix to interpolate with.
402 | 	 * @param {number} t - interpolation [0.0, 1.0]
403 | 	 * @param {CanvasRenderingContext2D} [context] - optional context to affect
404 | 	 * @returns {Matrix} - new instance with the interpolated result
405 | 	 */
406 | 	interpolateAnim: function(m2, t, context) {
407 | 
408 | 		var me = this,
409 | 			m = context ? new Matrix(context) : new Matrix(),
410 | 			d1 = me.decompose(),
411 | 			d2 = m2.decompose(),
412 | 			rotation = d1.rotation + (d2.rotation - d1.rotation) * t,
413 | 			translateX = d1.translate.x + (d2.translate.x - d1.translate.x) * t,
414 | 			translateY = d1.translate.y + (d2.translate.y - d1.translate.y) * t,
415 | 			scaleX = d1.scale.x + (d2.scale.x - d1.scale.x) * t,
416 | 			scaleY = d1.scale.y + (d2.scale.y - d1.scale.y) * t
417 | 			;
418 | 
419 | 		m.translate(translateX, translateY);
420 | 		m.rotate(rotation);
421 | 		m.scale(scaleX, scaleY);
422 | 
423 | 		return m._x();
424 | 	},
425 | 
426 | 	/**
427 | 	 * Decompose the current matrix into simple transforms using either
428 | 	 * QR (default) or LU decomposition. Code adapted from
429 | 	 * http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/12/01/Decomposition-of-2D-transform-matrices
430 | 	 *
431 | 	 * The result must be applied in the following order to reproduce the current matrix:
432 | 	 *
433 | 	 *     QR: translate -> rotate -> scale -> skewX
434 | 	 *     LU: translate -> skewY  -> scale -> skewX
435 | 	 *
436 | 	 * @param {boolean} [useLU=false] - set to true to use LU rather than QR algorithm
437 | 	 * @returns {*} - an object containing current decomposed values (rotate, skew, scale, translate)
438 | 	 */
439 | 	decompose: function(useLU) {
440 | 
441 | 		var me = this,
442 | 			a = me.a,
443 | 			b = me.b,
444 | 			c = me.c,
445 | 			d = me.d,
446 | 			acos = Math.acos,
447 | 			atan = Math.atan,
448 | 			sqrt = Math.sqrt,
449 | 			pi = Math.PI,
450 | 
451 | 			translate = {x: me.e, y: me.f},
452 | 			rotation  = 0,
453 | 			scale     = {x: 1, y: 1},
454 | 			skew      = {x: 0, y: 0},
455 | 
456 | 			determ = a * d - b * c;	// determinant(), skip DRY here...
457 | 
458 | 		if (useLU) {
459 | 			if (a) {
460 | 				skew = {x:atan(c/a), y:atan(b/a)};
461 | 				scale = {x:a, y:determ/a};
462 | 			}
463 | 			else if (b) {
464 | 				rotation = pi * 0.5;
465 | 				scale = {x:b, y:determ/b};
466 | 				skew.x = atan(d/b);
467 | 			}
468 | 			else { // a = b = 0
469 | 				scale = {x:c, y:d};
470 | 				skew.x = pi * 0.25;
471 | 			}
472 | 		}
473 | 		else {
474 | 			// Apply the QR-like decomposition.
475 | 			if (a || b) {
476 | 				var r = sqrt(a*a + b*b);
477 | 				rotation = b > 0 ? acos(a/r) : -acos(a/r);
478 | 				scale = {x:r, y:determ/r};
479 | 				skew.x = atan((a*c + b*d) / (r*r));
480 | 			}
481 | 			else if (c || d) {
482 | 				var s = sqrt(c*c + d*d);
483 | 				rotation = pi * 0.5 - (d > 0 ? acos(-c/s) : -acos(c/s));
484 | 				scale = {x:determ/s, y:s};
485 | 				skew.y = atan((a*c + b*d) / (s*s));
486 | 			}
487 | 			else { // a = b = c = d = 0
488 | 				scale = {x:0, y:0};		// = invalid matrix
489 | 			}
490 | 		}
491 | 
492 | 		return {
493 | 			scale    : scale,
494 | 			translate: translate,
495 | 			rotation : rotation,
496 | 			skew     : skew
497 | 		};
498 | 	},
499 | 
500 | 	/**
501 | 	 * Returns the determinant of the current matrix.
502 | 	 * @returns {number}
503 | 	 */
504 | 	determinant : function() {
505 | 		return this.a * this.d - this.b * this.c;
506 | 	},
507 | 
508 | 	/**
509 | 	 * Apply current matrix to x and y point.
510 | 	 * Returns a point object.
511 | 	 *
512 | 	 * @param {number} x - value for x
513 | 	 * @param {number} y - value for y
514 | 	 * @returns {{x: number, y: number}} A new transformed point object
515 | 	 */
516 | 	applyToPoint: function(x, y) {
517 | 
518 | 		var me = this;
519 | 
520 | 		return {
521 | 			x: x * me.a + y * me.c + me.e,
522 | 			y: x * me.b + y * me.d + me.f
523 | 		};
524 | 	},
525 | 
526 | 	/**
527 | 	 * Apply current matrix to array with point objects or point pairs.
528 | 	 * Returns a new array with points in the same format as the input array.
529 | 	 *
530 | 	 * A point object is an object literal:
531 | 	 *
532 | 	 * {x: x, y: y}
533 | 	 *
534 | 	 * so an array would contain either:
535 | 	 *
536 | 	 * [{x: x1, y: y1}, {x: x2, y: y2}, ... {x: xn, y: yn}]
537 | 	 *
538 | 	 * or
539 | 	 * [x1, y1, x2, y2, ... xn, yn]
540 | 	 *
541 | 	 * @param {Array} points - array with point objects or pairs
542 | 	 * @returns {Array} A new array with transformed points
543 | 	 */
544 | 	applyToArray: function(points) {
545 | 
546 | 		var i = 0, p, l,
547 | 			mxPoints = [];
548 | 
549 | 		if (typeof points[0] === 'number') {
550 | 
551 | 			l = points.length;
552 | 
553 | 			while(i < l) {
554 | 				p = this.applyToPoint(points[i++], points[i++]);
555 | 				mxPoints.push(p.x, p.y);
556 | 			}
557 | 		}
558 | 		else {
559 | 			for(; p = points[i]; i++) {
560 | 				mxPoints.push(this.applyToPoint(p.x, p.y));
561 | 			}
562 | 		}
563 | 
564 | 		return mxPoints;
565 | 	},
566 | 
567 | 	/**
568 | 	 * Apply current matrix to a typed array with point pairs. Although
569 | 	 * the input array may be an ordinary array, this method is intended
570 | 	 * for more performant use where typed arrays are used. The returned
571 | 	 * array is regardless always returned as a Float32Array.
572 | 	 *
573 | 	 * @param {*} points - (typed) array with point pairs
574 | 	 * @param {boolean} [use64=false] - use Float64Array instead of Float32Array
575 | 	 * @returns {*} A new typed array with transformed points
576 | 	 */
577 | 	applyToTypedArray: function(points, use64) {
578 | 
579 | 		var i = 0, p,
580 | 			l = points.length,
581 | 			mxPoints = use64 ? new Float64Array(l) : new Float32Array(l);
582 | 
583 | 		while(i < l) {
584 | 			p = this.applyToPoint(points[i], points[i+1]);
585 | 			mxPoints[i++] = p.x;
586 | 			mxPoints[i++] = p.y;
587 | 		}
588 | 
589 | 		return mxPoints;
590 | 	},
591 | 
592 | 	/**
593 | 	 * Apply to any canvas 2D context object. This does not affect the
594 | 	 * context that optionally was referenced in constructor unless it is
595 | 	 * the same context.
596 | 	 * @param {CanvasRenderingContext2D} context
597 | 	 */
598 | 	applyToContext: function(context) {
599 | 		var me = this;
600 | 		context.setTransform(me.a, me.b, me.c, me.d, me.e, me.f);
601 | 		return me;
602 | 	},
603 | 
604 | 	/**
605 | 	 * Returns true if matrix is an identity matrix (no transforms applied).
606 | 	 * @returns {boolean} True if identity (not transformed)
607 | 	 */
608 | 	isIdentity: function() {
609 | 		var me = this;
610 | 		return (me._q(me.a, 1) &&
611 | 				me._q(me.b, 0) &&
612 | 				me._q(me.c, 0) &&
613 | 				me._q(me.d, 1) &&
614 | 				me._q(me.e, 0) &&
615 | 				me._q(me.f, 0));
616 | 	},
617 | 
618 | 	/**
619 | 	 * Returns true if matrix is invertible
620 | 	 * @returns {boolean}
621 | 	 */
622 | 	isInvertible: function() {
623 | 		return !this._q(this.determinant(), 0)
624 | 	},
625 | 
626 | 	/**
627 | 	 * Test if matrix is valid.
628 | 	 */
629 | 	isValid : function() {
630 | 		return !this._q(this.a * this.d, 0);
631 | 	},
632 | 
633 | 	/**
634 | 	 * Clones current instance and returning a new matrix.
635 | 	 * @param {boolean} [noContext=false] don't clone context reference if true
636 | 	 * @returns {Matrix}
637 | 	 */
638 | 	clone : function(noContext) {
639 | 		var me = this,
640 | 			m = new Matrix();
641 | 		m.a = me.a;
642 | 		m.b = me.b;
643 | 		m.c = me.c;
644 | 		m.d = me.d;
645 | 		m.e = me.e;
646 | 		m.f = me.f;
647 | 		if (!noContext) m.context = me.context;
648 | 
649 | 		return m;
650 | 	},
651 | 
652 | 	/**
653 | 	 * Compares current matrix with another matrix. Returns true if equal
654 | 	 * (within epsilon tolerance).
655 | 	 * @param {Matrix} m - matrix to compare this matrix with
656 | 	 * @returns {boolean}
657 | 	 */
658 | 	isEqual: function(m) {
659 | 
660 | 		var me = this,
661 | 			q = me._q;
662 | 
663 | 		return (q(me.a, m.a) &&
664 | 				q(me.b, m.b) &&
665 | 				q(me.c, m.c) &&
666 | 				q(me.d, m.d) &&
667 | 				q(me.e, m.e) &&
668 | 				q(me.f, m.f));
669 | 	},
670 | 
671 | 	/**
672 | 	 * Returns an array with current matrix values.
673 | 	 * @returns {Array}
674 | 	 */
675 | 	toArray: function() {
676 | 		var me = this;
677 | 		return [me.a, me.b, me.c, me.d, me.e, me.f];
678 | 	},
679 | 
680 | 	/**
681 | 	 * Generates a string that can be used with CSS `transform:`.
682 | 	 * @returns {string}
683 | 	 */
684 | 	toCSS: function() {
685 | 		return "matrix(" + this.toArray() + ")";
686 | 	},
687 | 
688 | 	/**
689 | 	 * Returns a JSON compatible string of current matrix.
690 | 	 * @returns {string}
691 | 	 */
692 | 	toJSON: function() {
693 | 		var me = this;
694 | 		return '{"a":' + me.a + ',"b":' + me.b + ',"c":' + me.c + ',"d":' + me.d + ',"e":' + me.e + ',"f":' + me.f + '}';
695 | 	},
696 | 
697 | 	/**
698 | 	 * Returns a string with current matrix as comma-separated list.
699 | 	 * @returns {string}
700 | 	 */
701 | 	toString: function() {
702 | 		return "" + this.toArray();
703 | 	},
704 | 
705 | 	/**
706 | 	 * Compares floating point values with some tolerance (epsilon)
707 | 	 * @param {number} f1 - float 1
708 | 	 * @param {number} f2 - float 2
709 | 	 * @returns {boolean}
710 | 	 * @private
711 | 	 */
712 | 	_q: function(f1, f2) {
713 | 		return Math.abs(f1 - f2) < 1e-14;
714 | 	},
715 | 
716 | 	/**
717 | 	 * Apply current absolute matrix to context if defined, to sync it.
718 | 	 * @private
719 | 	 */
720 | 	_x: function() {
721 | 		var me = this;
722 | 		if (me.context)
723 | 			me.context.setTransform(me.a, me.b, me.c, me.d, me.e, me.f);
724 | 		return me;
725 | 	}
726 | };
727 | 


--------------------------------------------------------------------------------
/docs/Matrix.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | 
   3 | <html lang="en">
   4 | <head>
   5 | 	<meta charset="utf-8">
   6 | 	<title>transformation-matrix-js Class: Matrix</title>
   7 | 
   8 | 	<!--[if lt IE 9]>
   9 | 	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  10 | 	<![endif]-->
  11 | 	<link type="text/css" rel="stylesheet" href="styles/sunlight.dark.css">
  12 | 
  13 | 	<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
  14 | 
  15 | </head>
  16 | 
  17 | <body>
  18 | <div class="container-fluid">
  19 | 	<div class="navbar navbar-fixed-top ">
  20 | 		<div class="navbar-inner">
  21 | 			<a class="brand" href="index.html">transformation-matrix-js</a>
  22 | 			<ul class="nav">
  23 | 				
  24 | 				<li class="dropdown">
  25 | 					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
  26 | 						class="caret"></b></a>
  27 | 
  28 | 					<ul class="dropdown-menu ">
  29 | 						
  30 | 						<li>
  31 | 							<a href="Matrix.html">Matrix</a>
  32 | 						</li>
  33 | 						
  34 | 
  35 | 					</ul>
  36 | 				</li>
  37 | 				
  38 | 			</ul>
  39 | 		</div>
  40 | 	</div>
  41 | 
  42 | 	<div class="row-fluid">
  43 | 
  44 | 		
  45 | 		<div class="span8">
  46 | 			
  47 | 				<div id="main">
  48 | 					
  49 | 
  50 | 
  51 | 	<h1 class="page-title">Class: Matrix</h1>
  52 | <section>
  53 | 
  54 | <header>
  55 |     <h2>
  56 |     Matrix
  57 |     </h2>
  58 |     
  59 | </header>
  60 | 
  61 | <article>
  62 |     <div class="container-overview">
  63 |     
  64 | 
  65 |     
  66 |         
  67 | <dt>
  68 |     <h4 class="name" id="Matrix"><span class="type-signature"></span>new Matrix<span class="signature">(<span class="optional">context</span>)</span><span class="type-signature"></span></h4>
  69 |     
  70 |     
  71 | </dt>
  72 | <dd>
  73 |     
  74 |     
  75 |     <div class="description">
  76 |         <p>2D transformation matrix object initialized with identity matrix.</p>
  77 | <p>The matrix can synchronize a canvas context by supplying the context
  78 | as an argument, or later apply current absolute transform to an
  79 | existing context.</p>
  80 | <p>All values are handled as floating point values.</p>
  81 |     </div>
  82 |     
  83 | 
  84 |     
  85 |     
  86 |     
  87 |     
  88 |     
  89 |         <h5>Parameters:</h5>
  90 |         
  91 | 
  92 | <table class="params table table-striped">
  93 |     <thead>
  94 | 	<tr>
  95 | 		
  96 | 		<th>Name</th>
  97 | 		
  98 | 
  99 | 		<th>Type</th>
 100 | 
 101 | 		
 102 | 		<th>Argument</th>
 103 | 		
 104 | 
 105 | 		
 106 | 
 107 | 		<th class="last">Description</th>
 108 | 	</tr>
 109 | 	</thead>
 110 | 
 111 | 	<tbody>
 112 | 	
 113 | 
 114 |         <tr>
 115 |             
 116 |                 <td class="name"><code>context</code></td>
 117 |             
 118 | 
 119 |             <td class="type">
 120 |             
 121 |                 
 122 | <span class="param-type">CanvasRenderingContext2D</span>
 123 | 
 124 | 
 125 |             
 126 |             </td>
 127 | 
 128 |             
 129 |                 <td class="attributes">
 130 |                 
 131 |                     &lt;optional><br>
 132 |                 
 133 | 
 134 |                 
 135 | 
 136 |                 
 137 |                 </td>
 138 |             
 139 | 
 140 |             
 141 | 
 142 |             <td class="description last"><p>Optional context to sync with Matrix</p></td>
 143 |         </tr>
 144 | 
 145 | 	
 146 | 	</tbody>
 147 | </table>
 148 | 
 149 |     
 150 |     
 151 |     
 152 | <dl class="details">
 153 | 	
 154 | 
 155 | 	<h5 class="subsection-title">Properties:</h5>
 156 | 
 157 | 	<dl>
 158 | 
 159 | <table class="props table table-striped">
 160 |     <thead>
 161 | 	<tr>
 162 | 		
 163 | 		<th>Name</th>
 164 | 		
 165 | 
 166 | 		<th>Type</th>
 167 | 
 168 | 		
 169 | 		<th>Argument</th>
 170 | 		
 171 | 
 172 | 		
 173 | 		<th>Default</th>
 174 | 		
 175 | 
 176 | 		<th class="last">Description</th>
 177 | 	</tr>
 178 | 	</thead>
 179 | 
 180 | 	<tbody>
 181 | 	
 182 | 
 183 |         <tr>
 184 |             
 185 |                 <td class="name"><code>a</code></td>
 186 |             
 187 | 
 188 |             <td class="type">
 189 |             
 190 |                 
 191 | <span class="param-type">number</span>
 192 | 
 193 | 
 194 |             
 195 |             </td>
 196 | 
 197 |             
 198 |                 <td class="attributes">
 199 |                 
 200 | 
 201 |                 
 202 |                 </td>
 203 |             
 204 | 
 205 |             
 206 |                 <td class="default">
 207 |                 
 208 |                 </td>
 209 |             
 210 | 
 211 |             <td class="description last"><p>scale x</p></td>
 212 |         </tr>
 213 | 
 214 | 	
 215 | 
 216 |         <tr>
 217 |             
 218 |                 <td class="name"><code>b</code></td>
 219 |             
 220 | 
 221 |             <td class="type">
 222 |             
 223 |                 
 224 | <span class="param-type">number</span>
 225 | 
 226 | 
 227 |             
 228 |             </td>
 229 | 
 230 |             
 231 |                 <td class="attributes">
 232 |                 
 233 | 
 234 |                 
 235 |                 </td>
 236 |             
 237 | 
 238 |             
 239 |                 <td class="default">
 240 |                 
 241 |                 </td>
 242 |             
 243 | 
 244 |             <td class="description last"><p>shear y</p></td>
 245 |         </tr>
 246 | 
 247 | 	
 248 | 
 249 |         <tr>
 250 |             
 251 |                 <td class="name"><code>c</code></td>
 252 |             
 253 | 
 254 |             <td class="type">
 255 |             
 256 |                 
 257 | <span class="param-type">number</span>
 258 | 
 259 | 
 260 |             
 261 |             </td>
 262 | 
 263 |             
 264 |                 <td class="attributes">
 265 |                 
 266 | 
 267 |                 
 268 |                 </td>
 269 |             
 270 | 
 271 |             
 272 |                 <td class="default">
 273 |                 
 274 |                 </td>
 275 |             
 276 | 
 277 |             <td class="description last"><p>shear x</p></td>
 278 |         </tr>
 279 | 
 280 | 	
 281 | 
 282 |         <tr>
 283 |             
 284 |                 <td class="name"><code>d</code></td>
 285 |             
 286 | 
 287 |             <td class="type">
 288 |             
 289 |                 
 290 | <span class="param-type">number</span>
 291 | 
 292 | 
 293 |             
 294 |             </td>
 295 | 
 296 |             
 297 |                 <td class="attributes">
 298 |                 
 299 | 
 300 |                 
 301 |                 </td>
 302 |             
 303 | 
 304 |             
 305 |                 <td class="default">
 306 |                 
 307 |                 </td>
 308 |             
 309 | 
 310 |             <td class="description last"><p>scale y</p></td>
 311 |         </tr>
 312 | 
 313 | 	
 314 | 
 315 |         <tr>
 316 |             
 317 |                 <td class="name"><code>e</code></td>
 318 |             
 319 | 
 320 |             <td class="type">
 321 |             
 322 |                 
 323 | <span class="param-type">number</span>
 324 | 
 325 | 
 326 |             
 327 |             </td>
 328 | 
 329 |             
 330 |                 <td class="attributes">
 331 |                 
 332 | 
 333 |                 
 334 |                 </td>
 335 |             
 336 | 
 337 |             
 338 |                 <td class="default">
 339 |                 
 340 |                 </td>
 341 |             
 342 | 
 343 |             <td class="description last"><p>translate x</p></td>
 344 |         </tr>
 345 | 
 346 | 	
 347 | 
 348 |         <tr>
 349 |             
 350 |                 <td class="name"><code>f</code></td>
 351 |             
 352 | 
 353 |             <td class="type">
 354 |             
 355 |                 
 356 | <span class="param-type">number</span>
 357 | 
 358 | 
 359 |             
 360 |             </td>
 361 | 
 362 |             
 363 |                 <td class="attributes">
 364 |                 
 365 | 
 366 |                 
 367 |                 </td>
 368 |             
 369 | 
 370 |             
 371 |                 <td class="default">
 372 |                 
 373 |                 </td>
 374 |             
 375 | 
 376 |             <td class="description last"><p>translate y</p></td>
 377 |         </tr>
 378 | 
 379 | 	
 380 | 
 381 |         <tr>
 382 |             
 383 |                 <td class="name"><code>context</code></td>
 384 |             
 385 | 
 386 |             <td class="type">
 387 |             
 388 |                 
 389 | <span class="param-type">CanvasRenderingContext2D</span>
 390 | |
 391 | 
 392 | <span class="param-type">null</span>
 393 | 
 394 | 
 395 |             
 396 |             </td>
 397 | 
 398 |             
 399 |                 <td class="attributes">
 400 |                 
 401 |                     &lt;optional><br>
 402 |                 
 403 | 
 404 |                 
 405 |                 </td>
 406 |             
 407 | 
 408 |             
 409 |                 <td class="default">
 410 |                 
 411 |                     null
 412 |                 
 413 |                 </td>
 414 |             
 415 | 
 416 |             <td class="description last"><p>set or get current canvas context</p></td>
 417 |         </tr>
 418 | 
 419 | 	
 420 | 	</tbody>
 421 | </table>
 422 | </dl>
 423 | 
 424 | 	
 425 | 
 426 | 	
 427 | 
 428 | 	
 429 | 
 430 | 	
 431 | 
 432 | 	
 433 | 
 434 | 	
 435 | 
 436 | 	
 437 | 
 438 | 	
 439 | 
 440 | 	
 441 | 
 442 | 
 443 | 
 444 | 	
 445 | 
 446 | 	
 447 | 
 448 | 	
 449 | 
 450 | 	
 451 | </dl>
 452 | 
 453 |     
 454 |     
 455 | 
 456 |     
 457 | 
 458 |     
 459 |     
 460 |     
 461 |     
 462 |     
 463 |     
 464 |     
 465 | </dd>
 466 | 
 467 |     
 468 |     </div>
 469 | 
 470 |     
 471 | 
 472 |     
 473 | 
 474 |     
 475 | 
 476 |     
 477 | 
 478 |     
 479 | 
 480 |     
 481 | 
 482 |     
 483 |         <h3 class="subsection-title">Methods</h3>
 484 | 
 485 |         <dl>
 486 |             
 487 | <dt>
 488 |     <h4 class="name" id="applyToArray"><span class="type-signature"></span>applyToArray<span class="signature">(points)</span><span class="type-signature"> &rarr; {Array}</span></h4>
 489 |     
 490 |     
 491 | </dt>
 492 | <dd>
 493 |     
 494 |     
 495 |     <div class="description">
 496 |         <p>Apply current matrix to array with point objects or point pairs.
 497 | Returns a new array with points in the same format as the input array.</p>
 498 | <p>A point object is an object literal:</p>
 499 | <p>{x: x, y: y}</p>
 500 | <p>so an array would contain either:</p>
 501 | <p>[{x: x1, y: y1}, {x: x2, y: y2}, ... {x: xn, y: yn}]</p>
 502 | <p>or
 503 | [x1, y1, x2, y2, ... xn, yn]</p>
 504 |     </div>
 505 |     
 506 | 
 507 |     
 508 |     
 509 |     
 510 |     
 511 |     
 512 |         <h5>Parameters:</h5>
 513 |         
 514 | 
 515 | <table class="params table table-striped">
 516 |     <thead>
 517 | 	<tr>
 518 | 		
 519 | 		<th>Name</th>
 520 | 		
 521 | 
 522 | 		<th>Type</th>
 523 | 
 524 | 		
 525 | 
 526 | 		
 527 | 
 528 | 		<th class="last">Description</th>
 529 | 	</tr>
 530 | 	</thead>
 531 | 
 532 | 	<tbody>
 533 | 	
 534 | 
 535 |         <tr>
 536 |             
 537 |                 <td class="name"><code>points</code></td>
 538 |             
 539 | 
 540 |             <td class="type">
 541 |             
 542 |                 
 543 | <span class="param-type">Array</span>
 544 | 
 545 | 
 546 |             
 547 |             </td>
 548 | 
 549 |             
 550 | 
 551 |             
 552 | 
 553 |             <td class="description last"><p>array with point objects or pairs</p></td>
 554 |         </tr>
 555 | 
 556 | 	
 557 | 	</tbody>
 558 | </table>
 559 | 
 560 |     
 561 |     
 562 |     
 563 | <dl class="details">
 564 | 	
 565 | 
 566 | 	
 567 | 
 568 | 	
 569 | 
 570 | 	
 571 | 
 572 | 	
 573 | 
 574 | 	
 575 | 
 576 | 	
 577 | 
 578 | 	
 579 | 
 580 | 	
 581 | 
 582 | 
 583 | 
 584 | 	
 585 | 
 586 | 	
 587 | 
 588 | 	
 589 | 
 590 | 	
 591 | </dl>
 592 | 
 593 |     
 594 |     
 595 | 
 596 |     
 597 | 
 598 |     
 599 |     
 600 |     
 601 |     
 602 |     
 603 |     <h5>Returns:</h5>
 604 |     
 605 |             
 606 | <div class="param-desc">
 607 |     <p>A new array with transformed points</p>
 608 | </div>
 609 | 
 610 | 
 611 | 
 612 | <dl>
 613 | 	<dt>
 614 | 		Type
 615 | 	</dt>
 616 | 	<dd>
 617 | 		
 618 | <span class="param-type">Array</span>
 619 | 
 620 | 
 621 | 	</dd>
 622 | </dl>
 623 | 
 624 | 
 625 |         
 626 |     
 627 |     
 628 | </dd>
 629 | 
 630 |         
 631 |             
 632 | <dt>
 633 |     <h4 class="name" id="applyToContext"><span class="type-signature"></span>applyToContext<span class="signature">(context)</span><span class="type-signature"></span></h4>
 634 |     
 635 |     
 636 | </dt>
 637 | <dd>
 638 |     
 639 |     
 640 |     <div class="description">
 641 |         <p>Apply to any canvas 2D context object. This does not affect the
 642 | context that optionally was referenced in constructor unless it is
 643 | the same context.</p>
 644 |     </div>
 645 |     
 646 | 
 647 |     
 648 |     
 649 |     
 650 |     
 651 |     
 652 |         <h5>Parameters:</h5>
 653 |         
 654 | 
 655 | <table class="params table table-striped">
 656 |     <thead>
 657 | 	<tr>
 658 | 		
 659 | 		<th>Name</th>
 660 | 		
 661 | 
 662 | 		<th>Type</th>
 663 | 
 664 | 		
 665 | 
 666 | 		
 667 | 
 668 | 		<th class="last">Description</th>
 669 | 	</tr>
 670 | 	</thead>
 671 | 
 672 | 	<tbody>
 673 | 	
 674 | 
 675 |         <tr>
 676 |             
 677 |                 <td class="name"><code>context</code></td>
 678 |             
 679 | 
 680 |             <td class="type">
 681 |             
 682 |                 
 683 | <span class="param-type">CanvasRenderingContext2D</span>
 684 | 
 685 | 
 686 |             
 687 |             </td>
 688 | 
 689 |             
 690 | 
 691 |             
 692 | 
 693 |             <td class="description last"></td>
 694 |         </tr>
 695 | 
 696 | 	
 697 | 	</tbody>
 698 | </table>
 699 | 
 700 |     
 701 |     
 702 |     
 703 | <dl class="details">
 704 | 	
 705 | 
 706 | 	
 707 | 
 708 | 	
 709 | 
 710 | 	
 711 | 
 712 | 	
 713 | 
 714 | 	
 715 | 
 716 | 	
 717 | 
 718 | 	
 719 | 
 720 | 	
 721 | 
 722 | 
 723 | 
 724 | 	
 725 | 
 726 | 	
 727 | 
 728 | 	
 729 | 
 730 | 	
 731 | </dl>
 732 | 
 733 |     
 734 |     
 735 | 
 736 |     
 737 | 
 738 |     
 739 |     
 740 |     
 741 |     
 742 |     
 743 |     
 744 |     
 745 | </dd>
 746 | 
 747 |         
 748 |             
 749 | <dt>
 750 |     <h4 class="name" id="applyToPoint"><span class="type-signature"></span>applyToPoint<span class="signature">(x, y)</span><span class="type-signature"> &rarr; {Object}</span></h4>
 751 |     
 752 |     
 753 | </dt>
 754 | <dd>
 755 |     
 756 |     
 757 |     <div class="description">
 758 |         <p>Apply current matrix to x and y point.
 759 | Returns a point object.</p>
 760 |     </div>
 761 |     
 762 | 
 763 |     
 764 |     
 765 |     
 766 |     
 767 |     
 768 |         <h5>Parameters:</h5>
 769 |         
 770 | 
 771 | <table class="params table table-striped">
 772 |     <thead>
 773 | 	<tr>
 774 | 		
 775 | 		<th>Name</th>
 776 | 		
 777 | 
 778 | 		<th>Type</th>
 779 | 
 780 | 		
 781 | 
 782 | 		
 783 | 
 784 | 		<th class="last">Description</th>
 785 | 	</tr>
 786 | 	</thead>
 787 | 
 788 | 	<tbody>
 789 | 	
 790 | 
 791 |         <tr>
 792 |             
 793 |                 <td class="name"><code>x</code></td>
 794 |             
 795 | 
 796 |             <td class="type">
 797 |             
 798 |                 
 799 | <span class="param-type">number</span>
 800 | 
 801 | 
 802 |             
 803 |             </td>
 804 | 
 805 |             
 806 | 
 807 |             
 808 | 
 809 |             <td class="description last"><p>value for x</p></td>
 810 |         </tr>
 811 | 
 812 | 	
 813 | 
 814 |         <tr>
 815 |             
 816 |                 <td class="name"><code>y</code></td>
 817 |             
 818 | 
 819 |             <td class="type">
 820 |             
 821 |                 
 822 | <span class="param-type">number</span>
 823 | 
 824 | 
 825 |             
 826 |             </td>
 827 | 
 828 |             
 829 | 
 830 |             
 831 | 
 832 |             <td class="description last"><p>value for y</p></td>
 833 |         </tr>
 834 | 
 835 | 	
 836 | 	</tbody>
 837 | </table>
 838 | 
 839 |     
 840 |     
 841 |     
 842 | <dl class="details">
 843 | 	
 844 | 
 845 | 	
 846 | 
 847 | 	
 848 | 
 849 | 	
 850 | 
 851 | 	
 852 | 
 853 | 	
 854 | 
 855 | 	
 856 | 
 857 | 	
 858 | 
 859 | 	
 860 | 
 861 | 
 862 | 
 863 | 	
 864 | 
 865 | 	
 866 | 
 867 | 	
 868 | 
 869 | 	
 870 | </dl>
 871 | 
 872 |     
 873 |     
 874 | 
 875 |     
 876 | 
 877 |     
 878 |     
 879 |     
 880 |     
 881 |     
 882 |     <h5>Returns:</h5>
 883 |     
 884 |             
 885 | <div class="param-desc">
 886 |     <p>A new transformed point object</p>
 887 | </div>
 888 | 
 889 | 
 890 | 
 891 | <dl>
 892 | 	<dt>
 893 | 		Type
 894 | 	</dt>
 895 | 	<dd>
 896 | 		
 897 | <span class="param-type">Object</span>
 898 | 
 899 | 
 900 | 	</dd>
 901 | </dl>
 902 | 
 903 | 
 904 |         
 905 |     
 906 |     
 907 | </dd>
 908 | 
 909 |         
 910 |             
 911 | <dt>
 912 |     <h4 class="name" id="applyToTypedArray"><span class="type-signature"></span>applyToTypedArray<span class="signature">(points, <span class="optional">use64</span>)</span><span class="type-signature"> &rarr; {*}</span></h4>
 913 |     
 914 |     
 915 | </dt>
 916 | <dd>
 917 |     
 918 |     
 919 |     <div class="description">
 920 |         <p>Apply current matrix to a typed array with point pairs. Although
 921 | the input array may be an ordinary array, this method is intended
 922 | for more performant use where typed arrays are used. The returned
 923 | array is regardless always returned as a Float32Array.</p>
 924 |     </div>
 925 |     
 926 | 
 927 |     
 928 |     
 929 |     
 930 |     
 931 |     
 932 |         <h5>Parameters:</h5>
 933 |         
 934 | 
 935 | <table class="params table table-striped">
 936 |     <thead>
 937 | 	<tr>
 938 | 		
 939 | 		<th>Name</th>
 940 | 		
 941 | 
 942 | 		<th>Type</th>
 943 | 
 944 | 		
 945 | 		<th>Argument</th>
 946 | 		
 947 | 
 948 | 		
 949 | 		<th>Default</th>
 950 | 		
 951 | 
 952 | 		<th class="last">Description</th>
 953 | 	</tr>
 954 | 	</thead>
 955 | 
 956 | 	<tbody>
 957 | 	
 958 | 
 959 |         <tr>
 960 |             
 961 |                 <td class="name"><code>points</code></td>
 962 |             
 963 | 
 964 |             <td class="type">
 965 |             
 966 |                 
 967 | <span class="param-type">*</span>
 968 | 
 969 | 
 970 |             
 971 |             </td>
 972 | 
 973 |             
 974 |                 <td class="attributes">
 975 |                 
 976 | 
 977 |                 
 978 | 
 979 |                 
 980 |                 </td>
 981 |             
 982 | 
 983 |             
 984 |                 <td class="default">
 985 |                 
 986 |                 </td>
 987 |             
 988 | 
 989 |             <td class="description last"><p>(typed) array with point pairs</p></td>
 990 |         </tr>
 991 | 
 992 | 	
 993 | 
 994 |         <tr>
 995 |             
 996 |                 <td class="name"><code>use64</code></td>
 997 |             
 998 | 
 999 |             <td class="type">
1000 |             
1001 |                 
1002 | <span class="param-type">boolean</span>
1003 | 
1004 | 
1005 |             
1006 |             </td>
1007 | 
1008 |             
1009 |                 <td class="attributes">
1010 |                 
1011 |                     &lt;optional><br>
1012 |                 
1013 | 
1014 |                 
1015 | 
1016 |                 
1017 |                 </td>
1018 |             
1019 | 
1020 |             
1021 |                 <td class="default">
1022 |                 
1023 |                     false
1024 |                 
1025 |                 </td>
1026 |             
1027 | 
1028 |             <td class="description last"><p>use Float64Array instead of Float32Array</p></td>
1029 |         </tr>
1030 | 
1031 | 	
1032 | 	</tbody>
1033 | </table>
1034 | 
1035 |     
1036 |     
1037 |     
1038 | <dl class="details">
1039 | 	
1040 | 
1041 | 	
1042 | 
1043 | 	
1044 | 
1045 | 	
1046 | 
1047 | 	
1048 | 
1049 | 	
1050 | 
1051 | 	
1052 | 
1053 | 	
1054 | 
1055 | 	
1056 | 
1057 | 
1058 | 
1059 | 	
1060 | 
1061 | 	
1062 | 
1063 | 	
1064 | 
1065 | 	
1066 | </dl>
1067 | 
1068 |     
1069 |     
1070 | 
1071 |     
1072 | 
1073 |     
1074 |     
1075 |     
1076 |     
1077 |     
1078 |     <h5>Returns:</h5>
1079 |     
1080 |             
1081 | <div class="param-desc">
1082 |     <p>A new typed array with transformed points</p>
1083 | </div>
1084 | 
1085 | 
1086 | 
1087 | <dl>
1088 | 	<dt>
1089 | 		Type
1090 | 	</dt>
1091 | 	<dd>
1092 | 		
1093 | <span class="param-type">*</span>
1094 | 
1095 | 
1096 | 	</dd>
1097 | </dl>
1098 | 
1099 | 
1100 |         
1101 |     
1102 |     
1103 | </dd>
1104 | 
1105 |         
1106 |             
1107 | <dt>
1108 |     <h4 class="name" id="clone"><span class="type-signature"></span>clone<span class="signature">(<span class="optional">noContext</span>)</span><span class="type-signature"> &rarr; {<a href="Matrix.html">Matrix</a>}</span></h4>
1109 |     
1110 |     
1111 | </dt>
1112 | <dd>
1113 |     
1114 |     
1115 |     <div class="description">
1116 |         <p>Clones current instance and returning a new matrix.</p>
1117 |     </div>
1118 |     
1119 | 
1120 |     
1121 |     
1122 |     
1123 |     
1124 |     
1125 |         <h5>Parameters:</h5>
1126 |         
1127 | 
1128 | <table class="params table table-striped">
1129 |     <thead>
1130 | 	<tr>
1131 | 		
1132 | 		<th>Name</th>
1133 | 		
1134 | 
1135 | 		<th>Type</th>
1136 | 
1137 | 		
1138 | 		<th>Argument</th>
1139 | 		
1140 | 
1141 | 		
1142 | 		<th>Default</th>
1143 | 		
1144 | 
1145 | 		<th class="last">Description</th>
1146 | 	</tr>
1147 | 	</thead>
1148 | 
1149 | 	<tbody>
1150 | 	
1151 | 
1152 |         <tr>
1153 |             
1154 |                 <td class="name"><code>noContext</code></td>
1155 |             
1156 | 
1157 |             <td class="type">
1158 |             
1159 |                 
1160 | <span class="param-type">boolean</span>
1161 | 
1162 | 
1163 |             
1164 |             </td>
1165 | 
1166 |             
1167 |                 <td class="attributes">
1168 |                 
1169 |                     &lt;optional><br>
1170 |                 
1171 | 
1172 |                 
1173 | 
1174 |                 
1175 |                 </td>
1176 |             
1177 | 
1178 |             
1179 |                 <td class="default">
1180 |                 
1181 |                     false
1182 |                 
1183 |                 </td>
1184 |             
1185 | 
1186 |             <td class="description last"><p>don't clone context reference if true</p></td>
1187 |         </tr>
1188 | 
1189 | 	
1190 | 	</tbody>
1191 | </table>
1192 | 
1193 |     
1194 |     
1195 |     
1196 | <dl class="details">
1197 | 	
1198 | 
1199 | 	
1200 | 
1201 | 	
1202 | 
1203 | 	
1204 | 
1205 | 	
1206 | 
1207 | 	
1208 | 
1209 | 	
1210 | 
1211 | 	
1212 | 
1213 | 	
1214 | 
1215 | 
1216 | 
1217 | 	
1218 | 
1219 | 	
1220 | 
1221 | 	
1222 | 
1223 | 	
1224 | </dl>
1225 | 
1226 |     
1227 |     
1228 | 
1229 |     
1230 | 
1231 |     
1232 |     
1233 |     
1234 |     
1235 |     
1236 |     <h5>Returns:</h5>
1237 |     
1238 |             
1239 | 
1240 | 
1241 | <dl>
1242 | 	<dt>
1243 | 		Type
1244 | 	</dt>
1245 | 	<dd>
1246 | 		
1247 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
1248 | 
1249 | 
1250 | 	</dd>
1251 | </dl>
1252 | 
1253 | 
1254 |         
1255 |     
1256 |     
1257 | </dd>
1258 | 
1259 |         
1260 |             
1261 | <dt>
1262 |     <h4 class="name" id="concat"><span class="type-signature"></span>concat<span class="signature">(cm)</span><span class="type-signature"> &rarr; {<a href="Matrix.html">Matrix</a>}</span></h4>
1263 |     
1264 |     
1265 | </dt>
1266 | <dd>
1267 |     
1268 |     
1269 |     <div class="description">
1270 |         <p>Concatenates transforms of this matrix onto the given child matrix and
1271 | returns a new matrix. This instance is used on left side.</p>
1272 |     </div>
1273 |     
1274 | 
1275 |     
1276 |     
1277 |     
1278 |     
1279 |     
1280 |         <h5>Parameters:</h5>
1281 |         
1282 | 
1283 | <table class="params table table-striped">
1284 |     <thead>
1285 | 	<tr>
1286 | 		
1287 | 		<th>Name</th>
1288 | 		
1289 | 
1290 | 		<th>Type</th>
1291 | 
1292 | 		
1293 | 
1294 | 		
1295 | 
1296 | 		<th class="last">Description</th>
1297 | 	</tr>
1298 | 	</thead>
1299 | 
1300 | 	<tbody>
1301 | 	
1302 | 
1303 |         <tr>
1304 |             
1305 |                 <td class="name"><code>cm</code></td>
1306 |             
1307 | 
1308 |             <td class="type">
1309 |             
1310 |                 
1311 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
1312 | 
1313 | 
1314 |             
1315 |             </td>
1316 | 
1317 |             
1318 | 
1319 |             
1320 | 
1321 |             <td class="description last"><p>child matrix to apply concatenation to</p></td>
1322 |         </tr>
1323 | 
1324 | 	
1325 | 	</tbody>
1326 | </table>
1327 | 
1328 |     
1329 |     
1330 |     
1331 | <dl class="details">
1332 | 	
1333 | 
1334 | 	
1335 | 
1336 | 	
1337 | 
1338 | 	
1339 | 
1340 | 	
1341 | 
1342 | 	
1343 | 
1344 | 	
1345 | 
1346 | 	
1347 | 
1348 | 	
1349 | 
1350 | 
1351 | 
1352 | 	
1353 | 
1354 | 	
1355 | 
1356 | 	
1357 | 
1358 | 	
1359 | </dl>
1360 | 
1361 |     
1362 |     
1363 | 
1364 |     
1365 | 
1366 |     
1367 |     
1368 |     
1369 |     
1370 |     
1371 |     <h5>Returns:</h5>
1372 |     
1373 |             
1374 | 
1375 | 
1376 | <dl>
1377 | 	<dt>
1378 | 		Type
1379 | 	</dt>
1380 | 	<dd>
1381 | 		
1382 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
1383 | 
1384 | 
1385 | 	</dd>
1386 | </dl>
1387 | 
1388 | 
1389 |         
1390 |     
1391 |     
1392 | </dd>
1393 | 
1394 |         
1395 |             
1396 | <dt>
1397 |     <h4 class="name" id="decompose"><span class="type-signature"></span>decompose<span class="signature">(<span class="optional">useLU</span>)</span><span class="type-signature"> &rarr; {*}</span></h4>
1398 |     
1399 |     
1400 | </dt>
1401 | <dd>
1402 |     
1403 |     
1404 |     <div class="description">
1405 |         <p>Decompose the current matrix into simple transforms using either
1406 | QR (default) or LU decomposition. Code adapted from
1407 | http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/12/01/Decomposition-of-2D-transform-matrices</p>
1408 | <p>The result must be applied in the following order to reproduce the current matrix:</p>
1409 | <pre class="prettyprint source"><code>QR: translate -> rotate -> scale -> skewX
1410 | LU: translate -> skewY  -> scale -> skewX</code></pre>
1411 |     </div>
1412 |     
1413 | 
1414 |     
1415 |     
1416 |     
1417 |     
1418 |     
1419 |         <h5>Parameters:</h5>
1420 |         
1421 | 
1422 | <table class="params table table-striped">
1423 |     <thead>
1424 | 	<tr>
1425 | 		
1426 | 		<th>Name</th>
1427 | 		
1428 | 
1429 | 		<th>Type</th>
1430 | 
1431 | 		
1432 | 		<th>Argument</th>
1433 | 		
1434 | 
1435 | 		
1436 | 		<th>Default</th>
1437 | 		
1438 | 
1439 | 		<th class="last">Description</th>
1440 | 	</tr>
1441 | 	</thead>
1442 | 
1443 | 	<tbody>
1444 | 	
1445 | 
1446 |         <tr>
1447 |             
1448 |                 <td class="name"><code>useLU</code></td>
1449 |             
1450 | 
1451 |             <td class="type">
1452 |             
1453 |                 
1454 | <span class="param-type">boolean</span>
1455 | 
1456 | 
1457 |             
1458 |             </td>
1459 | 
1460 |             
1461 |                 <td class="attributes">
1462 |                 
1463 |                     &lt;optional><br>
1464 |                 
1465 | 
1466 |                 
1467 | 
1468 |                 
1469 |                 </td>
1470 |             
1471 | 
1472 |             
1473 |                 <td class="default">
1474 |                 
1475 |                     false
1476 |                 
1477 |                 </td>
1478 |             
1479 | 
1480 |             <td class="description last"><p>set to true to use LU rather than QR algorithm</p></td>
1481 |         </tr>
1482 | 
1483 | 	
1484 | 	</tbody>
1485 | </table>
1486 | 
1487 |     
1488 |     
1489 |     
1490 | <dl class="details">
1491 | 	
1492 | 
1493 | 	
1494 | 
1495 | 	
1496 | 
1497 | 	
1498 | 
1499 | 	
1500 | 
1501 | 	
1502 | 
1503 | 	
1504 | 
1505 | 	
1506 | 
1507 | 	
1508 | 
1509 | 
1510 | 
1511 | 	
1512 | 
1513 | 	
1514 | 
1515 | 	
1516 | 
1517 | 	
1518 | </dl>
1519 | 
1520 |     
1521 |     
1522 | 
1523 |     
1524 | 
1525 |     
1526 |     
1527 |     
1528 |     
1529 |     
1530 |     <h5>Returns:</h5>
1531 |     
1532 |             
1533 | <div class="param-desc">
1534 |     <ul>
1535 | <li>an object containing current decomposed values (rotate, skew, scale, translate)</li>
1536 | </ul>
1537 | </div>
1538 | 
1539 | 
1540 | 
1541 | <dl>
1542 | 	<dt>
1543 | 		Type
1544 | 	</dt>
1545 | 	<dd>
1546 | 		
1547 | <span class="param-type">*</span>
1548 | 
1549 | 
1550 | 	</dd>
1551 | </dl>
1552 | 
1553 | 
1554 |         
1555 |     
1556 |     
1557 | </dd>
1558 | 
1559 |         
1560 |             
1561 | <dt>
1562 |     <h4 class="name" id="determinant"><span class="type-signature"></span>determinant<span class="signature">()</span><span class="type-signature"> &rarr; {number}</span></h4>
1563 |     
1564 |     
1565 | </dt>
1566 | <dd>
1567 |     
1568 |     
1569 |     <div class="description">
1570 |         <p>Returns the determinant of the current matrix.</p>
1571 |     </div>
1572 |     
1573 | 
1574 |     
1575 |     
1576 |     
1577 |     
1578 |     
1579 |     
1580 |     
1581 | <dl class="details">
1582 | 	
1583 | 
1584 | 	
1585 | 
1586 | 	
1587 | 
1588 | 	
1589 | 
1590 | 	
1591 | 
1592 | 	
1593 | 
1594 | 	
1595 | 
1596 | 	
1597 | 
1598 | 	
1599 | 
1600 | 
1601 | 
1602 | 	
1603 | 
1604 | 	
1605 | 
1606 | 	
1607 | 
1608 | 	
1609 | </dl>
1610 | 
1611 |     
1612 |     
1613 | 
1614 |     
1615 | 
1616 |     
1617 |     
1618 |     
1619 |     
1620 |     
1621 |     <h5>Returns:</h5>
1622 |     
1623 |             
1624 | 
1625 | 
1626 | <dl>
1627 | 	<dt>
1628 | 		Type
1629 | 	</dt>
1630 | 	<dd>
1631 | 		
1632 | <span class="param-type">number</span>
1633 | 
1634 | 
1635 | 	</dd>
1636 | </dl>
1637 | 
1638 | 
1639 |         
1640 |     
1641 |     
1642 | </dd>
1643 | 
1644 |         
1645 |             
1646 | <dt>
1647 |     <h4 class="name" id="divide"><span class="type-signature"></span>divide<span class="signature">(m)</span><span class="type-signature"> &rarr; {<a href="Matrix.html">Matrix</a>}</span></h4>
1648 |     
1649 |     
1650 | </dt>
1651 | <dd>
1652 |     
1653 |     
1654 |     <div class="description">
1655 |         <p>Divide this matrix on input matrix which must be invertible.</p>
1656 |     </div>
1657 |     
1658 | 
1659 |     
1660 |     
1661 |     
1662 |     
1663 |     
1664 |         <h5>Parameters:</h5>
1665 |         
1666 | 
1667 | <table class="params table table-striped">
1668 |     <thead>
1669 | 	<tr>
1670 | 		
1671 | 		<th>Name</th>
1672 | 		
1673 | 
1674 | 		<th>Type</th>
1675 | 
1676 | 		
1677 | 
1678 | 		
1679 | 
1680 | 		<th class="last">Description</th>
1681 | 	</tr>
1682 | 	</thead>
1683 | 
1684 | 	<tbody>
1685 | 	
1686 | 
1687 |         <tr>
1688 |             
1689 |                 <td class="name"><code>m</code></td>
1690 |             
1691 | 
1692 |             <td class="type">
1693 |             
1694 |                 
1695 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
1696 | 
1697 | 
1698 |             
1699 |             </td>
1700 | 
1701 |             
1702 | 
1703 |             
1704 | 
1705 |             <td class="description last"><p>matrix to divide on (divisor)</p></td>
1706 |         </tr>
1707 | 
1708 | 	
1709 | 	</tbody>
1710 | </table>
1711 | 
1712 |     
1713 |     
1714 |     
1715 | <dl class="details">
1716 | 	
1717 | 
1718 | 	
1719 | 
1720 | 	
1721 | 
1722 | 	
1723 | 
1724 | 	
1725 | 
1726 | 	
1727 | 
1728 | 	
1729 | 
1730 | 	
1731 | 
1732 | 	
1733 | 
1734 | 
1735 | 
1736 | 	
1737 | 
1738 | 	
1739 | 
1740 | 	
1741 | 
1742 | 	
1743 | </dl>
1744 | 
1745 |     
1746 |     
1747 | 
1748 |     
1749 | 
1750 |     
1751 |     
1752 |     
1753 |     
1754 |     
1755 |     <h5>Returns:</h5>
1756 |     
1757 |             
1758 | 
1759 | 
1760 | <dl>
1761 | 	<dt>
1762 | 		Type
1763 | 	</dt>
1764 | 	<dd>
1765 | 		
1766 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
1767 | 
1768 | 
1769 | 	</dd>
1770 | </dl>
1771 | 
1772 | 
1773 |         
1774 |     
1775 |     
1776 | </dd>
1777 | 
1778 |         
1779 |             
1780 | <dt>
1781 |     <h4 class="name" id="divideScalar"><span class="type-signature"></span>divideScalar<span class="signature">(d)</span><span class="type-signature"> &rarr; {<a href="Matrix.html">Matrix</a>}</span></h4>
1782 |     
1783 |     
1784 | </dt>
1785 | <dd>
1786 |     
1787 |     
1788 |     <div class="description">
1789 |         <p>Divide current matrix on scalar value != 0.</p>
1790 |     </div>
1791 |     
1792 | 
1793 |     
1794 |     
1795 |     
1796 |     
1797 |     
1798 |         <h5>Parameters:</h5>
1799 |         
1800 | 
1801 | <table class="params table table-striped">
1802 |     <thead>
1803 | 	<tr>
1804 | 		
1805 | 		<th>Name</th>
1806 | 		
1807 | 
1808 | 		<th>Type</th>
1809 | 
1810 | 		
1811 | 
1812 | 		
1813 | 
1814 | 		<th class="last">Description</th>
1815 | 	</tr>
1816 | 	</thead>
1817 | 
1818 | 	<tbody>
1819 | 	
1820 | 
1821 |         <tr>
1822 |             
1823 |                 <td class="name"><code>d</code></td>
1824 |             
1825 | 
1826 |             <td class="type">
1827 |             
1828 |                 
1829 | <span class="param-type">number</span>
1830 | 
1831 | 
1832 |             
1833 |             </td>
1834 | 
1835 |             
1836 | 
1837 |             
1838 | 
1839 |             <td class="description last"><p>divisor (can not be 0)</p></td>
1840 |         </tr>
1841 | 
1842 | 	
1843 | 	</tbody>
1844 | </table>
1845 | 
1846 |     
1847 |     
1848 |     
1849 | <dl class="details">
1850 | 	
1851 | 
1852 | 	
1853 | 
1854 | 	
1855 | 
1856 | 	
1857 | 
1858 | 	
1859 | 
1860 | 	
1861 | 
1862 | 	
1863 | 
1864 | 	
1865 | 
1866 | 	
1867 | 
1868 | 
1869 | 
1870 | 	
1871 | 
1872 | 	
1873 | 
1874 | 	
1875 | 
1876 | 	
1877 | </dl>
1878 | 
1879 |     
1880 |     
1881 | 
1882 |     
1883 | 
1884 |     
1885 |     
1886 |     
1887 |     
1888 |     
1889 |     <h5>Returns:</h5>
1890 |     
1891 |             
1892 | 
1893 | 
1894 | <dl>
1895 | 	<dt>
1896 | 		Type
1897 | 	</dt>
1898 | 	<dd>
1899 | 		
1900 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
1901 | 
1902 | 
1903 | 	</dd>
1904 | </dl>
1905 | 
1906 | 
1907 |         
1908 |     
1909 |     
1910 | </dd>
1911 | 
1912 |         
1913 |             
1914 | <dt>
1915 |     <h4 class="name" id="flipX"><span class="type-signature"></span>flipX<span class="signature">()</span><span class="type-signature"></span></h4>
1916 |     
1917 |     
1918 | </dt>
1919 | <dd>
1920 |     
1921 |     
1922 |     <div class="description">
1923 |         <p>Flips the horizontal values.</p>
1924 |     </div>
1925 |     
1926 | 
1927 |     
1928 |     
1929 |     
1930 |     
1931 |     
1932 |     
1933 |     
1934 | <dl class="details">
1935 | 	
1936 | 
1937 | 	
1938 | 
1939 | 	
1940 | 
1941 | 	
1942 | 
1943 | 	
1944 | 
1945 | 	
1946 | 
1947 | 	
1948 | 
1949 | 	
1950 | 
1951 | 	
1952 | 
1953 | 
1954 | 
1955 | 	
1956 | 
1957 | 	
1958 | 
1959 | 	
1960 | 
1961 | 	
1962 | </dl>
1963 | 
1964 |     
1965 |     
1966 | 
1967 |     
1968 | 
1969 |     
1970 |     
1971 |     
1972 |     
1973 |     
1974 |     
1975 |     
1976 | </dd>
1977 | 
1978 |         
1979 |             
1980 | <dt>
1981 |     <h4 class="name" id="flipY"><span class="type-signature"></span>flipY<span class="signature">()</span><span class="type-signature"></span></h4>
1982 |     
1983 |     
1984 | </dt>
1985 | <dd>
1986 |     
1987 |     
1988 |     <div class="description">
1989 |         <p>Flips the vertical values.</p>
1990 |     </div>
1991 |     
1992 | 
1993 |     
1994 |     
1995 |     
1996 |     
1997 |     
1998 |     
1999 |     
2000 | <dl class="details">
2001 | 	
2002 | 
2003 | 	
2004 | 
2005 | 	
2006 | 
2007 | 	
2008 | 
2009 | 	
2010 | 
2011 | 	
2012 | 
2013 | 	
2014 | 
2015 | 	
2016 | 
2017 | 	
2018 | 
2019 | 
2020 | 
2021 | 	
2022 | 
2023 | 	
2024 | 
2025 | 	
2026 | 
2027 | 	
2028 | </dl>
2029 | 
2030 |     
2031 |     
2032 | 
2033 |     
2034 | 
2035 |     
2036 |     
2037 |     
2038 |     
2039 |     
2040 |     
2041 |     
2042 | </dd>
2043 | 
2044 |         
2045 |             
2046 | <dt>
2047 |     <h4 class="name" id="interpolate"><span class="type-signature"></span>interpolate<span class="signature">(m2, t, <span class="optional">context</span>)</span><span class="type-signature"> &rarr; {<a href="Matrix.html">Matrix</a>}</span></h4>
2048 |     
2049 |     
2050 | </dt>
2051 | <dd>
2052 |     
2053 |     
2054 |     <div class="description">
2055 |         <p>Interpolate this matrix with another and produce a new matrix.
2056 | t is a value in the range [0.0, 1.0] where 0 is this instance and
2057 | 1 is equal to the second matrix. The t value is not constrained.</p>
2058 | <p>Context from parent matrix is not applied to the returned matrix.</p>
2059 | <p>Note: this interpolation is naive. For animation use the
2060 | intrpolateAnim() method instead.</p>
2061 |     </div>
2062 |     
2063 | 
2064 |     
2065 |     
2066 |     
2067 |     
2068 |     
2069 |         <h5>Parameters:</h5>
2070 |         
2071 | 
2072 | <table class="params table table-striped">
2073 |     <thead>
2074 | 	<tr>
2075 | 		
2076 | 		<th>Name</th>
2077 | 		
2078 | 
2079 | 		<th>Type</th>
2080 | 
2081 | 		
2082 | 		<th>Argument</th>
2083 | 		
2084 | 
2085 | 		
2086 | 
2087 | 		<th class="last">Description</th>
2088 | 	</tr>
2089 | 	</thead>
2090 | 
2091 | 	<tbody>
2092 | 	
2093 | 
2094 |         <tr>
2095 |             
2096 |                 <td class="name"><code>m2</code></td>
2097 |             
2098 | 
2099 |             <td class="type">
2100 |             
2101 |                 
2102 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
2103 | 
2104 | 
2105 |             
2106 |             </td>
2107 | 
2108 |             
2109 |                 <td class="attributes">
2110 |                 
2111 | 
2112 |                 
2113 | 
2114 |                 
2115 |                 </td>
2116 |             
2117 | 
2118 |             
2119 | 
2120 |             <td class="description last"><p>the matrix to interpolate with.</p></td>
2121 |         </tr>
2122 | 
2123 | 	
2124 | 
2125 |         <tr>
2126 |             
2127 |                 <td class="name"><code>t</code></td>
2128 |             
2129 | 
2130 |             <td class="type">
2131 |             
2132 |                 
2133 | <span class="param-type">number</span>
2134 | 
2135 | 
2136 |             
2137 |             </td>
2138 | 
2139 |             
2140 |                 <td class="attributes">
2141 |                 
2142 | 
2143 |                 
2144 | 
2145 |                 
2146 |                 </td>
2147 |             
2148 | 
2149 |             
2150 | 
2151 |             <td class="description last"><p>interpolation [0.0, 1.0]</p></td>
2152 |         </tr>
2153 | 
2154 | 	
2155 | 
2156 |         <tr>
2157 |             
2158 |                 <td class="name"><code>context</code></td>
2159 |             
2160 | 
2161 |             <td class="type">
2162 |             
2163 |                 
2164 | <span class="param-type">CanvasRenderingContext2D</span>
2165 | 
2166 | 
2167 |             
2168 |             </td>
2169 | 
2170 |             
2171 |                 <td class="attributes">
2172 |                 
2173 |                     &lt;optional><br>
2174 |                 
2175 | 
2176 |                 
2177 | 
2178 |                 
2179 |                 </td>
2180 |             
2181 | 
2182 |             
2183 | 
2184 |             <td class="description last"><p>optional context to affect</p></td>
2185 |         </tr>
2186 | 
2187 | 	
2188 | 	</tbody>
2189 | </table>
2190 | 
2191 |     
2192 |     
2193 |     
2194 | <dl class="details">
2195 | 	
2196 | 
2197 | 	
2198 | 
2199 | 	
2200 | 
2201 | 	
2202 | 
2203 | 	
2204 | 
2205 | 	
2206 | 
2207 | 	
2208 | 
2209 | 	
2210 | 
2211 | 	
2212 | 
2213 | 
2214 | 
2215 | 	
2216 | 
2217 | 	
2218 | 
2219 | 	
2220 | 
2221 | 	
2222 | </dl>
2223 | 
2224 |     
2225 |     
2226 | 
2227 |     
2228 | 
2229 |     
2230 |     
2231 |     
2232 |     
2233 |     
2234 |     <h5>Returns:</h5>
2235 |     
2236 |             
2237 | <div class="param-desc">
2238 |     <ul>
2239 | <li>new instance with the interpolated result</li>
2240 | </ul>
2241 | </div>
2242 | 
2243 | 
2244 | 
2245 | <dl>
2246 | 	<dt>
2247 | 		Type
2248 | 	</dt>
2249 | 	<dd>
2250 | 		
2251 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
2252 | 
2253 | 
2254 | 	</dd>
2255 | </dl>
2256 | 
2257 | 
2258 |         
2259 |     
2260 |     
2261 | </dd>
2262 | 
2263 |         
2264 |             
2265 | <dt>
2266 |     <h4 class="name" id="interpolateAnim"><span class="type-signature"></span>interpolateAnim<span class="signature">(m2, t, <span class="optional">context</span>)</span><span class="type-signature"> &rarr; {<a href="Matrix.html">Matrix</a>}</span></h4>
2267 |     
2268 |     
2269 | </dt>
2270 | <dd>
2271 |     
2272 |     
2273 |     <div class="description">
2274 |         <p>Interpolate this matrix with another and produce a new matrix.
2275 | t is a value in the range [0.0, 1.0] where 0 is this instance and
2276 | 1 is equal to the second matrix. The t value is not constrained.</p>
2277 | <p>Context from parent matrix is not applied to the returned matrix.</p>
2278 | <p>Note: this interpolation method uses decomposition which makes
2279 | it suitable for animations (in particular where rotation takes
2280 | places).</p>
2281 |     </div>
2282 |     
2283 | 
2284 |     
2285 |     
2286 |     
2287 |     
2288 |     
2289 |         <h5>Parameters:</h5>
2290 |         
2291 | 
2292 | <table class="params table table-striped">
2293 |     <thead>
2294 | 	<tr>
2295 | 		
2296 | 		<th>Name</th>
2297 | 		
2298 | 
2299 | 		<th>Type</th>
2300 | 
2301 | 		
2302 | 		<th>Argument</th>
2303 | 		
2304 | 
2305 | 		
2306 | 
2307 | 		<th class="last">Description</th>
2308 | 	</tr>
2309 | 	</thead>
2310 | 
2311 | 	<tbody>
2312 | 	
2313 | 
2314 |         <tr>
2315 |             
2316 |                 <td class="name"><code>m2</code></td>
2317 |             
2318 | 
2319 |             <td class="type">
2320 |             
2321 |                 
2322 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
2323 | 
2324 | 
2325 |             
2326 |             </td>
2327 | 
2328 |             
2329 |                 <td class="attributes">
2330 |                 
2331 | 
2332 |                 
2333 | 
2334 |                 
2335 |                 </td>
2336 |             
2337 | 
2338 |             
2339 | 
2340 |             <td class="description last"><p>the matrix to interpolate with.</p></td>
2341 |         </tr>
2342 | 
2343 | 	
2344 | 
2345 |         <tr>
2346 |             
2347 |                 <td class="name"><code>t</code></td>
2348 |             
2349 | 
2350 |             <td class="type">
2351 |             
2352 |                 
2353 | <span class="param-type">number</span>
2354 | 
2355 | 
2356 |             
2357 |             </td>
2358 | 
2359 |             
2360 |                 <td class="attributes">
2361 |                 
2362 | 
2363 |                 
2364 | 
2365 |                 
2366 |                 </td>
2367 |             
2368 | 
2369 |             
2370 | 
2371 |             <td class="description last"><p>interpolation [0.0, 1.0]</p></td>
2372 |         </tr>
2373 | 
2374 | 	
2375 | 
2376 |         <tr>
2377 |             
2378 |                 <td class="name"><code>context</code></td>
2379 |             
2380 | 
2381 |             <td class="type">
2382 |             
2383 |                 
2384 | <span class="param-type">CanvasRenderingContext2D</span>
2385 | 
2386 | 
2387 |             
2388 |             </td>
2389 | 
2390 |             
2391 |                 <td class="attributes">
2392 |                 
2393 |                     &lt;optional><br>
2394 |                 
2395 | 
2396 |                 
2397 | 
2398 |                 
2399 |                 </td>
2400 |             
2401 | 
2402 |             
2403 | 
2404 |             <td class="description last"><p>optional context to affect</p></td>
2405 |         </tr>
2406 | 
2407 | 	
2408 | 	</tbody>
2409 | </table>
2410 | 
2411 |     
2412 |     
2413 |     
2414 | <dl class="details">
2415 | 	
2416 | 
2417 | 	
2418 | 
2419 | 	
2420 | 
2421 | 	
2422 | 
2423 | 	
2424 | 
2425 | 	
2426 | 
2427 | 	
2428 | 
2429 | 	
2430 | 
2431 | 	
2432 | 
2433 | 
2434 | 
2435 | 	
2436 | 
2437 | 	
2438 | 
2439 | 	
2440 | 
2441 | 	
2442 | </dl>
2443 | 
2444 |     
2445 |     
2446 | 
2447 |     
2448 | 
2449 |     
2450 |     
2451 |     
2452 |     
2453 |     
2454 |     <h5>Returns:</h5>
2455 |     
2456 |             
2457 | <div class="param-desc">
2458 |     <ul>
2459 | <li>new instance with the interpolated result</li>
2460 | </ul>
2461 | </div>
2462 | 
2463 | 
2464 | 
2465 | <dl>
2466 | 	<dt>
2467 | 		Type
2468 | 	</dt>
2469 | 	<dd>
2470 | 		
2471 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
2472 | 
2473 | 
2474 | 	</dd>
2475 | </dl>
2476 | 
2477 | 
2478 |         
2479 |     
2480 |     
2481 | </dd>
2482 | 
2483 |         
2484 |             
2485 | <dt>
2486 |     <h4 class="name" id="inverse"><span class="type-signature"></span>inverse<span class="signature">()</span><span class="type-signature"> &rarr; {<a href="Matrix.html">Matrix</a>}</span></h4>
2487 |     
2488 |     
2489 | </dt>
2490 | <dd>
2491 |     
2492 |     
2493 |     <div class="description">
2494 |         <p>Get an inverse matrix of current matrix. The method returns a new
2495 | matrix with values you need to use to get to an identity matrix.
2496 | Context from parent matrix is not applied to the returned matrix.</p>
2497 |     </div>
2498 |     
2499 | 
2500 |     
2501 |     
2502 |     
2503 |     
2504 |     
2505 |     
2506 |     
2507 | <dl class="details">
2508 | 	
2509 | 
2510 | 	
2511 | 
2512 | 	
2513 | 
2514 | 	
2515 | 
2516 | 	
2517 | 
2518 | 	
2519 | 
2520 | 	
2521 | 
2522 | 	
2523 | 
2524 | 	
2525 | 
2526 | 
2527 | 
2528 | 	
2529 | 
2530 | 	
2531 | 
2532 | 	
2533 | 
2534 | 	
2535 | </dl>
2536 | 
2537 |     
2538 |     
2539 | 
2540 |     
2541 | 
2542 |     
2543 |     
2544 |     
2545 |     
2546 |     
2547 |     <h5>Returns:</h5>
2548 |     
2549 |             
2550 | 
2551 | 
2552 | <dl>
2553 | 	<dt>
2554 | 		Type
2555 | 	</dt>
2556 | 	<dd>
2557 | 		
2558 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
2559 | 
2560 | 
2561 | 	</dd>
2562 | </dl>
2563 | 
2564 | 
2565 |         
2566 |     
2567 |     
2568 | </dd>
2569 | 
2570 |         
2571 |             
2572 | <dt>
2573 |     <h4 class="name" id="isEqual"><span class="type-signature"></span>isEqual<span class="signature">(m)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
2574 |     
2575 |     
2576 | </dt>
2577 | <dd>
2578 |     
2579 |     
2580 |     <div class="description">
2581 |         <p>Compares current matrix with another matrix. Returns true if equal
2582 | (within epsilon tolerance).</p>
2583 |     </div>
2584 |     
2585 | 
2586 |     
2587 |     
2588 |     
2589 |     
2590 |     
2591 |         <h5>Parameters:</h5>
2592 |         
2593 | 
2594 | <table class="params table table-striped">
2595 |     <thead>
2596 | 	<tr>
2597 | 		
2598 | 		<th>Name</th>
2599 | 		
2600 | 
2601 | 		<th>Type</th>
2602 | 
2603 | 		
2604 | 
2605 | 		
2606 | 
2607 | 		<th class="last">Description</th>
2608 | 	</tr>
2609 | 	</thead>
2610 | 
2611 | 	<tbody>
2612 | 	
2613 | 
2614 |         <tr>
2615 |             
2616 |                 <td class="name"><code>m</code></td>
2617 |             
2618 | 
2619 |             <td class="type">
2620 |             
2621 |                 
2622 | <span class="param-type"><a href="Matrix.html">Matrix</a></span>
2623 | 
2624 | 
2625 |             
2626 |             </td>
2627 | 
2628 |             
2629 | 
2630 |             
2631 | 
2632 |             <td class="description last"><p>matrix to compare this matrix with</p></td>
2633 |         </tr>
2634 | 
2635 | 	
2636 | 	</tbody>
2637 | </table>
2638 | 
2639 |     
2640 |     
2641 |     
2642 | <dl class="details">
2643 | 	
2644 | 
2645 | 	
2646 | 
2647 | 	
2648 | 
2649 | 	
2650 | 
2651 | 	
2652 | 
2653 | 	
2654 | 
2655 | 	
2656 | 
2657 | 	
2658 | 
2659 | 	
2660 | 
2661 | 
2662 | 
2663 | 	
2664 | 
2665 | 	
2666 | 
2667 | 	
2668 | 
2669 | 	
2670 | </dl>
2671 | 
2672 |     
2673 |     
2674 | 
2675 |     
2676 | 
2677 |     
2678 |     
2679 |     
2680 |     
2681 |     
2682 |     <h5>Returns:</h5>
2683 |     
2684 |             
2685 | 
2686 | 
2687 | <dl>
2688 | 	<dt>
2689 | 		Type
2690 | 	</dt>
2691 | 	<dd>
2692 | 		
2693 | <span class="param-type">boolean</span>
2694 | 
2695 | 
2696 | 	</dd>
2697 | </dl>
2698 | 
2699 | 
2700 |         
2701 |     
2702 |     
2703 | </dd>
2704 | 
2705 |         
2706 |             
2707 | <dt>
2708 |     <h4 class="name" id="isIdentity"><span class="type-signature"></span>isIdentity<span class="signature">()</span><span class="type-signature"> &rarr; {boolean}</span></h4>
2709 |     
2710 |     
2711 | </dt>
2712 | <dd>
2713 |     
2714 |     
2715 |     <div class="description">
2716 |         <p>Returns true if matrix is an identity matrix (no transforms applied).</p>
2717 |     </div>
2718 |     
2719 | 
2720 |     
2721 |     
2722 |     
2723 |     
2724 |     
2725 |     
2726 |     
2727 | <dl class="details">
2728 | 	
2729 | 
2730 | 	
2731 | 
2732 | 	
2733 | 
2734 | 	
2735 | 
2736 | 	
2737 | 
2738 | 	
2739 | 
2740 | 	
2741 | 
2742 | 	
2743 | 
2744 | 	
2745 | 
2746 | 
2747 | 
2748 | 	
2749 | 
2750 | 	
2751 | 
2752 | 	
2753 | 
2754 | 	
2755 | </dl>
2756 | 
2757 |     
2758 |     
2759 | 
2760 |     
2761 | 
2762 |     
2763 |     
2764 |     
2765 |     
2766 |     
2767 |     <h5>Returns:</h5>
2768 |     
2769 |             
2770 | <div class="param-desc">
2771 |     <p>True if identity (not transformed)</p>
2772 | </div>
2773 | 
2774 | 
2775 | 
2776 | <dl>
2777 | 	<dt>
2778 | 		Type
2779 | 	</dt>
2780 | 	<dd>
2781 | 		
2782 | <span class="param-type">boolean</span>
2783 | 
2784 | 
2785 | 	</dd>
2786 | </dl>
2787 | 
2788 | 
2789 |         
2790 |     
2791 |     
2792 | </dd>
2793 | 
2794 |         
2795 |             
2796 | <dt>
2797 |     <h4 class="name" id="isInvertible"><span class="type-signature"></span>isInvertible<span class="signature">()</span><span class="type-signature"> &rarr; {boolean}</span></h4>
2798 |     
2799 |     
2800 | </dt>
2801 | <dd>
2802 |     
2803 |     
2804 |     <div class="description">
2805 |         <p>Returns true if matrix is invertible</p>
2806 |     </div>
2807 |     
2808 | 
2809 |     
2810 |     
2811 |     
2812 |     
2813 |     
2814 |     
2815 |     
2816 | <dl class="details">
2817 | 	
2818 | 
2819 | 	
2820 | 
2821 | 	
2822 | 
2823 | 	
2824 | 
2825 | 	
2826 | 
2827 | 	
2828 | 
2829 | 	
2830 | 
2831 | 	
2832 | 
2833 | 	
2834 | 
2835 | 
2836 | 
2837 | 	
2838 | 
2839 | 	
2840 | 
2841 | 	
2842 | 
2843 | 	
2844 | </dl>
2845 | 
2846 |     
2847 |     
2848 | 
2849 |     
2850 | 
2851 |     
2852 |     
2853 |     
2854 |     
2855 |     
2856 |     <h5>Returns:</h5>
2857 |     
2858 |             
2859 | 
2860 | 
2861 | <dl>
2862 | 	<dt>
2863 | 		Type
2864 | 	</dt>
2865 | 	<dd>
2866 | 		
2867 | <span class="param-type">boolean</span>
2868 | 
2869 | 
2870 | 	</dd>
2871 | </dl>
2872 | 
2873 | 
2874 |         
2875 |     
2876 |     
2877 | </dd>
2878 | 
2879 |         
2880 |             
2881 | <dt>
2882 |     <h4 class="name" id="isValid"><span class="type-signature"></span>isValid<span class="signature">()</span><span class="type-signature"></span></h4>
2883 |     
2884 |     
2885 | </dt>
2886 | <dd>
2887 |     
2888 |     
2889 |     <div class="description">
2890 |         <p>Test if matrix is valid.</p>
2891 |     </div>
2892 |     
2893 | 
2894 |     
2895 |     
2896 |     
2897 |     
2898 |     
2899 |     
2900 |     
2901 | <dl class="details">
2902 | 	
2903 | 
2904 | 	
2905 | 
2906 | 	
2907 | 
2908 | 	
2909 | 
2910 | 	
2911 | 
2912 | 	
2913 | 
2914 | 	
2915 | 
2916 | 	
2917 | 
2918 | 	
2919 | 
2920 | 
2921 | 
2922 | 	
2923 | 
2924 | 	
2925 | 
2926 | 	
2927 | 
2928 | 	
2929 | </dl>
2930 | 
2931 |     
2932 |     
2933 | 
2934 |     
2935 | 
2936 |     
2937 |     
2938 |     
2939 |     
2940 |     
2941 |     
2942 |     
2943 | </dd>
2944 | 
2945 |         
2946 |             
2947 | <dt>
2948 |     <h4 class="name" id="reflectVector"><span class="type-signature"></span>reflectVector<span class="signature">(x, y)</span><span class="type-signature"> &rarr; {Object}</span></h4>
2949 |     
2950 |     
2951 | </dt>
2952 | <dd>
2953 |     
2954 |     
2955 |     <div class="description">
2956 |         <p>Reflects incoming (velocity) vector on the normal which will be the
2957 | current transformed x axis. Call when a trigger condition is met.</p>
2958 | <p>NOTE: BETA, simple implementation</p>
2959 |     </div>
2960 |     
2961 | 
2962 |     
2963 |     
2964 |     
2965 |     
2966 |     
2967 |         <h5>Parameters:</h5>
2968 |         
2969 | 
2970 | <table class="params table table-striped">
2971 |     <thead>
2972 | 	<tr>
2973 | 		
2974 | 		<th>Name</th>
2975 | 		
2976 | 
2977 | 		<th>Type</th>
2978 | 
2979 | 		
2980 | 
2981 | 		
2982 | 
2983 | 		<th class="last">Description</th>
2984 | 	</tr>
2985 | 	</thead>
2986 | 
2987 | 	<tbody>
2988 | 	
2989 | 
2990 |         <tr>
2991 |             
2992 |                 <td class="name"><code>x</code></td>
2993 |             
2994 | 
2995 |             <td class="type">
2996 |             
2997 |                 
2998 | <span class="param-type">number</span>
2999 | 
3000 | 
3001 |             
3002 |             </td>
3003 | 
3004 |             
3005 | 
3006 |             
3007 | 
3008 |             <td class="description last"><p>vector end point for x (start = 0)</p></td>
3009 |         </tr>
3010 | 
3011 | 	
3012 | 
3013 |         <tr>
3014 |             
3015 |                 <td class="name"><code>y</code></td>
3016 |             
3017 | 
3018 |             <td class="type">
3019 |             
3020 |                 
3021 | <span class="param-type">number</span>
3022 | 
3023 | 
3024 |             
3025 |             </td>
3026 | 
3027 |             
3028 | 
3029 |             
3030 | 
3031 |             <td class="description last"><p>vector end point for y (start = 0)</p></td>
3032 |         </tr>
3033 | 
3034 | 	
3035 | 	</tbody>
3036 | </table>
3037 | 
3038 |     
3039 |     
3040 |     
3041 | <dl class="details">
3042 | 	
3043 | 
3044 | 	
3045 | 
3046 | 	
3047 | 
3048 | 	
3049 | 
3050 | 	
3051 | 
3052 | 	
3053 | 
3054 | 	
3055 | 
3056 | 	
3057 | 
3058 | 	
3059 | 
3060 | 
3061 | 
3062 | 	
3063 | 
3064 | 	
3065 | 
3066 | 	
3067 | 
3068 | 	
3069 | </dl>
3070 | 
3071 |     
3072 |     
3073 | 
3074 |     
3075 | 
3076 |     
3077 |     
3078 |     
3079 |     
3080 |     
3081 |     <h5>Returns:</h5>
3082 |     
3083 |             
3084 | 
3085 | 
3086 | <dl>
3087 | 	<dt>
3088 | 		Type
3089 | 	</dt>
3090 | 	<dd>
3091 | 		
3092 | <span class="param-type">Object</span>
3093 | 
3094 | 
3095 | 	</dd>
3096 | </dl>
3097 | 
3098 | 
3099 |         
3100 |     
3101 |     
3102 | </dd>
3103 | 
3104 |         
3105 |             
3106 | <dt>
3107 |     <h4 class="name" id="reset"><span class="type-signature"></span>reset<span class="signature">()</span><span class="type-signature"></span></h4>
3108 |     
3109 |     
3110 | </dt>
3111 | <dd>
3112 |     
3113 |     
3114 |     <div class="description">
3115 |         <p>Short-hand to reset current matrix to an identity matrix.</p>
3116 |     </div>
3117 |     
3118 | 
3119 |     
3120 |     
3121 |     
3122 |     
3123 |     
3124 |     
3125 |     
3126 | <dl class="details">
3127 | 	
3128 | 
3129 | 	
3130 | 
3131 | 	
3132 | 
3133 | 	
3134 | 
3135 | 	
3136 | 
3137 | 	
3138 | 
3139 | 	
3140 | 
3141 | 	
3142 | 
3143 | 	
3144 | 
3145 | 
3146 | 
3147 | 	
3148 | 
3149 | 	
3150 | 
3151 | 	
3152 | 
3153 | 	
3154 | </dl>
3155 | 
3156 |     
3157 |     
3158 | 
3159 |     
3160 | 
3161 |     
3162 |     
3163 |     
3164 |     
3165 |     
3166 |     
3167 |     
3168 | </dd>
3169 | 
3170 |         
3171 |             
3172 | <dt>
3173 |     <h4 class="name" id="rotate"><span class="type-signature"></span>rotate<span class="signature">(angle)</span><span class="type-signature"></span></h4>
3174 |     
3175 |     
3176 | </dt>
3177 | <dd>
3178 |     
3179 |     
3180 |     <div class="description">
3181 |         <p>Rotates current matrix accumulative by angle.</p>
3182 |     </div>
3183 |     
3184 | 
3185 |     
3186 |     
3187 |     
3188 |     
3189 |     
3190 |         <h5>Parameters:</h5>
3191 |         
3192 | 
3193 | <table class="params table table-striped">
3194 |     <thead>
3195 | 	<tr>
3196 | 		
3197 | 		<th>Name</th>
3198 | 		
3199 | 
3200 | 		<th>Type</th>
3201 | 
3202 | 		
3203 | 
3204 | 		
3205 | 
3206 | 		<th class="last">Description</th>
3207 | 	</tr>
3208 | 	</thead>
3209 | 
3210 | 	<tbody>
3211 | 	
3212 | 
3213 |         <tr>
3214 |             
3215 |                 <td class="name"><code>angle</code></td>
3216 |             
3217 | 
3218 |             <td class="type">
3219 |             
3220 |                 
3221 | <span class="param-type">number</span>
3222 | 
3223 | 
3224 |             
3225 |             </td>
3226 | 
3227 |             
3228 | 
3229 |             
3230 | 
3231 |             <td class="description last"><p>angle in radians</p></td>
3232 |         </tr>
3233 | 
3234 | 	
3235 | 	</tbody>
3236 | </table>
3237 | 
3238 |     
3239 |     
3240 |     
3241 | <dl class="details">
3242 | 	
3243 | 
3244 | 	
3245 | 
3246 | 	
3247 | 
3248 | 	
3249 | 
3250 | 	
3251 | 
3252 | 	
3253 | 
3254 | 	
3255 | 
3256 | 	
3257 | 
3258 | 	
3259 | 
3260 | 
3261 | 
3262 | 	
3263 | 
3264 | 	
3265 | 
3266 | 	
3267 | 
3268 | 	
3269 | </dl>
3270 | 
3271 |     
3272 |     
3273 | 
3274 |     
3275 | 
3276 |     
3277 |     
3278 |     
3279 |     
3280 |     
3281 |     
3282 |     
3283 | </dd>
3284 | 
3285 |         
3286 |             
3287 | <dt>
3288 |     <h4 class="name" id="rotateDeg"><span class="type-signature"></span>rotateDeg<span class="signature">(angle)</span><span class="type-signature"></span></h4>
3289 |     
3290 |     
3291 | </dt>
3292 | <dd>
3293 |     
3294 |     
3295 |     <div class="description">
3296 |         <p>Helper method to make a rotation based on an angle in degrees.</p>
3297 |     </div>
3298 |     
3299 | 
3300 |     
3301 |     
3302 |     
3303 |     
3304 |     
3305 |         <h5>Parameters:</h5>
3306 |         
3307 | 
3308 | <table class="params table table-striped">
3309 |     <thead>
3310 | 	<tr>
3311 | 		
3312 | 		<th>Name</th>
3313 | 		
3314 | 
3315 | 		<th>Type</th>
3316 | 
3317 | 		
3318 | 
3319 | 		
3320 | 
3321 | 		<th class="last">Description</th>
3322 | 	</tr>
3323 | 	</thead>
3324 | 
3325 | 	<tbody>
3326 | 	
3327 | 
3328 |         <tr>
3329 |             
3330 |                 <td class="name"><code>angle</code></td>
3331 |             
3332 | 
3333 |             <td class="type">
3334 |             
3335 |                 
3336 | <span class="param-type">number</span>
3337 | 
3338 | 
3339 |             
3340 |             </td>
3341 | 
3342 |             
3343 | 
3344 |             
3345 | 
3346 |             <td class="description last"><p>angle in degrees</p></td>
3347 |         </tr>
3348 | 
3349 | 	
3350 | 	</tbody>
3351 | </table>
3352 | 
3353 |     
3354 |     
3355 |     
3356 | <dl class="details">
3357 | 	
3358 | 
3359 | 	
3360 | 
3361 | 	
3362 | 
3363 | 	
3364 | 
3365 | 	
3366 | 
3367 | 	
3368 | 
3369 | 	
3370 | 
3371 | 	
3372 | 
3373 | 	
3374 | 
3375 | 
3376 | 
3377 | 	
3378 | 
3379 | 	
3380 | 
3381 | 	
3382 | 
3383 | 	
3384 | </dl>
3385 | 
3386 |     
3387 |     
3388 | 
3389 |     
3390 | 
3391 |     
3392 |     
3393 |     
3394 |     
3395 |     
3396 |     
3397 |     
3398 | </dd>
3399 | 
3400 |         
3401 |             
3402 | <dt>
3403 |     <h4 class="name" id="rotateFromVector"><span class="type-signature"></span>rotateFromVector<span class="signature">(x, y)</span><span class="type-signature"> &rarr; {*}</span></h4>
3404 |     
3405 |     
3406 | </dt>
3407 | <dd>
3408 |     
3409 |     
3410 |     <div class="description">
3411 |         <p>Converts a vector given as x and y to angle, and
3412 | rotates (accumulative).</p>
3413 |     </div>
3414 |     
3415 | 
3416 |     
3417 |     
3418 |     
3419 |     
3420 |     
3421 |         <h5>Parameters:</h5>
3422 |         
3423 | 
3424 | <table class="params table table-striped">
3425 |     <thead>
3426 | 	<tr>
3427 | 		
3428 | 		<th>Name</th>
3429 | 		
3430 | 
3431 | 		<th>Type</th>
3432 | 
3433 | 		
3434 | 
3435 | 		
3436 | 
3437 | 		<th class="last">Description</th>
3438 | 	</tr>
3439 | 	</thead>
3440 | 
3441 | 	<tbody>
3442 | 	
3443 | 
3444 |         <tr>
3445 |             
3446 |                 <td class="name"><code>x</code></td>
3447 |             
3448 | 
3449 |             <td class="type">
3450 |             
3451 |             </td>
3452 | 
3453 |             
3454 | 
3455 |             
3456 | 
3457 |             <td class="description last"></td>
3458 |         </tr>
3459 | 
3460 | 	
3461 | 
3462 |         <tr>
3463 |             
3464 |                 <td class="name"><code>y</code></td>
3465 |             
3466 | 
3467 |             <td class="type">
3468 |             
3469 |             </td>
3470 | 
3471 |             
3472 | 
3473 |             
3474 | 
3475 |             <td class="description last"></td>
3476 |         </tr>
3477 | 
3478 | 	
3479 | 	</tbody>
3480 | </table>
3481 | 
3482 |     
3483 |     
3484 |     
3485 | <dl class="details">
3486 | 	
3487 | 
3488 | 	
3489 | 
3490 | 	
3491 | 
3492 | 	
3493 | 
3494 | 	
3495 | 
3496 | 	
3497 | 
3498 | 	
3499 | 
3500 | 	
3501 | 
3502 | 	
3503 | 
3504 | 
3505 | 
3506 | 	
3507 | 
3508 | 	
3509 | 
3510 | 	
3511 | 
3512 | 	
3513 | </dl>
3514 | 
3515 |     
3516 |     
3517 | 
3518 |     
3519 | 
3520 |     
3521 |     
3522 |     
3523 |     
3524 |     
3525 |     <h5>Returns:</h5>
3526 |     
3527 |             
3528 | 
3529 | 
3530 | <dl>
3531 | 	<dt>
3532 | 		Type
3533 | 	</dt>
3534 | 	<dd>
3535 | 		
3536 | <span class="param-type">*</span>
3537 | 
3538 | 
3539 | 	</dd>
3540 | </dl>
3541 | 
3542 | 
3543 |         
3544 |     
3545 |     
3546 | </dd>
3547 | 
3548 |         
3549 |             
3550 | <dt>
3551 |     <h4 class="name" id="scale"><span class="type-signature"></span>scale<span class="signature">(sx, sy)</span><span class="type-signature"></span></h4>
3552 |     
3553 |     
3554 | </dt>
3555 | <dd>
3556 |     
3557 |     
3558 |     <div class="description">
3559 |         <p>Scales current matrix accumulative.</p>
3560 |     </div>
3561 |     
3562 | 
3563 |     
3564 |     
3565 |     
3566 |     
3567 |     
3568 |         <h5>Parameters:</h5>
3569 |         
3570 | 
3571 | <table class="params table table-striped">
3572 |     <thead>
3573 | 	<tr>
3574 | 		
3575 | 		<th>Name</th>
3576 | 		
3577 | 
3578 | 		<th>Type</th>
3579 | 
3580 | 		
3581 | 
3582 | 		
3583 | 
3584 | 		<th class="last">Description</th>
3585 | 	</tr>
3586 | 	</thead>
3587 | 
3588 | 	<tbody>
3589 | 	
3590 | 
3591 |         <tr>
3592 |             
3593 |                 <td class="name"><code>sx</code></td>
3594 |             
3595 | 
3596 |             <td class="type">
3597 |             
3598 |                 
3599 | <span class="param-type">number</span>
3600 | 
3601 | 
3602 |             
3603 |             </td>
3604 | 
3605 |             
3606 | 
3607 |             
3608 | 
3609 |             <td class="description last"><p>scale factor x (1 does nothing)</p></td>
3610 |         </tr>
3611 | 
3612 | 	
3613 | 
3614 |         <tr>
3615 |             
3616 |                 <td class="name"><code>sy</code></td>
3617 |             
3618 | 
3619 |             <td class="type">
3620 |             
3621 |                 
3622 | <span class="param-type">number</span>
3623 | 
3624 | 
3625 |             
3626 |             </td>
3627 | 
3628 |             
3629 | 
3630 |             
3631 | 
3632 |             <td class="description last"><p>scale factor y (1 does nothing)</p></td>
3633 |         </tr>
3634 | 
3635 | 	
3636 | 	</tbody>
3637 | </table>
3638 | 
3639 |     
3640 |     
3641 |     
3642 | <dl class="details">
3643 | 	
3644 | 
3645 | 	
3646 | 
3647 | 	
3648 | 
3649 | 	
3650 | 
3651 | 	
3652 | 
3653 | 	
3654 | 
3655 | 	
3656 | 
3657 | 	
3658 | 
3659 | 	
3660 | 
3661 | 
3662 | 
3663 | 	
3664 | 
3665 | 	
3666 | 
3667 | 	
3668 | 
3669 | 	
3670 | </dl>
3671 | 
3672 |     
3673 |     
3674 | 
3675 |     
3676 | 
3677 |     
3678 |     
3679 |     
3680 |     
3681 |     
3682 |     
3683 |     
3684 | </dd>
3685 | 
3686 |         
3687 |             
3688 | <dt>
3689 |     <h4 class="name" id="scaleU"><span class="type-signature"></span>scaleU<span class="signature">(f)</span><span class="type-signature"></span></h4>
3690 |     
3691 |     
3692 | </dt>
3693 | <dd>
3694 |     
3695 |     
3696 |     <div class="description">
3697 |         <p>Scales current matrix uniformly and accumulative.</p>
3698 |     </div>
3699 |     
3700 | 
3701 |     
3702 |     
3703 |     
3704 |     
3705 |     
3706 |         <h5>Parameters:</h5>
3707 |         
3708 | 
3709 | <table class="params table table-striped">
3710 |     <thead>
3711 | 	<tr>
3712 | 		
3713 | 		<th>Name</th>
3714 | 		
3715 | 
3716 | 		<th>Type</th>
3717 | 
3718 | 		
3719 | 
3720 | 		
3721 | 
3722 | 		<th class="last">Description</th>
3723 | 	</tr>
3724 | 	</thead>
3725 | 
3726 | 	<tbody>
3727 | 	
3728 | 
3729 |         <tr>
3730 |             
3731 |                 <td class="name"><code>f</code></td>
3732 |             
3733 | 
3734 |             <td class="type">
3735 |             
3736 |                 
3737 | <span class="param-type">number</span>
3738 | 
3739 | 
3740 |             
3741 |             </td>
3742 | 
3743 |             
3744 | 
3745 |             
3746 | 
3747 |             <td class="description last"><p>scale factor for both x and y (1 does nothing)</p></td>
3748 |         </tr>
3749 | 
3750 | 	
3751 | 	</tbody>
3752 | </table>
3753 | 
3754 |     
3755 |     
3756 |     
3757 | <dl class="details">
3758 | 	
3759 | 
3760 | 	
3761 | 
3762 | 	
3763 | 
3764 | 	
3765 | 
3766 | 	
3767 | 
3768 | 	
3769 | 
3770 | 	
3771 | 
3772 | 	
3773 | 
3774 | 	
3775 | 
3776 | 
3777 | 
3778 | 	
3779 | 
3780 | 	
3781 | 
3782 | 	
3783 | 
3784 | 	
3785 | </dl>
3786 | 
3787 |     
3788 |     
3789 | 
3790 |     
3791 | 
3792 |     
3793 |     
3794 |     
3795 |     
3796 |     
3797 |     
3798 |     
3799 | </dd>
3800 | 
3801 |         
3802 |             
3803 | <dt>
3804 |     <h4 class="name" id="scaleX"><span class="type-signature"></span>scaleX<span class="signature">(sx)</span><span class="type-signature"></span></h4>
3805 |     
3806 |     
3807 | </dt>
3808 | <dd>
3809 |     
3810 |     
3811 |     <div class="description">
3812 |         <p>Scales current matrix on x axis accumulative.</p>
3813 |     </div>
3814 |     
3815 | 
3816 |     
3817 |     
3818 |     
3819 |     
3820 |     
3821 |         <h5>Parameters:</h5>
3822 |         
3823 | 
3824 | <table class="params table table-striped">
3825 |     <thead>
3826 | 	<tr>
3827 | 		
3828 | 		<th>Name</th>
3829 | 		
3830 | 
3831 | 		<th>Type</th>
3832 | 
3833 | 		
3834 | 
3835 | 		
3836 | 
3837 | 		<th class="last">Description</th>
3838 | 	</tr>
3839 | 	</thead>
3840 | 
3841 | 	<tbody>
3842 | 	
3843 | 
3844 |         <tr>
3845 |             
3846 |                 <td class="name"><code>sx</code></td>
3847 |             
3848 | 
3849 |             <td class="type">
3850 |             
3851 |                 
3852 | <span class="param-type">number</span>
3853 | 
3854 | 
3855 |             
3856 |             </td>
3857 | 
3858 |             
3859 | 
3860 |             
3861 | 
3862 |             <td class="description last"><p>scale factor x (1 does nothing)</p></td>
3863 |         </tr>
3864 | 
3865 | 	
3866 | 	</tbody>
3867 | </table>
3868 | 
3869 |     
3870 |     
3871 |     
3872 | <dl class="details">
3873 | 	
3874 | 
3875 | 	
3876 | 
3877 | 	
3878 | 
3879 | 	
3880 | 
3881 | 	
3882 | 
3883 | 	
3884 | 
3885 | 	
3886 | 
3887 | 	
3888 | 
3889 | 	
3890 | 
3891 | 
3892 | 
3893 | 	
3894 | 
3895 | 	
3896 | 
3897 | 	
3898 | 
3899 | 	
3900 | </dl>
3901 | 
3902 |     
3903 |     
3904 | 
3905 |     
3906 | 
3907 |     
3908 |     
3909 |     
3910 |     
3911 |     
3912 |     
3913 |     
3914 | </dd>
3915 | 
3916 |         
3917 |             
3918 | <dt>
3919 |     <h4 class="name" id="scaleY"><span class="type-signature"></span>scaleY<span class="signature">(sy)</span><span class="type-signature"></span></h4>
3920 |     
3921 |     
3922 | </dt>
3923 | <dd>
3924 |     
3925 |     
3926 |     <div class="description">
3927 |         <p>Scales current matrix on y axis accumulative.</p>
3928 |     </div>
3929 |     
3930 | 
3931 |     
3932 |     
3933 |     
3934 |     
3935 |     
3936 |         <h5>Parameters:</h5>
3937 |         
3938 | 
3939 | <table class="params table table-striped">
3940 |     <thead>
3941 | 	<tr>
3942 | 		
3943 | 		<th>Name</th>
3944 | 		
3945 | 
3946 | 		<th>Type</th>
3947 | 
3948 | 		
3949 | 
3950 | 		
3951 | 
3952 | 		<th class="last">Description</th>
3953 | 	</tr>
3954 | 	</thead>
3955 | 
3956 | 	<tbody>
3957 | 	
3958 | 
3959 |         <tr>
3960 |             
3961 |                 <td class="name"><code>sy</code></td>
3962 |             
3963 | 
3964 |             <td class="type">
3965 |             
3966 |                 
3967 | <span class="param-type">number</span>
3968 | 
3969 | 
3970 |             
3971 |             </td>
3972 | 
3973 |             
3974 | 
3975 |             
3976 | 
3977 |             <td class="description last"><p>scale factor y (1 does nothing)</p></td>
3978 |         </tr>
3979 | 
3980 | 	
3981 | 	</tbody>
3982 | </table>
3983 | 
3984 |     
3985 |     
3986 |     
3987 | <dl class="details">
3988 | 	
3989 | 
3990 | 	
3991 | 
3992 | 	
3993 | 
3994 | 	
3995 | 
3996 | 	
3997 | 
3998 | 	
3999 | 
4000 | 	
4001 | 
4002 | 	
4003 | 
4004 | 	
4005 | 
4006 | 
4007 | 
4008 | 	
4009 | 
4010 | 	
4011 | 
4012 | 	
4013 | 
4014 | 	
4015 | </dl>
4016 | 
4017 |     
4018 |     
4019 | 
4020 |     
4021 | 
4022 |     
4023 |     
4024 |     
4025 |     
4026 |     
4027 |     
4028 |     
4029 | </dd>
4030 | 
4031 |         
4032 |             
4033 | <dt>
4034 |     <h4 class="name" id="setTransform"><span class="type-signature"></span>setTransform<span class="signature">(a, b, c, d, e, f)</span><span class="type-signature"></span></h4>
4035 |     
4036 |     
4037 | </dt>
4038 | <dd>
4039 |     
4040 |     
4041 |     <div class="description">
4042 |         <p>Set current matrix to new absolute matrix.</p>
4043 |     </div>
4044 |     
4045 | 
4046 |     
4047 |     
4048 |     
4049 |     
4050 |     
4051 |         <h5>Parameters:</h5>
4052 |         
4053 | 
4054 | <table class="params table table-striped">
4055 |     <thead>
4056 | 	<tr>
4057 | 		
4058 | 		<th>Name</th>
4059 | 		
4060 | 
4061 | 		<th>Type</th>
4062 | 
4063 | 		
4064 | 
4065 | 		
4066 | 
4067 | 		<th class="last">Description</th>
4068 | 	</tr>
4069 | 	</thead>
4070 | 
4071 | 	<tbody>
4072 | 	
4073 | 
4074 |         <tr>
4075 |             
4076 |                 <td class="name"><code>a</code></td>
4077 |             
4078 | 
4079 |             <td class="type">
4080 |             
4081 |                 
4082 | <span class="param-type">number</span>
4083 | 
4084 | 
4085 |             
4086 |             </td>
4087 | 
4088 |             
4089 | 
4090 |             
4091 | 
4092 |             <td class="description last"><p>scale x</p></td>
4093 |         </tr>
4094 | 
4095 | 	
4096 | 
4097 |         <tr>
4098 |             
4099 |                 <td class="name"><code>b</code></td>
4100 |             
4101 | 
4102 |             <td class="type">
4103 |             
4104 |                 
4105 | <span class="param-type">number</span>
4106 | 
4107 | 
4108 |             
4109 |             </td>
4110 | 
4111 |             
4112 | 
4113 |             
4114 | 
4115 |             <td class="description last"><p>shear y</p></td>
4116 |         </tr>
4117 | 
4118 | 	
4119 | 
4120 |         <tr>
4121 |             
4122 |                 <td class="name"><code>c</code></td>
4123 |             
4124 | 
4125 |             <td class="type">
4126 |             
4127 |                 
4128 | <span class="param-type">number</span>
4129 | 
4130 | 
4131 |             
4132 |             </td>
4133 | 
4134 |             
4135 | 
4136 |             
4137 | 
4138 |             <td class="description last"><p>shear x</p></td>
4139 |         </tr>
4140 | 
4141 | 	
4142 | 
4143 |         <tr>
4144 |             
4145 |                 <td class="name"><code>d</code></td>
4146 |             
4147 | 
4148 |             <td class="type">
4149 |             
4150 |                 
4151 | <span class="param-type">number</span>
4152 | 
4153 | 
4154 |             
4155 |             </td>
4156 | 
4157 |             
4158 | 
4159 |             
4160 | 
4161 |             <td class="description last"><p>scale y</p></td>
4162 |         </tr>
4163 | 
4164 | 	
4165 | 
4166 |         <tr>
4167 |             
4168 |                 <td class="name"><code>e</code></td>
4169 |             
4170 | 
4171 |             <td class="type">
4172 |             
4173 |                 
4174 | <span class="param-type">number</span>
4175 | 
4176 | 
4177 |             
4178 |             </td>
4179 | 
4180 |             
4181 | 
4182 |             
4183 | 
4184 |             <td class="description last"><p>translate x</p></td>
4185 |         </tr>
4186 | 
4187 | 	
4188 | 
4189 |         <tr>
4190 |             
4191 |                 <td class="name"><code>f</code></td>
4192 |             
4193 | 
4194 |             <td class="type">
4195 |             
4196 |                 
4197 | <span class="param-type">number</span>
4198 | 
4199 | 
4200 |             
4201 |             </td>
4202 | 
4203 |             
4204 | 
4205 |             
4206 | 
4207 |             <td class="description last"><p>translate y</p></td>
4208 |         </tr>
4209 | 
4210 | 	
4211 | 	</tbody>
4212 | </table>
4213 | 
4214 |     
4215 |     
4216 |     
4217 | <dl class="details">
4218 | 	
4219 | 
4220 | 	
4221 | 
4222 | 	
4223 | 
4224 | 	
4225 | 
4226 | 	
4227 | 
4228 | 	
4229 | 
4230 | 	
4231 | 
4232 | 	
4233 | 
4234 | 	
4235 | 
4236 | 
4237 | 
4238 | 	
4239 | 
4240 | 	
4241 | 
4242 | 	
4243 | 
4244 | 	
4245 | </dl>
4246 | 
4247 |     
4248 |     
4249 | 
4250 |     
4251 | 
4252 |     
4253 |     
4254 |     
4255 |     
4256 |     
4257 |     
4258 |     
4259 | </dd>
4260 | 
4261 |         
4262 |             
4263 | <dt>
4264 |     <h4 class="name" id="shear"><span class="type-signature"></span>shear<span class="signature">(sx, sy)</span><span class="type-signature"></span></h4>
4265 |     
4266 |     
4267 | </dt>
4268 | <dd>
4269 |     
4270 |     
4271 |     <div class="description">
4272 |         <p>Apply shear to the current matrix accumulative.</p>
4273 |     </div>
4274 |     
4275 | 
4276 |     
4277 |     
4278 |     
4279 |     
4280 |     
4281 |         <h5>Parameters:</h5>
4282 |         
4283 | 
4284 | <table class="params table table-striped">
4285 |     <thead>
4286 | 	<tr>
4287 | 		
4288 | 		<th>Name</th>
4289 | 		
4290 | 
4291 | 		<th>Type</th>
4292 | 
4293 | 		
4294 | 
4295 | 		
4296 | 
4297 | 		<th class="last">Description</th>
4298 | 	</tr>
4299 | 	</thead>
4300 | 
4301 | 	<tbody>
4302 | 	
4303 | 
4304 |         <tr>
4305 |             
4306 |                 <td class="name"><code>sx</code></td>
4307 |             
4308 | 
4309 |             <td class="type">
4310 |             
4311 |                 
4312 | <span class="param-type">number</span>
4313 | 
4314 | 
4315 |             
4316 |             </td>
4317 | 
4318 |             
4319 | 
4320 |             
4321 | 
4322 |             <td class="description last"><p>amount of shear for x</p></td>
4323 |         </tr>
4324 | 
4325 | 	
4326 | 
4327 |         <tr>
4328 |             
4329 |                 <td class="name"><code>sy</code></td>
4330 |             
4331 | 
4332 |             <td class="type">
4333 |             
4334 |                 
4335 | <span class="param-type">number</span>
4336 | 
4337 | 
4338 |             
4339 |             </td>
4340 | 
4341 |             
4342 | 
4343 |             
4344 | 
4345 |             <td class="description last"><p>amount of shear for y</p></td>
4346 |         </tr>
4347 | 
4348 | 	
4349 | 	</tbody>
4350 | </table>
4351 | 
4352 |     
4353 |     
4354 |     
4355 | <dl class="details">
4356 | 	
4357 | 
4358 | 	
4359 | 
4360 | 	
4361 | 
4362 | 	
4363 | 
4364 | 	
4365 | 
4366 | 	
4367 | 
4368 | 	
4369 | 
4370 | 	
4371 | 
4372 | 	
4373 | 
4374 | 
4375 | 
4376 | 	
4377 | 
4378 | 	
4379 | 
4380 | 	
4381 | 
4382 | 	
4383 | </dl>
4384 | 
4385 |     
4386 |     
4387 | 
4388 |     
4389 | 
4390 |     
4391 |     
4392 |     
4393 |     
4394 |     
4395 |     
4396 |     
4397 | </dd>
4398 | 
4399 |         
4400 |             
4401 | <dt>
4402 |     <h4 class="name" id="shearX"><span class="type-signature"></span>shearX<span class="signature">(sx)</span><span class="type-signature"></span></h4>
4403 |     
4404 |     
4405 | </dt>
4406 | <dd>
4407 |     
4408 |     
4409 |     <div class="description">
4410 |         <p>Apply shear for x to the current matrix accumulative.</p>
4411 |     </div>
4412 |     
4413 | 
4414 |     
4415 |     
4416 |     
4417 |     
4418 |     
4419 |         <h5>Parameters:</h5>
4420 |         
4421 | 
4422 | <table class="params table table-striped">
4423 |     <thead>
4424 | 	<tr>
4425 | 		
4426 | 		<th>Name</th>
4427 | 		
4428 | 
4429 | 		<th>Type</th>
4430 | 
4431 | 		
4432 | 
4433 | 		
4434 | 
4435 | 		<th class="last">Description</th>
4436 | 	</tr>
4437 | 	</thead>
4438 | 
4439 | 	<tbody>
4440 | 	
4441 | 
4442 |         <tr>
4443 |             
4444 |                 <td class="name"><code>sx</code></td>
4445 |             
4446 | 
4447 |             <td class="type">
4448 |             
4449 |                 
4450 | <span class="param-type">number</span>
4451 | 
4452 | 
4453 |             
4454 |             </td>
4455 | 
4456 |             
4457 | 
4458 |             
4459 | 
4460 |             <td class="description last"><p>amount of shear for x</p></td>
4461 |         </tr>
4462 | 
4463 | 	
4464 | 	</tbody>
4465 | </table>
4466 | 
4467 |     
4468 |     
4469 |     
4470 | <dl class="details">
4471 | 	
4472 | 
4473 | 	
4474 | 
4475 | 	
4476 | 
4477 | 	
4478 | 
4479 | 	
4480 | 
4481 | 	
4482 | 
4483 | 	
4484 | 
4485 | 	
4486 | 
4487 | 	
4488 | 
4489 | 
4490 | 
4491 | 	
4492 | 
4493 | 	
4494 | 
4495 | 	
4496 | 
4497 | 	
4498 | </dl>
4499 | 
4500 |     
4501 |     
4502 | 
4503 |     
4504 | 
4505 |     
4506 |     
4507 |     
4508 |     
4509 |     
4510 |     
4511 |     
4512 | </dd>
4513 | 
4514 |         
4515 |             
4516 | <dt>
4517 |     <h4 class="name" id="shearY"><span class="type-signature"></span>shearY<span class="signature">(sy)</span><span class="type-signature"></span></h4>
4518 |     
4519 |     
4520 | </dt>
4521 | <dd>
4522 |     
4523 |     
4524 |     <div class="description">
4525 |         <p>Apply shear for y to the current matrix accumulative.</p>
4526 |     </div>
4527 |     
4528 | 
4529 |     
4530 |     
4531 |     
4532 |     
4533 |     
4534 |         <h5>Parameters:</h5>
4535 |         
4536 | 
4537 | <table class="params table table-striped">
4538 |     <thead>
4539 | 	<tr>
4540 | 		
4541 | 		<th>Name</th>
4542 | 		
4543 | 
4544 | 		<th>Type</th>
4545 | 
4546 | 		
4547 | 
4548 | 		
4549 | 
4550 | 		<th class="last">Description</th>
4551 | 	</tr>
4552 | 	</thead>
4553 | 
4554 | 	<tbody>
4555 | 	
4556 | 
4557 |         <tr>
4558 |             
4559 |                 <td class="name"><code>sy</code></td>
4560 |             
4561 | 
4562 |             <td class="type">
4563 |             
4564 |                 
4565 | <span class="param-type">number</span>
4566 | 
4567 | 
4568 |             
4569 |             </td>
4570 | 
4571 |             
4572 | 
4573 |             
4574 | 
4575 |             <td class="description last"><p>amount of shear for y</p></td>
4576 |         </tr>
4577 | 
4578 | 	
4579 | 	</tbody>
4580 | </table>
4581 | 
4582 |     
4583 |     
4584 |     
4585 | <dl class="details">
4586 | 	
4587 | 
4588 | 	
4589 | 
4590 | 	
4591 | 
4592 | 	
4593 | 
4594 | 	
4595 | 
4596 | 	
4597 | 
4598 | 	
4599 | 
4600 | 	
4601 | 
4602 | 	
4603 | 
4604 | 
4605 | 
4606 | 	
4607 | 
4608 | 	
4609 | 
4610 | 	
4611 | 
4612 | 	
4613 | </dl>
4614 | 
4615 |     
4616 |     
4617 | 
4618 |     
4619 | 
4620 |     
4621 |     
4622 |     
4623 |     
4624 |     
4625 |     
4626 |     
4627 | </dd>
4628 | 
4629 |         
4630 |             
4631 | <dt>
4632 |     <h4 class="name" id="skew"><span class="type-signature"></span>skew<span class="signature">(ax, ay)</span><span class="type-signature"></span></h4>
4633 |     
4634 |     
4635 | </dt>
4636 | <dd>
4637 |     
4638 |     
4639 |     <div class="description">
4640 |         <p>Apply skew to the current matrix accumulative.</p>
4641 |     </div>
4642 |     
4643 | 
4644 |     
4645 |     
4646 |     
4647 |     
4648 |     
4649 |         <h5>Parameters:</h5>
4650 |         
4651 | 
4652 | <table class="params table table-striped">
4653 |     <thead>
4654 | 	<tr>
4655 | 		
4656 | 		<th>Name</th>
4657 | 		
4658 | 
4659 | 		<th>Type</th>
4660 | 
4661 | 		
4662 | 
4663 | 		
4664 | 
4665 | 		<th class="last">Description</th>
4666 | 	</tr>
4667 | 	</thead>
4668 | 
4669 | 	<tbody>
4670 | 	
4671 | 
4672 |         <tr>
4673 |             
4674 |                 <td class="name"><code>ax</code></td>
4675 |             
4676 | 
4677 |             <td class="type">
4678 |             
4679 |                 
4680 | <span class="param-type">number</span>
4681 | 
4682 | 
4683 |             
4684 |             </td>
4685 | 
4686 |             
4687 | 
4688 |             
4689 | 
4690 |             <td class="description last"><p>angle of skew for x</p></td>
4691 |         </tr>
4692 | 
4693 | 	
4694 | 
4695 |         <tr>
4696 |             
4697 |                 <td class="name"><code>ay</code></td>
4698 |             
4699 | 
4700 |             <td class="type">
4701 |             
4702 |                 
4703 | <span class="param-type">number</span>
4704 | 
4705 | 
4706 |             
4707 |             </td>
4708 | 
4709 |             
4710 | 
4711 |             
4712 | 
4713 |             <td class="description last"><p>angle of skew for y</p></td>
4714 |         </tr>
4715 | 
4716 | 	
4717 | 	</tbody>
4718 | </table>
4719 | 
4720 |     
4721 |     
4722 |     
4723 | <dl class="details">
4724 | 	
4725 | 
4726 | 	
4727 | 
4728 | 	
4729 | 
4730 | 	
4731 | 
4732 | 	
4733 | 
4734 | 	
4735 | 
4736 | 	
4737 | 
4738 | 	
4739 | 
4740 | 	
4741 | 
4742 | 
4743 | 
4744 | 	
4745 | 
4746 | 	
4747 | 
4748 | 	
4749 | 
4750 | 	
4751 | </dl>
4752 | 
4753 |     
4754 |     
4755 | 
4756 |     
4757 | 
4758 |     
4759 |     
4760 |     
4761 |     
4762 |     
4763 |     
4764 |     
4765 | </dd>
4766 | 
4767 |         
4768 |             
4769 | <dt>
4770 |     <h4 class="name" id="skewX"><span class="type-signature"></span>skewX<span class="signature">(ax)</span><span class="type-signature"></span></h4>
4771 |     
4772 |     
4773 | </dt>
4774 | <dd>
4775 |     
4776 |     
4777 |     <div class="description">
4778 |         <p>Apply skew for x to the current matrix accumulative.</p>
4779 |     </div>
4780 |     
4781 | 
4782 |     
4783 |     
4784 |     
4785 |     
4786 |     
4787 |         <h5>Parameters:</h5>
4788 |         
4789 | 
4790 | <table class="params table table-striped">
4791 |     <thead>
4792 | 	<tr>
4793 | 		
4794 | 		<th>Name</th>
4795 | 		
4796 | 
4797 | 		<th>Type</th>
4798 | 
4799 | 		
4800 | 
4801 | 		
4802 | 
4803 | 		<th class="last">Description</th>
4804 | 	</tr>
4805 | 	</thead>
4806 | 
4807 | 	<tbody>
4808 | 	
4809 | 
4810 |         <tr>
4811 |             
4812 |                 <td class="name"><code>ax</code></td>
4813 |             
4814 | 
4815 |             <td class="type">
4816 |             
4817 |                 
4818 | <span class="param-type">number</span>
4819 | 
4820 | 
4821 |             
4822 |             </td>
4823 | 
4824 |             
4825 | 
4826 |             
4827 | 
4828 |             <td class="description last"><p>angle of skew for x</p></td>
4829 |         </tr>
4830 | 
4831 | 	
4832 | 	</tbody>
4833 | </table>
4834 | 
4835 |     
4836 |     
4837 |     
4838 | <dl class="details">
4839 | 	
4840 | 
4841 | 	
4842 | 
4843 | 	
4844 | 
4845 | 	
4846 | 
4847 | 	
4848 | 
4849 | 	
4850 | 
4851 | 	
4852 | 
4853 | 	
4854 | 
4855 | 	
4856 | 
4857 | 
4858 | 
4859 | 	
4860 | 
4861 | 	
4862 | 
4863 | 	
4864 | 
4865 | 	
4866 | </dl>
4867 | 
4868 |     
4869 |     
4870 | 
4871 |     
4872 | 
4873 |     
4874 |     
4875 |     
4876 |     
4877 |     
4878 |     
4879 |     
4880 | </dd>
4881 | 
4882 |         
4883 |             
4884 | <dt>
4885 |     <h4 class="name" id="skewY"><span class="type-signature"></span>skewY<span class="signature">(ay)</span><span class="type-signature"></span></h4>
4886 |     
4887 |     
4888 | </dt>
4889 | <dd>
4890 |     
4891 |     
4892 |     <div class="description">
4893 |         <p>Apply skew for y to the current matrix accumulative.</p>
4894 |     </div>
4895 |     
4896 | 
4897 |     
4898 |     
4899 |     
4900 |     
4901 |     
4902 |         <h5>Parameters:</h5>
4903 |         
4904 | 
4905 | <table class="params table table-striped">
4906 |     <thead>
4907 | 	<tr>
4908 | 		
4909 | 		<th>Name</th>
4910 | 		
4911 | 
4912 | 		<th>Type</th>
4913 | 
4914 | 		
4915 | 
4916 | 		
4917 | 
4918 | 		<th class="last">Description</th>
4919 | 	</tr>
4920 | 	</thead>
4921 | 
4922 | 	<tbody>
4923 | 	
4924 | 
4925 |         <tr>
4926 |             
4927 |                 <td class="name"><code>ay</code></td>
4928 |             
4929 | 
4930 |             <td class="type">
4931 |             
4932 |                 
4933 | <span class="param-type">number</span>
4934 | 
4935 | 
4936 |             
4937 |             </td>
4938 | 
4939 |             
4940 | 
4941 |             
4942 | 
4943 |             <td class="description last"><p>angle of skew for y</p></td>
4944 |         </tr>
4945 | 
4946 | 	
4947 | 	</tbody>
4948 | </table>
4949 | 
4950 |     
4951 |     
4952 |     
4953 | <dl class="details">
4954 | 	
4955 | 
4956 | 	
4957 | 
4958 | 	
4959 | 
4960 | 	
4961 | 
4962 | 	
4963 | 
4964 | 	
4965 | 
4966 | 	
4967 | 
4968 | 	
4969 | 
4970 | 	
4971 | 
4972 | 
4973 | 
4974 | 	
4975 | 
4976 | 	
4977 | 
4978 | 	
4979 | 
4980 | 	
4981 | </dl>
4982 | 
4983 |     
4984 |     
4985 | 
4986 |     
4987 | 
4988 |     
4989 |     
4990 |     
4991 |     
4992 |     
4993 |     
4994 |     
4995 | </dd>
4996 | 
4997 |         
4998 |             
4999 | <dt>
5000 |     <h4 class="name" id="toArray"><span class="type-signature"></span>toArray<span class="signature">()</span><span class="type-signature"> &rarr; {Array}</span></h4>
5001 |     
5002 |     
5003 | </dt>
5004 | <dd>
5005 |     
5006 |     
5007 |     <div class="description">
5008 |         <p>Returns an array with current matrix values.</p>
5009 |     </div>
5010 |     
5011 | 
5012 |     
5013 |     
5014 |     
5015 |     
5016 |     
5017 |     
5018 |     
5019 | <dl class="details">
5020 | 	
5021 | 
5022 | 	
5023 | 
5024 | 	
5025 | 
5026 | 	
5027 | 
5028 | 	
5029 | 
5030 | 	
5031 | 
5032 | 	
5033 | 
5034 | 	
5035 | 
5036 | 	
5037 | 
5038 | 
5039 | 
5040 | 	
5041 | 
5042 | 	
5043 | 
5044 | 	
5045 | 
5046 | 	
5047 | </dl>
5048 | 
5049 |     
5050 |     
5051 | 
5052 |     
5053 | 
5054 |     
5055 |     
5056 |     
5057 |     
5058 |     
5059 |     <h5>Returns:</h5>
5060 |     
5061 |             
5062 | 
5063 | 
5064 | <dl>
5065 | 	<dt>
5066 | 		Type
5067 | 	</dt>
5068 | 	<dd>
5069 | 		
5070 | <span class="param-type">Array</span>
5071 | 
5072 | 
5073 | 	</dd>
5074 | </dl>
5075 | 
5076 | 
5077 |         
5078 |     
5079 |     
5080 | </dd>
5081 | 
5082 |         
5083 |             
5084 | <dt>
5085 |     <h4 class="name" id="toCSS"><span class="type-signature"></span>toCSS<span class="signature">()</span><span class="type-signature"> &rarr; {string}</span></h4>
5086 |     
5087 |     
5088 | </dt>
5089 | <dd>
5090 |     
5091 |     
5092 |     <div class="description">
5093 |         <p>Generates a string that can be used with CSS <code>transform:</code>.</p>
5094 |     </div>
5095 |     
5096 | 
5097 |     
5098 |     
5099 |     
5100 |     
5101 |     
5102 |     
5103 |     
5104 | <dl class="details">
5105 | 	
5106 | 
5107 | 	
5108 | 
5109 | 	
5110 | 
5111 | 	
5112 | 
5113 | 	
5114 | 
5115 | 	
5116 | 
5117 | 	
5118 | 
5119 | 	
5120 | 
5121 | 	
5122 | 
5123 | 
5124 | 
5125 | 	
5126 | 
5127 | 	
5128 | 
5129 | 	
5130 | 
5131 | 	
5132 | </dl>
5133 | 
5134 |     
5135 |     
5136 | 
5137 |     
5138 | 
5139 |     
5140 |     
5141 |     
5142 |     
5143 |     
5144 |     <h5>Returns:</h5>
5145 |     
5146 |             
5147 | 
5148 | 
5149 | <dl>
5150 | 	<dt>
5151 | 		Type
5152 | 	</dt>
5153 | 	<dd>
5154 | 		
5155 | <span class="param-type">string</span>
5156 | 
5157 | 
5158 | 	</dd>
5159 | </dl>
5160 | 
5161 | 
5162 |         
5163 |     
5164 |     
5165 | </dd>
5166 | 
5167 |         
5168 |             
5169 | <dt>
5170 |     <h4 class="name" id="toJSON"><span class="type-signature"></span>toJSON<span class="signature">()</span><span class="type-signature"> &rarr; {string}</span></h4>
5171 |     
5172 |     
5173 | </dt>
5174 | <dd>
5175 |     
5176 |     
5177 |     <div class="description">
5178 |         <p>Returns a JSON compatible string of current matrix.</p>
5179 |     </div>
5180 |     
5181 | 
5182 |     
5183 |     
5184 |     
5185 |     
5186 |     
5187 |     
5188 |     
5189 | <dl class="details">
5190 | 	
5191 | 
5192 | 	
5193 | 
5194 | 	
5195 | 
5196 | 	
5197 | 
5198 | 	
5199 | 
5200 | 	
5201 | 
5202 | 	
5203 | 
5204 | 	
5205 | 
5206 | 	
5207 | 
5208 | 
5209 | 
5210 | 	
5211 | 
5212 | 	
5213 | 
5214 | 	
5215 | 
5216 | 	
5217 | </dl>
5218 | 
5219 |     
5220 |     
5221 | 
5222 |     
5223 | 
5224 |     
5225 |     
5226 |     
5227 |     
5228 |     
5229 |     <h5>Returns:</h5>
5230 |     
5231 |             
5232 | 
5233 | 
5234 | <dl>
5235 | 	<dt>
5236 | 		Type
5237 | 	</dt>
5238 | 	<dd>
5239 | 		
5240 | <span class="param-type">string</span>
5241 | 
5242 | 
5243 | 	</dd>
5244 | </dl>
5245 | 
5246 | 
5247 |         
5248 |     
5249 |     
5250 | </dd>
5251 | 
5252 |         
5253 |             
5254 | <dt>
5255 |     <h4 class="name" id="toString"><span class="type-signature"></span>toString<span class="signature">()</span><span class="type-signature"> &rarr; {string}</span></h4>
5256 |     
5257 |     
5258 | </dt>
5259 | <dd>
5260 |     
5261 |     
5262 |     <div class="description">
5263 |         <p>Returns a string with current matrix as comma-separated list.</p>
5264 |     </div>
5265 |     
5266 | 
5267 |     
5268 |     
5269 |     
5270 |     
5271 |     
5272 |     
5273 |     
5274 | <dl class="details">
5275 | 	
5276 | 
5277 | 	
5278 | 
5279 | 	
5280 | 
5281 | 	
5282 | 
5283 | 	
5284 | 
5285 | 	
5286 | 
5287 | 	
5288 | 
5289 | 	
5290 | 
5291 | 	
5292 | 
5293 | 
5294 | 
5295 | 	
5296 | 
5297 | 	
5298 | 
5299 | 	
5300 | 
5301 | 	
5302 | </dl>
5303 | 
5304 |     
5305 |     
5306 | 
5307 |     
5308 | 
5309 |     
5310 |     
5311 |     
5312 |     
5313 |     
5314 |     <h5>Returns:</h5>
5315 |     
5316 |             
5317 | 
5318 | 
5319 | <dl>
5320 | 	<dt>
5321 | 		Type
5322 | 	</dt>
5323 | 	<dd>
5324 | 		
5325 | <span class="param-type">string</span>
5326 | 
5327 | 
5328 | 	</dd>
5329 | </dl>
5330 | 
5331 | 
5332 |         
5333 |     
5334 |     
5335 | </dd>
5336 | 
5337 |         
5338 |             
5339 | <dt>
5340 |     <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(a2, b2, c2, d2, e2, f2)</span><span class="type-signature"></span></h4>
5341 |     
5342 |     
5343 | </dt>
5344 | <dd>
5345 |     
5346 |     
5347 |     <div class="description">
5348 |         <p>Multiplies current matrix with new matrix values.</p>
5349 |     </div>
5350 |     
5351 | 
5352 |     
5353 |     
5354 |     
5355 |     
5356 |     
5357 |         <h5>Parameters:</h5>
5358 |         
5359 | 
5360 | <table class="params table table-striped">
5361 |     <thead>
5362 | 	<tr>
5363 | 		
5364 | 		<th>Name</th>
5365 | 		
5366 | 
5367 | 		<th>Type</th>
5368 | 
5369 | 		
5370 | 
5371 | 		
5372 | 
5373 | 		<th class="last">Description</th>
5374 | 	</tr>
5375 | 	</thead>
5376 | 
5377 | 	<tbody>
5378 | 	
5379 | 
5380 |         <tr>
5381 |             
5382 |                 <td class="name"><code>a2</code></td>
5383 |             
5384 | 
5385 |             <td class="type">
5386 |             
5387 |                 
5388 | <span class="param-type">number</span>
5389 | 
5390 | 
5391 |             
5392 |             </td>
5393 | 
5394 |             
5395 | 
5396 |             
5397 | 
5398 |             <td class="description last"><p>scale x</p></td>
5399 |         </tr>
5400 | 
5401 | 	
5402 | 
5403 |         <tr>
5404 |             
5405 |                 <td class="name"><code>b2</code></td>
5406 |             
5407 | 
5408 |             <td class="type">
5409 |             
5410 |                 
5411 | <span class="param-type">number</span>
5412 | 
5413 | 
5414 |             
5415 |             </td>
5416 | 
5417 |             
5418 | 
5419 |             
5420 | 
5421 |             <td class="description last"><p>shear y</p></td>
5422 |         </tr>
5423 | 
5424 | 	
5425 | 
5426 |         <tr>
5427 |             
5428 |                 <td class="name"><code>c2</code></td>
5429 |             
5430 | 
5431 |             <td class="type">
5432 |             
5433 |                 
5434 | <span class="param-type">number</span>
5435 | 
5436 | 
5437 |             
5438 |             </td>
5439 | 
5440 |             
5441 | 
5442 |             
5443 | 
5444 |             <td class="description last"><p>shear x</p></td>
5445 |         </tr>
5446 | 
5447 | 	
5448 | 
5449 |         <tr>
5450 |             
5451 |                 <td class="name"><code>d2</code></td>
5452 |             
5453 | 
5454 |             <td class="type">
5455 |             
5456 |                 
5457 | <span class="param-type">number</span>
5458 | 
5459 | 
5460 |             
5461 |             </td>
5462 | 
5463 |             
5464 | 
5465 |             
5466 | 
5467 |             <td class="description last"><p>scale y</p></td>
5468 |         </tr>
5469 | 
5470 | 	
5471 | 
5472 |         <tr>
5473 |             
5474 |                 <td class="name"><code>e2</code></td>
5475 |             
5476 | 
5477 |             <td class="type">
5478 |             
5479 |                 
5480 | <span class="param-type">number</span>
5481 | 
5482 | 
5483 |             
5484 |             </td>
5485 | 
5486 |             
5487 | 
5488 |             
5489 | 
5490 |             <td class="description last"><p>translate x</p></td>
5491 |         </tr>
5492 | 
5493 | 	
5494 | 
5495 |         <tr>
5496 |             
5497 |                 <td class="name"><code>f2</code></td>
5498 |             
5499 | 
5500 |             <td class="type">
5501 |             
5502 |                 
5503 | <span class="param-type">number</span>
5504 | 
5505 | 
5506 |             
5507 |             </td>
5508 | 
5509 |             
5510 | 
5511 |             
5512 | 
5513 |             <td class="description last"><p>translate y</p></td>
5514 |         </tr>
5515 | 
5516 | 	
5517 | 	</tbody>
5518 | </table>
5519 | 
5520 |     
5521 |     
5522 |     
5523 | <dl class="details">
5524 | 	
5525 | 
5526 | 	
5527 | 
5528 | 	
5529 | 
5530 | 	
5531 | 
5532 | 	
5533 | 
5534 | 	
5535 | 
5536 | 	
5537 | 
5538 | 	
5539 | 
5540 | 	
5541 | 
5542 | 
5543 | 
5544 | 	
5545 | 
5546 | 	
5547 | 
5548 | 	
5549 | 
5550 | 	
5551 | </dl>
5552 | 
5553 |     
5554 |     
5555 | 
5556 |     
5557 | 
5558 |     
5559 |     
5560 |     
5561 |     
5562 |     
5563 |     
5564 |     
5565 | </dd>
5566 | 
5567 |         
5568 |             
5569 | <dt>
5570 |     <h4 class="name" id="translate"><span class="type-signature"></span>translate<span class="signature">(tx, ty)</span><span class="type-signature"></span></h4>
5571 |     
5572 |     
5573 | </dt>
5574 | <dd>
5575 |     
5576 |     
5577 |     <div class="description">
5578 |         <p>Translate current matrix accumulative.</p>
5579 |     </div>
5580 |     
5581 | 
5582 |     
5583 |     
5584 |     
5585 |     
5586 |     
5587 |         <h5>Parameters:</h5>
5588 |         
5589 | 
5590 | <table class="params table table-striped">
5591 |     <thead>
5592 | 	<tr>
5593 | 		
5594 | 		<th>Name</th>
5595 | 		
5596 | 
5597 | 		<th>Type</th>
5598 | 
5599 | 		
5600 | 
5601 | 		
5602 | 
5603 | 		<th class="last">Description</th>
5604 | 	</tr>
5605 | 	</thead>
5606 | 
5607 | 	<tbody>
5608 | 	
5609 | 
5610 |         <tr>
5611 |             
5612 |                 <td class="name"><code>tx</code></td>
5613 |             
5614 | 
5615 |             <td class="type">
5616 |             
5617 |                 
5618 | <span class="param-type">number</span>
5619 | 
5620 | 
5621 |             
5622 |             </td>
5623 | 
5624 |             
5625 | 
5626 |             
5627 | 
5628 |             <td class="description last"><p>translation for x</p></td>
5629 |         </tr>
5630 | 
5631 | 	
5632 | 
5633 |         <tr>
5634 |             
5635 |                 <td class="name"><code>ty</code></td>
5636 |             
5637 | 
5638 |             <td class="type">
5639 |             
5640 |                 
5641 | <span class="param-type">number</span>
5642 | 
5643 | 
5644 |             
5645 |             </td>
5646 | 
5647 |             
5648 | 
5649 |             
5650 | 
5651 |             <td class="description last"><p>translation for y</p></td>
5652 |         </tr>
5653 | 
5654 | 	
5655 | 	</tbody>
5656 | </table>
5657 | 
5658 |     
5659 |     
5660 |     
5661 | <dl class="details">
5662 | 	
5663 | 
5664 | 	
5665 | 
5666 | 	
5667 | 
5668 | 	
5669 | 
5670 | 	
5671 | 
5672 | 	
5673 | 
5674 | 	
5675 | 
5676 | 	
5677 | 
5678 | 	
5679 | 
5680 | 
5681 | 
5682 | 	
5683 | 
5684 | 	
5685 | 
5686 | 	
5687 | 
5688 | 	
5689 | </dl>
5690 | 
5691 |     
5692 |     
5693 | 
5694 |     
5695 | 
5696 |     
5697 |     
5698 |     
5699 |     
5700 |     
5701 |     
5702 |     
5703 | </dd>
5704 | 
5705 |         
5706 |             
5707 | <dt>
5708 |     <h4 class="name" id="translateX"><span class="type-signature"></span>translateX<span class="signature">(tx)</span><span class="type-signature"></span></h4>
5709 |     
5710 |     
5711 | </dt>
5712 | <dd>
5713 |     
5714 |     
5715 |     <div class="description">
5716 |         <p>Translate current matrix on x axis accumulative.</p>
5717 |     </div>
5718 |     
5719 | 
5720 |     
5721 |     
5722 |     
5723 |     
5724 |     
5725 |         <h5>Parameters:</h5>
5726 |         
5727 | 
5728 | <table class="params table table-striped">
5729 |     <thead>
5730 | 	<tr>
5731 | 		
5732 | 		<th>Name</th>
5733 | 		
5734 | 
5735 | 		<th>Type</th>
5736 | 
5737 | 		
5738 | 
5739 | 		
5740 | 
5741 | 		<th class="last">Description</th>
5742 | 	</tr>
5743 | 	</thead>
5744 | 
5745 | 	<tbody>
5746 | 	
5747 | 
5748 |         <tr>
5749 |             
5750 |                 <td class="name"><code>tx</code></td>
5751 |             
5752 | 
5753 |             <td class="type">
5754 |             
5755 |                 
5756 | <span class="param-type">number</span>
5757 | 
5758 | 
5759 |             
5760 |             </td>
5761 | 
5762 |             
5763 | 
5764 |             
5765 | 
5766 |             <td class="description last"><p>translation for x</p></td>
5767 |         </tr>
5768 | 
5769 | 	
5770 | 	</tbody>
5771 | </table>
5772 | 
5773 |     
5774 |     
5775 |     
5776 | <dl class="details">
5777 | 	
5778 | 
5779 | 	
5780 | 
5781 | 	
5782 | 
5783 | 	
5784 | 
5785 | 	
5786 | 
5787 | 	
5788 | 
5789 | 	
5790 | 
5791 | 	
5792 | 
5793 | 	
5794 | 
5795 | 
5796 | 
5797 | 	
5798 | 
5799 | 	
5800 | 
5801 | 	
5802 | 
5803 | 	
5804 | </dl>
5805 | 
5806 |     
5807 |     
5808 | 
5809 |     
5810 | 
5811 |     
5812 |     
5813 |     
5814 |     
5815 |     
5816 |     
5817 |     
5818 | </dd>
5819 | 
5820 |         
5821 |             
5822 | <dt>
5823 |     <h4 class="name" id="translateY"><span class="type-signature"></span>translateY<span class="signature">(ty)</span><span class="type-signature"></span></h4>
5824 |     
5825 |     
5826 | </dt>
5827 | <dd>
5828 |     
5829 |     
5830 |     <div class="description">
5831 |         <p>Translate current matrix on y axis accumulative.</p>
5832 |     </div>
5833 |     
5834 | 
5835 |     
5836 |     
5837 |     
5838 |     
5839 |     
5840 |         <h5>Parameters:</h5>
5841 |         
5842 | 
5843 | <table class="params table table-striped">
5844 |     <thead>
5845 | 	<tr>
5846 | 		
5847 | 		<th>Name</th>
5848 | 		
5849 | 
5850 | 		<th>Type</th>
5851 | 
5852 | 		
5853 | 
5854 | 		
5855 | 
5856 | 		<th class="last">Description</th>
5857 | 	</tr>
5858 | 	</thead>
5859 | 
5860 | 	<tbody>
5861 | 	
5862 | 
5863 |         <tr>
5864 |             
5865 |                 <td class="name"><code>ty</code></td>
5866 |             
5867 | 
5868 |             <td class="type">
5869 |             
5870 |                 
5871 | <span class="param-type">number</span>
5872 | 
5873 | 
5874 |             
5875 |             </td>
5876 | 
5877 |             
5878 | 
5879 |             
5880 | 
5881 |             <td class="description last"><p>translation for y</p></td>
5882 |         </tr>
5883 | 
5884 | 	
5885 | 	</tbody>
5886 | </table>
5887 | 
5888 |     
5889 |     
5890 |     
5891 | <dl class="details">
5892 | 	
5893 | 
5894 | 	
5895 | 
5896 | 	
5897 | 
5898 | 	
5899 | 
5900 | 	
5901 | 
5902 | 	
5903 | 
5904 | 	
5905 | 
5906 | 	
5907 | 
5908 | 	
5909 | 
5910 | 
5911 | 
5912 | 	
5913 | 
5914 | 	
5915 | 
5916 | 	
5917 | 
5918 | 	
5919 | </dl>
5920 | 
5921 |     
5922 |     
5923 | 
5924 |     
5925 | 
5926 |     
5927 |     
5928 |     
5929 |     
5930 |     
5931 |     
5932 |     
5933 | </dd>
5934 | 
5935 |         </dl>
5936 |     
5937 | 
5938 |     
5939 | 
5940 |     
5941 | </article>
5942 | 
5943 | </section>
5944 | 
5945 | 
5946 | 
5947 | 
5948 | 				</div>
5949 | 
5950 | 				<div class="clearfix"></div>
5951 | 				<footer>
5952 | 					
5953 | 					<p><b><a href='https://github.com/epistemex/'>Epistemex at GitHib</a></b></p>
5954 | 					<br />
5955 | 					
5956 | 					
5957 | 		<span class="copyright">
5958 | 		Copyright &copy; 2015 Epistemex
5959 | 		</span>
5960 | 					<br />
5961 | 					
5962 | 		<span class="jsdoc-message">
5963 | 		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.1</a>
5964 | 		on Fri Nov 6th 2015 using the <a
5965 | 			href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
5966 | 		</span>
5967 | 				</footer>
5968 | 			</div>
5969 | 
5970 | 			
5971 | 			<div class="span3">
5972 | 				<div id="toc"></div>
5973 | 			</div>
5974 | 			
5975 | 			<br clear="both">
5976 | 		</div>
5977 | 
5978 | 	</div>
5979 | 	<!--<script src="scripts/sunlight.js"></script>-->
5980 | 	<script src="scripts/docstrap.lib.js"></script>
5981 | 	<script src="scripts/bootstrap-dropdown.js"></script>
5982 | 	<script src="scripts/toc.js"></script>
5983 | 
5984 | 	<script>
5985 | 		$( function () {
5986 | 			$( "[id*='$']" ).each( function () {
5987 | 				var $this = $( this );
5988 | 
5989 | 				$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
5990 | 			} );
5991 | 
5992 | 			$( "#toc" ).toc( {
5993 | 				anchorName  : function ( i, heading, prefix ) {
5994 | 					return $( heading ).attr( "id" ) || ( prefix + i );
5995 | 				},
5996 | 				selectors   : "h1,h2,h3,h4",
5997 | 				showAndHide : false,
5998 | 				scrollTo    : "100px"
5999 | 			} );
6000 | 
6001 | 			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
6002 | 			$( "#main span[id^='toc']" ).addClass( "toc-shim" );
6003 | 			$( '.dropdown-toggle' ).dropdown();
6004 | //			$( ".tutorial-section pre, .readme-section pre" ).addClass( "sunlight-highlight-javascript" ).addClass( "linenums" );
6005 | 
6006 | 			$( ".tutorial-section pre, .readme-section pre" ).each( function () {
6007 | 				var $this = $( this );
6008 | 
6009 | 				var example = $this.find( "code" );
6010 | 				exampleText = example.html();
6011 | 				var lang = /{@lang (.*?)}/.exec( exampleText );
6012 | 				if ( lang && lang[1] ) {
6013 | 					exampleText = exampleText.replace( lang[0], "" );
6014 | 					example.html( exampleText );
6015 | 					lang = lang[1];
6016 | 				} else {
6017 | 					lang = "javascript";
6018 | 				}
6019 | 
6020 | 				if ( lang ) {
6021 | 
6022 | 					$this
6023 | 						.addClass( "sunlight-highlight-" + lang )
6024 | 						.addClass( "linenums" )
6025 | 						.html( example.html() );
6026 | 
6027 | 				}
6028 | 			} );
6029 | 
6030 | 			Sunlight.highlightAll( {
6031 | 				lineNumbers : false,
6032 | 				showMenu : true,
6033 | 				enableDoclinks : true
6034 | 			} );
6035 | 		} );
6036 | 	 </script>
6037 | 
6038 | 
6039 | 
6040 | 	<!--Navigation and Symbol Display-->
6041 | 	
6042 | 
6043 | 
6044 | 	<!--Google Analytics-->
6045 | 	
6046 | 
6047 | </body>
6048 | </html>


--------------------------------------------------------------------------------