Adding transform reference examples.

Author: Derek Kinsman

src/transform/transform.js

@@ -30,6 +30,12 @@ define(function (require) {
    * @param  {Number} n11 numbers which define the 3x2 matrix to be multiplied
    * @param  {Number} n12 numbers which define the 3x2 matrix to be multiplied
    * @return {p5}         the p5 object
+   * @example
+   * <div>
+   * <code>
+   * // Example in the works.
+   * </code>
+   * </div>
    */
   p5.prototype.applyMatrix = function(n00, n01, n02, n10, n11, n12) {
     this.canvas.getContext('2d').transform(n00, n01, n02, n10, n11, n12);
@@ -48,6 +54,12 @@ define(function (require) {
    * 
    * @method printMatrix
    * @return {p5} the p5 object
+   * @example
+   * <div>
+   * <code>
+   * // Example in the works.
+   * </code>
+   * </div>
    */
   p5.prototype.printMatrix = function() {
     throw new Error('printMatrix() not implemented');
@@ -62,6 +74,12 @@ define(function (require) {
    *
    * @method resetMatrix
    * @return {p5} the p5 object
+   * @example
+   * <div>
+   * <code>
+   * // Example in the works.
+   * </code>
+   * </div>
    */
   p5.prototype.resetMatrix = function() {
     this.canvas.getContext('2d').setTransform();
@@ -90,6 +108,14 @@ define(function (require) {
    * @param  {Number} angle the angle of rotation, specified in radians
    *                        or degrees, depending on current angleMode
    * @return {p5}           the p5 object
+   * @example
+   * <div>
+   * <code>
+   * translate(width/2, height/2);
+   * rotate(PI/3.0);
+   * rect(-26, -26, 52, 52);
+   * </code>
+   * </div>
    */
   p5.prototype.rotate = function(r) {
     if (this._angleMode === constants.DEGREES) {
@@ -143,6 +169,22 @@ define(function (require) {
    *                      are given
    * @param  {Number} [y] percentage to scale the object in the y-axis
    * @return {p5}         the p5 object
+   * @example
+   * <div>
+   * <code>
+   * translate(width/2, height/2);
+   * rotate(PI/3.0);
+   * rect(-26, -26, 52, 52);
+   * </code>
+   * </div>
+   *
+   * <div>
+   * <code>
+   * rect(30, 20, 50, 50);
+   * scale(0.5, 1.3);
+   * rect(30, 20, 50, 50);
+   * </code>
+   * </div>
    */
   p5.prototype.scale = function() {
     var x = 1.0, y = 1.0;
@@ -182,6 +224,14 @@ define(function (require) {
    * @param  {Number} angle angle of shear specified in radians or degrees,
    *                        depending on current angleMode
    * @return {p5}           the p5 object
+   * @example
+   * <div>
+   * <code>
+   * translate(width/4, height/4);
+   * shearX(PI/4.0);
+   * rect(0, 0, 30, 30);
+   * </code>
+   * </div>
    */
   p5.prototype.shearX = function(angle) {
     if (this._angleMode === constants.DEGREES) {
@@ -214,6 +264,14 @@ define(function (require) {
    * @param  {Number} angle angle of shear specified in radians or degrees,
    *                        depending on current angleMode
    * @return {p5}           the p5 object
+   * @example
+   * <div>
+   * <code>
+   * translate(width/4, height/4);
+   * shearY(PI/4.0);
+   * rect(0, 0, 30, 30);
+   * </code>
+   * </div>
    */
   p5.prototype.shearY = function(angle) {
     if (this._angleMode === constants.DEGREES) {
@@ -242,6 +300,23 @@ define(function (require) {
    * @param  {Number} x left/right translation
    * @param  {Number} y up/down translation
    * @return {p5}       the p5 object
+   * @example
+   * <div>
+   * <code>
+   * translate(30, 20);
+   * rect(0, 0, 55, 55);
+   * </code>
+   * </div>
+   *
+   * <div>
+   * <code>
+   * rect(0, 0, 55, 55);  // Draw rect at original 0,0
+   * translate(30, 20);
+   * rect(0, 0, 55, 55);  // Draw rect at new 0,0
+   * translate(14, 14);
+   * rect(0, 0, 55, 55);  // Draw rect at new 0,0
+   * </code>
+   * </div>
    */
   p5.prototype.translate = function(x, y) {
     this.canvas.getContext('2d').translate(x, y);