Merge pull request #264 from derekkinsman/master

Yuidoc reference examples for Transform & Image

Author: Lauren McCarthy

src/image/image.js

@@ -29,6 +29,31 @@ define(function (require) {
    * @param  {Integer} width  width in pixels
    * @param  {Integer} height height in pixels
    * @return {p5.Image}         the p5.Image object
+   * @example
+   * <div>
+   * <code>
+   * img = createImage(66, 66, RGB);
+   * img.loadPixels();
+   * for (i = 0; i < img.pixels.length; i++) {
+   *   img.pixels[i] = color(0, 90, 102); 
+   * }
+   * img.updatePixels();
+   * image(img, 17, 17);
+   * </code>
+   * </div>
+   *
+   * <div>
+   * <code>
+   * img = createImage(66, 66, RGB);
+   * img.loadPixels();
+   * for (i = 0; i < img.pixels.length; i++) {
+   *   img.pixels[i] = color(0, 90, 102, i % img.width * 2); 
+   * }
+   * img.updatePixels();
+   * image(img, 17, 17);
+   * image(img, 34, 34);
+   * </code>
+   * </div>
    */
   p5.prototype.createImage = function(width, height) {
     return new p5.Image(width, height);

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);

src/typography/attributes.js

@@ -25,6 +25,18 @@ define(function (require) {
    * @method textAlign
    * @param {Number/Constant} a horizontal alignment, either LEFT,
    *                            CENTER, or RIGHT
+   * @example
+   * <div>
+   * <code>
+   * textSize(16);
+   * textAlign(RIGHT);
+   * text("ABCD", 50, 30);
+   * textAlign(CENTER);
+   * text("EFGH", 50, 50);
+   * textAlign(LEFT);
+   * text("IJKL", 50, 70);
+   * </code>
+   * </div>
    */
   p5.prototype.textAlign = function(a) {
     if (a === constants.LEFT ||
@@ -39,6 +51,17 @@ define(function (require) {
    *
    * @method textHeight
    * @param {String} s the String of characters to measure
+   * @example
+   * <div>
+   * <code>
+   * background(0);
+   * fill(255);
+   * textSize(14);
+   * s = "String.";
+   * text(s, 10, 23);
+   * console.log(textHeight(s));
+   * </code>
+   * </div>
    */
   p5.prototype.textHeight = function(s) {
     return this.canvas.getContext('2d').measureText(s).height;
@@ -50,6 +73,24 @@ define(function (require) {
    *
    * @method textLeading
    * @param {Number} l the size in pixels for spacing between lines
+   * @example
+   * <div>
+   * <code>
+   * // Text to display. The "\n" is a "new line" character
+   * lines = "L1\nL2\nL3";
+   * textSize(12);
+   * fill(0);  // Set fill to black
+   * 
+   * textLeading(10);  // Set leading to 10
+   * text(lines, 10, 25);
+   * 
+   * textLeading(20);  // Set leading to 20
+   * text(lines, 40, 25);
+   * 
+   * textLeading(30);  // Set leading to 30
+   * text(lines, 70, 25);
+   * </code>
+   * </div>
    */
   p5.prototype.textLeading = function(l) {
     this._setProperty('_textLeading', l);
@@ -61,6 +102,17 @@ define(function (require) {
    *
    * @method textSize
    * @param {Number} s the size of the letters in units of pixels
+   * @example
+   * <div>
+   * <code>
+   * background(0);
+   * fill(255);
+   * textSize(26); 
+   * text("WORD", 10, 50); 
+   * textSize(14);
+   * text("WORD", 10, 70);
+   * </code>
+   * </div>
    */
   p5.prototype.textSize = function(s) {
     this._setProperty('_textSize', s);
@@ -73,6 +125,22 @@ define(function (require) {
    * @method textStyle
    * @param {Number/Constant} s styling for text, either NORMAL,
    *                            ITALIC, or BOLD
+   * @example
+   * <div>
+   * <code>
+   * background(0);
+   * fill(255);
+   * textStyle(NORMAL);
+   * textSize(14);
+   * text("WORD", 10, 23);
+   * textStyle(ITALIC);
+   * textSize(14);
+   * text("WORD", 10, 45);
+   * textStyle(BOLD);
+   * textSize(14);
+   * text("WORD", 10, 67);
+   * </code>
+   * </div>
    */
   p5.prototype.textStyle = function(s) {
     if (s === constants.NORMAL ||
@@ -87,6 +155,17 @@ define(function (require) {
    *
    * @method textWidth
    * @param {String} s the String of characters to measure
+   * @example
+   * <div>
+   * <code>
+   * background(0);
+   * fill(255);
+   * textSize(14);
+   * s = "String.";
+   * text(s, 10, 23);
+   * console.log(textWidth(s));
+   * </code>
+   * </div>
    */
   p5.prototype.textWidth = function(s) {
     return this.canvas.getContext('2d').measureText(s).width;

src/typography/loading_displaying.js

@@ -34,6 +34,24 @@ define(function (require) {
    *                     see rectMode() for more info
    * @param {Number} y2  by default, the height of the text box,
    *                     see rectMode() for more info
+   * @example
+   * <div>
+   * <code>
+   * textSize(32);
+   * text("word", 10, 30); 
+   * fill(0, 102, 153);
+   * text("word", 10, 60);
+   * fill(0, 102, 153, 51);
+   * text("word", 10, 90); 
+   * </code>
+   * </div>
+   * <div>
+   * <code>
+   * s = "The quick brown fox jumped over the lazy dog.";
+   * fill(50);
+   * text(s, 10, 10, 70, 80); // Text wraps within text box
+   * </code>
+   * </div>
    */
   p5.prototype.text = function() {
 
@@ -107,6 +125,17 @@ define(function (require) {
    *
    * @method textFont
    * @param {String} str name of font
+   * @example
+   * <div>
+   * <code>
+   * fill(0);
+   * textSize(36);
+   * textFont("Georgia");
+   * text("Georgia", 12, 40);
+   * textFont("Helvetica");
+   * text("Helvetica", 12, 90);
+   * </code>
+   * </div>
    */
   p5.prototype.textFont = function(str) {
     this._setProperty('_textFont', str); //pend temp?