adding touch elt specific methods

Author: Lauren McCarthy

lib/p5.js

@@ -1,4 +1,4 @@
-/*! p5.js v0.3.13 December 06, 2014 */
+/*! p5.js v0.3.13 December 10, 2014 */
 var shim = function (require) {
     window.requestDraw = function () {
       return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback, element) {
@@ -561,6 +561,7 @@ var p5Element = function (require, core) {
     };
     p5.Element.prototype.mousePressed = function (fxn) {
       attachListener('mousedown', fxn, this);
+      attachListener('touchstart', fxn, this);
       return this;
     };
     p5.Element.prototype.mouseWheel = function (fxn) {
@@ -569,6 +570,7 @@ var p5Element = function (require, core) {
     };
     p5.Element.prototype.mouseReleased = function (fxn) {
       attachListener('mouseup', fxn, this);
+      attachListener('touchend', fxn, this);
       return this;
     };
     p5.Element.prototype.mouseClicked = function (fxn) {
@@ -577,6 +579,7 @@ var p5Element = function (require, core) {
     };
     p5.Element.prototype.mouseMoved = function (fxn) {
       attachListener('mousemove', fxn, this);
+      attachListener('touchmove', fxn, this);
       return this;
     };
     p5.Element.prototype.mouseOver = function (fxn) {
@@ -587,6 +590,21 @@ var p5Element = function (require, core) {
       attachListener('mouseout', fxn, this);
       return this;
     };
+    p5.Element.prototype.touchStarted = function (fxn) {
+      attachListener('touchstart', fxn, this);
+      attachListener('mousedown', fxn, this);
+      return this;
+    };
+    p5.Element.prototype.touchMoved = function (fxn) {
+      attachListener('touchmove', fxn, this);
+      attachListener('mousemove', fxn, this);
+      return this;
+    };
+    p5.Element.prototype.touchEnded = function (fxn) {
+      attachListener('touchend', fxn, this);
+      attachListener('mouseup', fxn, this);
+      return this;
+    };
     function attachListener(ev, fxn, ctx) {
       var f = fxn.bind(ctx);
       ctx.elt.addEventListener(ev, f, false);

lib/p5.min.js

@@ -325,26 +325,19 @@ define(function(require) {
   };
 
   /**
-   * If argument is given, sets the sketch to fullscreen or not based on the
-   * value of the argument. If no argument is given, returns the current
-   * fullscreen state. Note that due to browser restrictions this can only
-   * be called on user input, for example, on mouse press like the example
-   * below.
+   * Toggles pixel scaling for high pixel density displays. By default
+   * pixel scaling is on, call devicePixelScaling(false) to turn it off.
    *
    * @method devicePixelScaling
    * @example
    * <div>
    * <code>
    * function setup() {
+   *   devicePixelScaling(false);
    *   createCanvas(100, 100);
-   * }
-   * 
-   * function draw() {
+   *   background(200);
    *   ellipse(width/2, height/2, 50, 50);
    * }
-   * function mousePressed() {
-   *   devicePixelScaling(false);
-   * }
    * </code>
    * </div>
    */

src/environment/environment.js

@@ -146,6 +146,7 @@ define(function(require) {
    */
   p5.Element.prototype.mousePressed = function (fxn) {
     attachListener('mousedown', fxn, this);
+    attachListener('touchstart', fxn, this);
     return this;
   };
 
@@ -180,6 +181,7 @@ define(function(require) {
    */
   p5.Element.prototype.mouseReleased = function (fxn) {
     attachListener('mouseup', fxn, this);
+    attachListener('touchend', fxn, this);
     return this;
   };
 
@@ -211,6 +213,7 @@ define(function(require) {
    */
   p5.Element.prototype.mouseMoved = function (fxn) {
     attachListener('mousemove', fxn, this);
+    attachListener('touchmove', fxn, this);
     return this;
   };
 
@@ -244,6 +247,131 @@ define(function(require) {
     return this;
   };
 
+  /**
+   * The .touchStarted() function is called once after every time a touch is
+   * registered. This can be used to attach element specific event listeners.
+   *
+   * @method touchStarted
+   * @param  {Function} fxn function to be fired when touch is
+   *                    started over the element. 
+   * @return {p5.Element}  
+   * @example
+   * <div class='norender'><code>
+   * var cnv;
+   * var d;
+   * var g;
+   * function setup() {
+   *   cnv = createCanvas(100, 100);
+   *   cnv.touchStarted(changeGray); // attach listener for
+   *                                 // canvas click only
+   *   d = 10;
+   *   g = 100;
+   * }
+   *
+   * function draw() {
+   *   background(g);
+   *   ellipse(width/2, height/2, d, d);
+   * }
+   *
+   * // this function fires with any touch anywhere
+   * function touchStarted() {
+   *   d = d + 10;
+   * }
+   * 
+   * // this function fires only when cnv is clicked
+   * function changeGray() {
+   *   g = random(0, 255);
+   * }
+   * </code></div>
+   *
+   */
+  p5.Element.prototype.touchStarted = function (fxn) {
+    attachListener('touchstart', fxn, this);
+    attachListener('mousedown', fxn, this);
+    return this;
+  };
+
+  /**
+   * The .touchMoved() function is called once after every time a touch move is
+   * registered. This can be used to attach element specific event listeners.
+   *
+   * @method touchMoved
+   * @param  {Function} fxn function to be fired when touch is moved
+   *                    over the element. 
+   * @return {p5.Element}  
+   * @example
+   * <div class='norender'><code>
+   * var cnv;
+   * var g;
+   * function setup() {
+   *   cnv = createCanvas(100, 100);
+   *   cnv.touchMoved(changeGray); // attach listener for
+   *                               // canvas click only
+   *   g = 100;
+   * }
+   *
+   * function draw() {
+   *   background(g);
+   * }
+   *
+   * // this function fires only when cnv is clicked
+   * function changeGray() {
+   *   g = random(0, 255);
+   * }
+   * </code></div>
+   *
+   */
+  p5.Element.prototype.touchMoved = function (fxn) {
+    attachListener('touchmove', fxn, this);
+    attachListener('mousemove', fxn, this);
+    return this;
+  };
+
+  /**
+   * The .touchEnded() function is called once after every time a touch is
+   * registered. This can be used to attach element specific event listeners.
+   *
+   * @method touchEnded
+   * @param  {Function} fxn function to be fired when touch is
+   *                    ended over the element. 
+   * @return {p5.Element}  
+   * @example
+   * <div class='norender'><code>
+   * var cnv;
+   * var d;
+   * var g;
+   * function setup() {
+   *   cnv = createCanvas(100, 100);
+   *   cnv.touchEnded(changeGray);   // attach listener for
+   *                                 // canvas click only
+   *   d = 10;
+   *   g = 100;
+   * }
+   *
+   * function draw() {
+   *   background(g);
+   *   ellipse(width/2, height/2, d, d);
+   * }
+   *
+   * // this function fires with any touch anywhere
+   * function touchEnded() {
+   *   d = d + 10;
+   * }
+   * 
+   * // this function fires only when cnv is clicked
+   * function changeGray() {
+   *   g = random(0, 255);
+   * }
+   * </code></div>
+   *
+   */
+  p5.Element.prototype.touchEnded = function (fxn) {
+    attachListener('touchend', fxn, this);
+    attachListener('mouseup', fxn, this);
+    return this;
+  };
+
+
   function attachListener(ev, fxn, ctx) {
     // LM removing, not sure why we had this?
     // var _this = ctx;