Merge branch 'friendly-err-sys' of https://github.com/processing/p5.js into friendly-err-sys

Author: almchung

ISSUE_TEMPLATE.md

@@ -1 +1,47 @@
+<!--
+Hi there! If you are here to report a bug, or to discuss a feature (new or existing), you can use the below template to get started quickly. Fill out all those parts which you're comfortable with, and delete the remaining ones.
+
+To check any option, replace the space between the "[" and "]" with a "x".
+Feel free to remove any portion of the template that is not relevant for your issue.
+-->
+
+#### Nature of issue?
+
+- [ ] Found a bug
+- [ ] Existing feature enhancement
+- [ ] New feature request
+
+#### Most appropriate sub-area of p5.js?
+
+- [ ] Color
+- [ ] Core
+- [ ] Events
+- [ ] Image
+- [ ] IO
+- [ ] Math
+- [ ] Typography
+- [ ] Utilities
+- [ ] WebGL
+
+#### Which platform were you using when you encountered this?
+
+- [ ] Mobile/Tablet (touch devices)
+- [ ] Desktop/Laptop
+- [ ] Others (specify if possible)
+
+<!-- If you found a bug, the following information is helpful, if you know it. -->
+#### Details about the bug: 
+
+- p5.js version: 
+- Web browser and it's version:
+- Operating System:
+- Steps to reproduce this:
+<!-- Include a simple code snippet that demonstrates the problem. -->
+
+<!-- If you want to enhance an existing feature, please describe here -->
+#### Feature enhancement details:
+
+
+<!-- If you want to request a new feature, please describe here -->
+#### New feature details:
 

src/color/color_conversion.js

@@ -1,6 +1,6 @@
 /**
- * module Conversion
- * submodule Color Conversion
+ * @module Conversion
+ * @submodule Color Conversion
  * @for p5
  * @requires core
  */

src/core/core.js

