Merge branch 'master' of https://github.com/processing/p5.js

* 'master' of https://github.com/processing/p5.js:
  Add unit test for blendMode()
  v0.4.9
  Add the final two parameters of the second curve example
  fix for https://github.com/processing/p5.js-sound/issues/72
  migrating travis
  closes #784, adding this._requestAnimId and canvas to this._elements
  Address PR comments
  Code review of the Perlin noise generator.
  Extract numbers into points for curve example.
  Change bezierPoint example to extract numbers into variables.
  Line wrap everything to 75 columns.
  Improve {curve, bezier}{Tangent, Point} docs.
  Rewrite the docs for bezier.
  Rewrite the docs for curve.
  Improve noise docs to reference noiseSeed().
  Indicate point is colored by stroke.
  fix to preload to default to p5
  fixes preload bug and adds outside library compatability

Author: indefinit

.travis.yml

@@ -4,3 +4,4 @@ node_js:
   - "0.12"
 install: npm install
 script: npm run grunt
+sudo: false

lib/addons/p5.sound.js

@@ -681,7 +681,7 @@ soundfile = function () {
     }
   };
   // register preload handling of loadSound
-  p5.prototype.registerPreloadMethod('loadSound');
+  p5.prototype.registerPreloadMethod('loadSound', p5);
   /**
    *  loadSound() returns a new p5.SoundFile from a specified
    *  path. If called during preload(), the p5.SoundFile will be ready

package.json

@@ -10,7 +10,7 @@
     "docs": "grunt yui",
     "test": "grunt"
   },
-  "version": "0.4.8",
+  "version": "0.4.9",
   "devDependencies": {
     "amdclean": "~0.3.3",
     "browserify": "^11.0.1",

src/core/2d_primitives.js

@@ -234,7 +234,8 @@ p5.prototype.line = function() {
 /**
  * Draws a point, a coordinate in space at the dimension of one pixel.
  * The first parameter is the horizontal value for the point, the second
- * value is the vertical value for the point.
+ * value is the vertical value for the point. The color of the point is
+ * determined by the current stroke.
  *
  * @method point
  * @param  {Number} x the x-coordinate

src/core/core.js

@@ -148,8 +148,8 @@ var p5 = function(sketch, node, sync) {
   this._userNode = node;
   this._curElement = null;
   this._elements = [];
+  this._requestAnimId = 0;
   this._preloadCount = 0;
-  this._updateInterval = 0;
   this._isGlobal = false;
   this._loop = true;
   this._styles = [];
@@ -211,7 +211,6 @@ var p5 = function(sketch, node, sync) {
     );
 
     var userPreload = this.preload || window.preload; // look for "preload"
-    var context = this._isGlobal ? window : this;
     if (userPreload) {
 
       // Setup loading screen
@@ -226,16 +225,18 @@ var p5 = function(sketch, node, sync) {
         var node = this._userNode || document.body;
         node.appendChild(loadingScreen);
       }
-
-      var methods = this._preloadMethods;
-      Object.keys(methods).forEach(function(f) {
-        var methodContext = methods[f];
-        var originalFunc = methodContext[f];
-        methodContext[f] = function() {
-          var argsArray = Array.prototype.slice.call(arguments);
-          return context._preload(originalFunc, methodContext, argsArray);
-        };
-      });
+      // var methods = this._preloadMethods;
+      for (var method in this._preloadMethods){
+        // default to p5 if no object defined
+        this._preloadMethods[method] = this._preloadMethods[method] || p5;
+        var obj = this._preloadMethods[method];
+        //it's p5, check if it's global or instance
+        if (obj === p5.prototype || obj === p5){
+          obj = this._isGlobal ? window : this;
+        }
+        this._registeredPreloadMethods[method] = obj[method];
+        obj[method] = this._wrapPreload(obj, method);
+      }
 
       userPreload();
     } else {
@@ -245,32 +246,42 @@ var p5 = function(sketch, node, sync) {
     }
   }.bind(this);
 
-  this._preload = function (func, obj, args) {
+  this._decrementPreload = function(){
     var context = this._isGlobal ? window : this;
-    context._setProperty('_preloadCount', context._preloadCount + 1);
-    var preloadCallback = function (resp) {
-      context._setProperty('_preloadCount', context._preloadCount - 1);
-      if (context._preloadCount === 0) {
-        var loadingScreen = document.getElementById(context._loadingScreenId);
-        if (loadingScreen) {
-          loadingScreen.parentNode.removeChild(loadingScreen);
-        }
-        context._setup();
-        context._runFrames();
-        context._draw();
+    context._setProperty('_preloadCount', context._preloadCount - 1);
+    if (context._preloadCount === 0) {
+      var loadingScreen = document.getElementById(context._loadingScreenId);
+      if (loadingScreen) {
+        loadingScreen.parentNode.removeChild(loadingScreen);
       }
-    };
-    args.push(preloadCallback);
-    return func.apply(obj, args);
-  }.bind(this);
+      context._setup();
+      context._runFrames();
+      context._draw();
+    }
+  };
+
+  this._wrapPreload = function(obj, fnName){
+    return function(){
+      //increment counter
+      this._incrementPreload();
+      //call original function
+      var args = Array.prototype.slice.call(arguments);
+      args.push(this._decrementPreload.bind(this));
+      return this._registeredPreloadMethods[fnName].apply(obj, args);
+    }.bind(this);
+  };
+
+  this._incrementPreload = function(){
+    var context = this._isGlobal ? window : this;
+    context._setProperty('_preloadCount', context._preloadCount + 1);
+  };
 
   this._setup = function() {
 
     // return preload functions to their normal vals if switched by preload
     var context = this._isGlobal ? window : this;
     if (typeof context.preload === 'function') {
       for (var f in this._preloadMethods) {
-        //var o = this._preloadMethods[f];
         context[f] = this._preloadMethods[f][f];
       }
     }
@@ -330,7 +341,7 @@ var p5 = function(sketch, node, sync) {
     // get notified the next time the browser gives us
     // an opportunity to draw.
     if (this._loop) {
-      window.requestAnimationFrame(this._draw);
+      this._requestAnimId = window.requestAnimationFrame(this._draw);
     }
   }.bind(this);
 
@@ -370,8 +381,8 @@ var p5 = function(sketch, node, sync) {
 
       // stop draw
       this._loop = false;
-      if (this._updateInterval) {
-        clearTimeout(this._updateInterval);
+      if (this._requestAnimId) {
+        window.cancelAnimationFrame(this._requestAnimId);
       }
 
       // unregister events sketch-wide
@@ -503,10 +514,12 @@ p5.prototype._preloadMethods = {
 
 p5.prototype._registeredMethods = { pre: [], post: [], remove: [] };
 
-p5.prototype.registerPreloadMethod = function(f, o) {
-  o = o || p5;
-  if (!p5.prototype._preloadMethods.hasOwnProperty(f)) {
-    p5.prototype._preloadMethods[f] = o;
+p5.prototype._registeredPreloadMethods = {};
+
+p5.prototype.registerPreloadMethod = function(fnString, obj) {
+  // obj = obj || p5.prototype;
+  if (!p5.prototype._preloadMethods.hasOwnProperty(fnString)) {
+    p5.prototype._preloadMethods[fnString] = obj;
   }
 };
 

src/core/curves.js

@@ -16,12 +16,15 @@ var curveDetail = 20;
 p5.prototype._curveTightness = 0;
 
 /**
- * Draws a Bezier curve on the screen. These curves are defined by a series
- * of anchor and control points. The first two parameters specify the first
- * anchor point and the last two parameters specify the other anchor point.
- * The middle parameters specify the control points which define the shape
- * of the curve. Bezier curves were developed by French engineer Pierre
- * Bezier.
+ * Draws a cubic Bezier curve on the screen. These curves are defined by a
+ * series of anchor and control points. The first two parameters specify
+ * the first anchor point and the last two parameters specify the other
+ * anchor point, which become the first and last points on the curve. The
+ * middle parameters specify the two control points which define the shape
+ * of the curve. Approximately speaking, control points "pull" the curve
+ * towards them.<br /><br />Bezier curves were developed by French
+ * automotive engineer Pierre Bezier, and are commonly used in computer
+ * graphics to define gently sloping curves. See also curve().
  *
  * @method bezier
  * @param  {Number} x1 x-coordinate for the first anchor point
@@ -82,11 +85,10 @@ p5.prototype.bezierDetail = function(d) {
 };
 
 /**
- * Calculate a point on the Bezier Curve
- *
- * Evaluates the Bezier at point t for points a, b, c, d.
- * The parameter t varies between 0 and 1, a and d are points
+ * Evaluates the Bezier at position t for points a, b, c, d.
+ * The parameters a and d are the first and last points
  * on the curve, and b and c are the control points.
+ * The final parameter t varies between 0 and 1.
  * This can be done once with the x coordinates and a second time
  * with the y coordinates to get the location of a bezier curve at t.
  *
@@ -96,18 +98,20 @@ p5.prototype.bezierDetail = function(d) {
  * @param {Number} c coordinate of second control point
  * @param {Number} d coordinate of second point on the curve
  * @param {Number} t value between 0 and 1
- * @return {Number} the value of the Bezier at point t
+ * @return {Number} the value of the Bezier at position t
  * @example
  * <div>
  * <code>
  * noFill();
- * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ * x1 = 85, x2 = 10, x3 = 90, x4 = 15;
+ * y1 = 20, y2 = 10, y3 = 90, y4 = 80;
+ * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
  * fill(255);
  * steps = 10;
  * for (i = 0; i <= steps; i++) {
  *   t = i / steps;
- *   x = bezierPoint(85, 10, 90, 15, t);
- *   y = bezierPoint(20, 10, 90, 80, t);
+ *   x = bezierPoint(x1, x2, x3, x4, t);
+ *   y = bezierPoint(y1, y2, y3, y4, t);
  *   ellipse(x, y, 5, 5);
  * }
  * </code>
@@ -122,19 +126,18 @@ p5.prototype.bezierPoint = function(a, b, c, d, t) {
 };
 
 /**
- * Calculates the tangent of a point on a Bezier curve
- *
- * Evaluates the tangent at point t for points a, b, c, d.
- * The parameter t varies between 0 and 1, a and d are points
- * on the curve, and b and c are the control points
+ * Evaluates the tangent to the Bezier at position t for points a, b, c, d.
+ * The parameters a and d are the first and last points
+ * on the curve, and b and c are the control points.
+ * The final parameter t varies between 0 and 1.
  *
  * @method bezierTangent
  * @param {Number} a coordinate of first point on the curve
  * @param {Number} b coordinate of first control point
  * @param {Number} c coordinate of second control point
  * @param {Number} d coordinate of second point on the curve
  * @param {Number} t value between 0 and 1
- * @return {Number} the tangent at point t
+ * @return {Number} the tangent at position t
  * @example
  * <div>
  * <code>
@@ -194,11 +197,12 @@ p5.prototype.bezierTangent = function(a, b, c, d, t) {
 };
 
 /**
- * Draws a curved line on the screen. The first and second parameters specify
- * the beginning control point and the last two parameters specify the ending
- * control point. The middle parameters specify the start and stop of the
- * curve. Longer curves can be created by putting a series of curve()
- * functions together or using curveVertex(). An additional function called
+ * Draws a curved line on the screen between two points, given as the
+ * middle four parameters. The first two parameters are a control point, as
+ * if the curve came from this point even though it's not drawn. The last
+ * two parameters similarly describe the other control point. <br /><br />
+ * Longer curves can be created by putting a series of curve() functions
+ * together or using curveVertex(). An additional function called
  * curveTightness() provides control for the visual quality of the curve.
  * The curve() function is an implementation of Catmull-Rom splines.
  *
@@ -224,6 +228,20 @@ p5.prototype.bezierTangent = function(a, b, c, d, t) {
  * curve(73, 24, 73, 61, 15, 65, 15, 65);
  * </code>
  * </div>
+ * <div>
+ * <code>
+ * // Define the curve points as JavaScript objects
+ * p1 = {x: 5, y: 26}, p2 = {x: 73, y: 24}
+ * p3 = {x: 73, y: 61}, p4 = {x: 15, y: 65}
+ * noFill();
+ * stroke(255, 102, 0);
+ * curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y)
+ * stroke(0);
+ * curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y)
+ * stroke(255, 102, 0);
+ * curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y)
+ * </code>
+ * </div>
  */
 p5.prototype.curve = function(x1, y1, x2, y2, x3, y3, x4, y4) {
   this._validateParameters(
@@ -304,9 +322,7 @@ p5.prototype.curveTightness = function (t) {
 };
 
 /**
- * Calculate a point on the Curve
- *
- * Evaluates the Bezier at point t for points a, b, c, d.
+ * Evaluates the curve at position t for points a, b, c, d.
  * The parameter t varies between 0 and 1, a and d are points
  * on the curve, and b and c are the control points.
  * This can be done once with the x coordinates and a second time
@@ -318,7 +334,7 @@ p5.prototype.curveTightness = function (t) {
  * @param {Number} c coordinate of second control point
  * @param {Number} d coordinate of second point on the curve
  * @param {Number} t value between 0 and 1
- * @return {Number} bezier value at point t
+ * @return {Number} bezier value at position t
  * @example
  * <div>
  * <code>
@@ -340,7 +356,7 @@ p5.prototype.curveTightness = function (t) {
  * </code>
  * </div>
  */
-p5.prototype.curvePoint = function(a, b,c, d, t) {
+p5.prototype.curvePoint = function(a, b, c, d, t) {
   var t3 = t*t*t,
     t2 = t*t,
     f1 = -0.5 * t3 + t2 - 0.5 * t,
@@ -351,19 +367,17 @@ p5.prototype.curvePoint = function(a, b,c, d, t) {
 };
 
 /**
- * Calculates the tangent of a point on a curve
- *
- * Evaluates the tangent at point t for points a, b, c, d.
- * The parameter t varies between 0 and 1, a and d are points
- * on the curve, and b and c are the control points
+ * Evaluates the tangent to the curve at position t for points a, b, c, d.
+ * The parameter t varies between 0 and 1, a and d are points on the curve,
+ * and b and c are the control points
  *
  * @method curveTangent
  * @param {Number} a coordinate of first point on the curve
  * @param {Number} b coordinate of first control point
  * @param {Number} c coordinate of second control point
  * @param {Number} d coordinate of second point on the curve
  * @param {Number} t value between 0 and 1
- * @return {Number} the tangent at point t
+ * @return {Number} the tangent at position t
  * @example
  * <div>
  * <code>

src/core/rendering.js

@@ -95,6 +95,9 @@ p5.prototype.createCanvas = function(w, h, renderer) {
   }
   this._graphics.resize(w, h);
   this._graphics._applyDefaults();
+  if (isDefault) { // only push once
+    this._elements.push(this._graphics);
+  }
   return this._graphics;
 };