@@ -271,8 +271,10 @@ var p5 = function(sketch, node, sync) {
 
   this._decrementPreload = function(){
     var context = this._isGlobal ? window : this;
-    context._setProperty('_preloadCount', context._preloadCount - 1);
-    context._runIfPreloadsAreDone();
+    if(typeof context.preload === 'function'){
+      context._setProperty('_preloadCount', context._preloadCount - 1);
+      context._runIfPreloadsAreDone();
+    }
   };
 
   this._wrapPreload = function(obj, fnName){
@@ -284,7 +286,7 @@ var p5 = function(sketch, node, sync) {
       for (var i = 0; i < args.length; ++i) {
         args[i] = arguments[i];
       }
-      args.push(this._decrementPreload.bind(this));
+      // args.push(this._decrementPreload.bind(this));
       return this._registeredPreloadMethods[fnName].apply(obj, args);
     }.bind(this);
   };

src/core/environment.js

@@ -246,7 +246,7 @@ p5.prototype.cursor = function(type, x, y) {
  *
  */
 p5.prototype.frameRate = function(fps) {
-  if (typeof fps !== 'number' || fps <= 0) {
+  if (typeof fps !== 'number' || fps < 0) {
     return this._frameRate;
   } else {
     this._setProperty('_targetFrameRate', fps);

src/core/p5.Renderer2D.js

@@ -25,8 +25,8 @@ p5.Renderer2D = function(elt, pInst, isMainCanvas){
 p5.Renderer2D.prototype = Object.create(p5.Renderer.prototype);
 
 p5.Renderer2D.prototype._applyDefaults = function() {
-  this.drawingContext.fillStyle = constants._DEFAULT_FILL;
-  this.drawingContext.strokeStyle = constants._DEFAULT_STROKE;
+  this._setFill(constants._DEFAULT_FILL);
+  this._setStroke(constants._DEFAULT_STROKE);
   this.drawingContext.lineCap = constants.ROUND;
   this.drawingContext.font = 'normal 12px sans-serif';
 };
@@ -50,14 +50,14 @@ p5.Renderer2D.prototype.background = function() {
   if (arguments[0] instanceof p5.Image) {
     this._pInst.image(arguments[0], 0, 0, this.width, this.height);
   } else {
-    var curFill = this.drawingContext.fillStyle;
+    var curFill = this._getFill();
     // create background rect
     var color = this._pInst.color.apply(this, arguments);
     var newFill = color.toString();
-    this.drawingContext.fillStyle = newFill;
+    this._setFill(newFill);
     this.drawingContext.fillRect(0, 0, this.width, this.height);
     // reset fill
-    this.drawingContext.fillStyle = curFill;
+    this._setFill(curFill);
   }
   this.drawingContext.restore();
 };
@@ -67,16 +67,13 @@ p5.Renderer2D.prototype.clear = function() {
 };
 
 p5.Renderer2D.prototype.fill = function() {
-
-  var ctx = this.drawingContext;
   var color = this._pInst.color.apply(this, arguments);
-  ctx.fillStyle = color.toString();
+  this._setFill(color.toString());
 };
 
 p5.Renderer2D.prototype.stroke = function() {
-  var ctx = this.drawingContext;
   var color = this._pInst.color.apply(this, arguments);
-  ctx.strokeStyle = color.toString();
+  this._setStroke(color.toString());
 };
 
 //////////////////////////////////////////////
@@ -453,11 +450,11 @@ p5.Renderer2D.prototype.ellipse = function(args) {
     w = args[2],
     h = args[3];
   if (doFill && !doStroke) {
-    if(ctx.fillStyle === styleEmpty) {
+    if(this._getFill() === styleEmpty) {
       return this;
     }
   } else if (!doFill && doStroke) {
-    if(ctx.strokeStyle === styleEmpty) {
+    if(this._getStroke() === styleEmpty) {
       return this;
     }
   }
@@ -487,7 +484,7 @@ p5.Renderer2D.prototype.line = function(x1, y1, x2, y2) {
   var ctx = this.drawingContext;
   if (!this._doStroke) {
     return this;
-  } else if(ctx.strokeStyle === styleEmpty){
+  } else if(this._getStroke() === styleEmpty){
     return this;
   }
   // Translate the line by (0.5, 0.5) to draw it crisp
@@ -506,16 +503,13 @@ p5.Renderer2D.prototype.line = function(x1, y1, x2, y2) {
 
 p5.Renderer2D.prototype.point = function(x, y) {
   var ctx = this.drawingContext;
-  var s = ctx.strokeStyle;
-  var f = ctx.fillStyle;
   if (!this._doStroke) {
     return this;
-  } else if(ctx.strokeStyle === styleEmpty){
+  } else if(this._getStroke() === styleEmpty){
     return this;
   }
   x = Math.round(x);
   y = Math.round(y);
-  ctx.fillStyle = s;
   if (ctx.lineWidth > 1) {
     ctx.beginPath();
     ctx.arc(
@@ -530,19 +524,18 @@ p5.Renderer2D.prototype.point = function(x, y) {
   } else {
     ctx.fillRect(x, y, 1, 1);
   }
-  ctx.fillStyle = f;
 };
 
 p5.Renderer2D.prototype.quad =
   function(x1, y1, x2, y2, x3, y3, x4, y4) {
   var ctx = this.drawingContext;
   var doFill = this._doFill, doStroke = this._doStroke;
   if (doFill && !doStroke) {
-    if(ctx.fillStyle === styleEmpty) {
+    if(this._getFill() === styleEmpty) {
       return this;
     }
   } else if (!doFill && doStroke) {
-    if(ctx.strokeStyle === styleEmpty) {
+    if(this._getStroke() === styleEmpty) {
       return this;
     }
   }
@@ -573,11 +566,11 @@ p5.Renderer2D.prototype.rect = function(args) {
   var ctx = this.drawingContext;
   var doFill = this._doFill, doStroke = this._doStroke;
   if (doFill && !doStroke) {
-    if(ctx.fillStyle === styleEmpty) {
+    if(this._getFill() === styleEmpty) {
       return this;
     }
   } else if (!doFill && doStroke) {
-    if(ctx.strokeStyle === styleEmpty) {
+    if(this._getStroke() === styleEmpty) {
       return this;
     }
   }
@@ -638,11 +631,11 @@ p5.Renderer2D.prototype.triangle = function(args) {
   var x2=args[2], y2=args[3];
   var x3=args[4], y3=args[5];
   if (doFill && !doStroke) {
-    if(ctx.fillStyle === styleEmpty) {
+    if(this._getFill() === styleEmpty) {
       return this;
     }
   } else if (!doFill && doStroke) {
-    if(ctx.strokeStyle === styleEmpty) {
+    if(this._getStroke() === styleEmpty) {
       return this;
     }
   }
@@ -798,31 +791,35 @@ function (mode, vertices, isCurve, isBezier,
       }
     } else if (shapeKind === constants.TRIANGLE_FAN) {
       if (numVerts > 2) {
+        // For performance reasons, try to batch as many of the
+        // fill and stroke calls as possible.
         this.drawingContext.beginPath();
-        this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
-        this.drawingContext.lineTo(vertices[1][0], vertices[1][1]);
-        this.drawingContext.lineTo(vertices[2][0], vertices[2][1]);
-        if (this._doFill) {
-          this._pInst.fill(vertices[2][5]);
-        }
-        if (this._doStroke) {
-          this._pInst.stroke(vertices[2][6]);
-        }
-        this._doFillStrokeClose();
-        for (i = 3; i < numVerts; i++) {
+        for (i = 2; i < numVerts; i++) {
           v = vertices[i];
-          this.drawingContext.beginPath();
           this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
           this.drawingContext.lineTo(vertices[i - 1][0], vertices[i - 1][1]);
           this.drawingContext.lineTo(v[0], v[1]);
-          if (this._doFill) {
-            this._pInst.fill(v[5]);
-          }
-          if (this._doStroke) {
-            this._pInst.stroke(v[6]);
+          this.drawingContext.lineTo(vertices[0][0], vertices[0][1]);
+          // If the next colour is going to be different, stroke / fill now
+          if (i < numVerts - 1) {
+            if ( (this._doFill && v[5] !== vertices[i + 1][5]) ||
+                 (this._doStroke && v[6] !== vertices[i + 1][6])) {
+              if (this._doFill) {
+                this._pInst.fill(v[5]);
+                this.drawingContext.fill();
+                this._pInst.fill(vertices[i + 1][5]);
+              }
+              if (this._doStroke) {
+                this._pInst.stroke(v[6]);
+                this.drawingContext.stroke();
+                this._pInst.stroke(vertices[i + 1][6]);
+              }
+              this.drawingContext.closePath();
+              this.drawingContext.beginPath(); // Begin the next one
+            }
           }
-          this._doFillStrokeClose();
         }
+        this._doFillStrokeClose();
       }
     } else if (shapeKind === constants.QUADS) {
       for (i = 0; i + 3 < numVerts; i += 4) {
@@ -954,13 +951,29 @@ p5.Renderer2D.prototype.strokeWeight = function(w) {
 };
 
 p5.Renderer2D.prototype._getFill = function(){
-  return this.drawingContext.fillStyle;
+  return this._cachedFillStyle;
+};
+
+p5.Renderer2D.prototype._setFill = function(fillStyle){
+  if (fillStyle !== this._cachedFillStyle) {
+    this.drawingContext.fillStyle = fillStyle;
+    this._cachedFillStyle = fillStyle;
+  }
 };
 
 p5.Renderer2D.prototype._getStroke = function(){
-  return this.drawingContext.strokeStyle;
+  return this._cachedStrokeStyle;
 };
 
+p5.Renderer2D.prototype._setStroke = function(strokeStyle){
+  if (strokeStyle !== this._cachedStrokeStyle) {
+    this.drawingContext.strokeStyle = strokeStyle;
+    this._cachedStrokeStyle = strokeStyle;
+  }
+};
+
+
+
 //////////////////////////////////////////////
 // SHAPE | Curves
 //////////////////////////////////////////////
@@ -1187,8 +1200,9 @@ p5.Renderer2D.prototype._renderText = function(p, line, x, y, maxY) {
     if (this._doFill) {
 
       // if fill hasn't been set by user, use default text fill
-      this.drawingContext.fillStyle =  this._fillSet ?
-        this.drawingContext.fillStyle : constants._DEFAULT_TEXT_FILL;
+      if (! this._fillSet) {
+        this._setFill(constants._DEFAULT_TEXT_FILL);
+      }
 
       this.drawingContext.fillText(line, x, y);
     }
@@ -1287,6 +1301,9 @@ p5.Renderer2D.prototype.push = function() {
 
 p5.Renderer2D.prototype.pop = function() {
   this.drawingContext.restore();
+  // Re-cache the fill / stroke state
+  this._cachedFillStyle = this.drawingContext.fillStyle;
+  this._cachedStrokeStyle = this.drawingContext.strokeStyle;
 };
 
 module.exports = p5.Renderer2D;

src/core/rendering.js

@@ -121,6 +121,9 @@ p5.prototype.createCanvas = function(w, h, renderer) {
  * and draw will be called immediately, allowing the sketch to re-render itself
  * in the resized canvas.
  * @method resizeCanvas
+ * @param  {Number} w width of the canvas
+ * @param  {Number} h height of the canvas
+ * @param  {Boolean} noRedraw don't redraw the canvas immediately
  * @example
  * <div class="norender"><code>
  * function setup() {

src/image/loading_displaying.js

@@ -66,8 +66,8 @@ require('../core/error_helpers');
 p5.prototype.loadImage = function(path, successCallback, failureCallback) {
   var img = new Image();
   var pImg = new p5.Image(1, 1, this);
-  var decrementPreload = p5._getDecrementPreload.apply(this, arguments);
 
+  var self = this;
   img.onload = function() {
     pImg.width = pImg.canvas.width = img.width;
     pImg.height = pImg.canvas.height = img.height;
@@ -78,15 +78,12 @@ p5.prototype.loadImage = function(path, successCallback, failureCallback) {
     if (typeof successCallback === 'function') {
       successCallback(pImg);
     }
-    if (decrementPreload && (successCallback !== decrementPreload)) {
-      decrementPreload();
-    }
+
+    self._decrementPreload();
   };
   img.onerror = function(e) {
     p5._friendlyFileLoadError(0,img.src);
-    // don't get failure callback mixed up with decrementPreload
-    if ((typeof failureCallback === 'function') &&
-      (failureCallback !== decrementPreload)) {
+    if (typeof failureCallback === 'function') {
       failureCallback(e);
     }
   };