Merge pull request #2502 from Spongman/fix-createGraphics

fix createGraphics(WEBGL) crash

Author: lmccart

src/color/creating_reading.js

@@ -311,19 +311,10 @@ p5.prototype.color = function() {
   p5._validateParameters('color', arguments);
   if (arguments[0] instanceof p5.Color) {
     return arguments[0]; // Do nothing if argument is already a color object.
-  } else if (arguments[0] instanceof Array) {
-    if (this instanceof p5.Renderer) {
-      return new p5.Color(this, arguments[0]);
-    } else {
-      return new p5.Color(this._renderer, arguments[0]);
-    }
-  } else {
-    if (this instanceof p5.Renderer) {
-      return new p5.Color(this, arguments);
-    } else {
-      return new p5.Color(this._renderer, arguments);
-    }
   }
+
+  var args = arguments[0] instanceof Array ? arguments[0] : arguments;
+  return new p5.Color(this, args);
 };
 
 /**
@@ -439,8 +430,8 @@ p5.prototype.hue = function(c) {
 
 p5.prototype.lerpColor = function(c1, c2, amt) {
   p5._validateParameters('lerpColor', arguments);
-  var mode = this._renderer._colorMode;
-  var maxes = this._renderer._colorMaxes;
+  var mode = this._colorMode;
+  var maxes = this._colorMaxes;
   var l0, l1, l2, l3;
   var fromArray, toArray;
 

src/color/p5.Color.js

@@ -30,9 +30,9 @@ var color_conversion = require('./color_conversion');
  * @class p5.Color
  * @constructor
  */
-p5.Color = function(renderer, vals) {
+p5.Color = function(pInst, vals) {
   // Record color mode and maxes at time of construction.
-  this._storeModeAndMaxes(renderer._colorMode, renderer._colorMaxes);
+  this._storeModeAndMaxes(pInst._colorMode, pInst._colorMaxes);
 
   // Calculate normalized RGBA values.
   if (
@@ -659,7 +659,7 @@ p5.Color._parseInputs = function(r, g, b, a) {
 
     // Return if string is a named colour.
     if (namedColors[str]) {
-      return p5.Color._parseInputs.apply(this, [namedColors[str]]);
+      return p5.Color._parseInputs.call(this, namedColors[str]);
     }
 
     // Try RGBA pattern matching.

src/color/setting.js

@@ -317,10 +317,10 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
     mode === constants.HSL
   ) {
     // Set color mode.
-    this._renderer._colorMode = mode;
+    this._colorMode = mode;
 
     // Set color maxes.
-    var maxes = this._renderer._colorMaxes[mode];
+    var maxes = this._colorMaxes[mode];
     if (arguments.length === 2) {
       maxes[0] = max1; // Red
       maxes[1] = max1; // Green

src/core/core.js

@@ -180,9 +180,7 @@ var p5 = function(sketch, node, sync) {
   this._preloadCount = 0;
   this._isGlobal = false;
   this._loop = true;
-  this._bezierDetail = 20;
-  this._curveDetail = 20;
-  this._styles = [];
+  this._initializeInstanceVariables();
   this._defaultCanvasSize = {
     width: 100,
     height: 100
@@ -558,6 +556,20 @@ var p5 = function(sketch, node, sync) {
   }
 };
 
+p5.prototype._initializeInstanceVariables = function() {
+  this._styles = [];
+
+  this._bezierDetail = 20;
+  this._curveDetail = 20;
+
+  this._colorMode = constants.RGB;
+  this._colorMaxes = {
+    rgb: [255, 255, 255, 255],
+    hsb: [360, 100, 100, 1],
+    hsl: [360, 100, 100, 1]
+  };
+};
+
 // This is a pointer to our global mode p5 instance, if we're in
 // global mode.
 p5.instance = null;

src/core/p5.Graphics.js

@@ -28,11 +28,23 @@ p5.Graphics = function(w, h, renderer, pInst) {
   var r = renderer || constants.P2D;
 
   this.canvas = document.createElement('canvas');
-  var node = this._userNode || document.body;
+  var node = pInst._userNode || document.body;
   node.appendChild(this.canvas);
 
   p5.Element.call(this, this.canvas, pInst, false);
-  this._styles = [];
+
+  // bind methods and props of p5 to the new object
+  for (var p in p5.prototype) {
+    if (!this[p]) {
+      if (typeof p5.prototype[p] === 'function') {
+        this[p] = p5.prototype[p].bind(this);
+      } else {
+        this[p] = p5.prototype[p];
+      }
+    }
+  }
+
+  p5.prototype._initializeInstanceVariables.apply(this);
   this.width = w;
   this.height = h;
   this._pixelDensity = pInst._pixelDensity;
@@ -42,22 +54,11 @@ p5.Graphics = function(w, h, renderer, pInst) {
   } else {
     this._renderer = new p5.Renderer2D(this.canvas, this, false);
   }
+  pInst._elements.push(this);
 
   this._renderer.resize(w, h);
   this._renderer._applyDefaults();
 
-  pInst._elements.push(this);
-
-  // bind methods and props of p5 to the new object
-  for (var p in p5.prototype) {
-    if (!this[p]) {
-      if (typeof p5.prototype[p] === 'function') {
-        this[p] = p5.prototype[p].bind(this);
-      } else {
-        this[p] = p5.prototype[p];
-      }
-    }
-  }
   this.name = 'p5.Graphics'; // for friendly debugger system
   return this;
 };

src/core/p5.Renderer.js

@@ -56,12 +56,6 @@ p5.Renderer = function(elt, pInst, isMainCanvas) {
   this._doFill = true;
   this._strokeSet = false;
   this._fillSet = false;
-  this._colorMode = constants.RGB;
-  this._colorMaxes = {
-    rgb: [255, 255, 255, 255],
-    hsb: [360, 100, 100, 1],
-    hsl: [360, 100, 100, 1]
-  };
 };
 
 p5.Renderer.prototype = Object.create(p5.Element.prototype);

src/core/p5.Renderer2D.js

@@ -58,7 +58,7 @@ p5.Renderer2D.prototype.background = function() {
   } else {
     var curFill = this._getFill();
     // create background rect
-    var color = this._pInst.color.apply(this, arguments);
+    var color = this._pInst.color.apply(this._pInst, arguments);
     var newFill = color.toString();
     this._setFill(newFill);
     this.drawingContext.fillRect(0, 0, this.width, this.height);
@@ -73,12 +73,12 @@ p5.Renderer2D.prototype.clear = function() {
 };
 
 p5.Renderer2D.prototype.fill = function() {
-  var color = this._pInst.color.apply(this, arguments);
+  var color = this._pInst.color.apply(this._pInst, arguments);
   this._setFill(color.toString());
 };
 
 p5.Renderer2D.prototype.stroke = function() {
-  var color = this._pInst.color.apply(this, arguments);
+  var color = this._pInst.color.apply(this._pInst, arguments);
   this._setStroke(color.toString());
 };
 

src/core/structure.js

@@ -116,6 +116,19 @@ p5.prototype.loop = function() {
   this._draw();
 };
 
+function assign(dest, varArgs) {
+  for (var index = 1; index < arguments.length; index++) {
+    var src = arguments[index];
+    if (src != null) {
+      for (var key in src) {
+        if (src.hasOwnProperty(key)) {
+          dest[key] = src[key];
+        }
+      }
+    }
+  }
+}
+
 /**
  * The push() function saves the current drawing style settings and
  * transformations, while pop() restores these settings. Note that these
@@ -175,19 +188,23 @@ p5.prototype.loop = function() {
 p5.prototype.push = function() {
   this._renderer.push();
   this._styles.push({
-    _doStroke: this._renderer._doStroke,
-    _strokeSet: this._renderer._strokeSet,
-    _doFill: this._renderer._doFill,
-    _fillSet: this._renderer._fillSet,
-    _tint: this._renderer._tint,
-    _imageMode: this._renderer._imageMode,
-    _rectMode: this._renderer._rectMode,
-    _ellipseMode: this._renderer._ellipseMode,
-    _colorMode: this._renderer._colorMode,
-    _textFont: this._renderer._textFont,
-    _textLeading: this._renderer._textLeading,
-    _textSize: this._renderer._textSize,
-    _textStyle: this._renderer._textStyle
+    props: {
+      _colorMode: this._colorMode
+    },
+    renderer: {
+      _doStroke: this._renderer._doStroke,
+      _strokeSet: this._renderer._strokeSet,
+      _doFill: this._renderer._doFill,
+      _fillSet: this._renderer._fillSet,
+      _tint: this._renderer._tint,
+      _imageMode: this._renderer._imageMode,
+      _rectMode: this._renderer._rectMode,
+      _ellipseMode: this._renderer._ellipseMode,
+      _textFont: this._renderer._textFont,
+      _textLeading: this._renderer._textLeading,
+      _textSize: this._renderer._textSize,
+      _textStyle: this._renderer._textStyle
+    }
   });
 };
 
@@ -250,9 +267,8 @@ p5.prototype.push = function() {
 p5.prototype.pop = function() {
   this._renderer.pop();
   var lastS = this._styles.pop();
-  for (var prop in lastS) {
-    this._renderer[prop] = lastS[prop];
-  }
+  assign(this._renderer, lastS.renderer);
+  assign(this, lastS.props);
 };
 
 p5.prototype.pushStyle = function() {

src/webgl/light.js

@@ -263,11 +263,7 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
  */
 p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
   //@TODO: check parameters number
-  var color = this._renderer._pInst.color.apply(this._renderer._pInst, [
-    v1,
-    v2,
-    v3
-  ]);
+  var color = this._renderer._pInst.color.apply(this, [v1, v2, v3]);
 
   var _x, _y, _z;
   var v = arguments[arguments.length - 1];

test/unit/color/setting.js

@@ -22,98 +22,48 @@ suite('color/Setting', function() {
 
     test('should set mode to RGB', function() {
       myp5.colorMode(myp5.RGB);
-      assert.equal(myp5._renderer._colorMode, myp5.RGB);
+      assert.equal(myp5._colorMode, myp5.RGB);
     });
 
     test('should correctly set color RGB maxes', function() {
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.RGB], [
-        255,
-        255,
-        255,
-        255
-      ]);
+      assert.deepEqual(myp5._colorMaxes[myp5.RGB], [255, 255, 255, 255]);
       myp5.colorMode(myp5.RGB, 1, 1, 1);
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.RGB], [1, 1, 1, 255]);
+      assert.deepEqual(myp5._colorMaxes[myp5.RGB], [1, 1, 1, 255]);
       myp5.colorMode(myp5.RGB, 1);
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.RGB], [1, 1, 1, 1]);
+      assert.deepEqual(myp5._colorMaxes[myp5.RGB], [1, 1, 1, 1]);
       myp5.colorMode(myp5.RGB, 255, 255, 255, 1);
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.RGB], [
-        255,
-        255,
-        255,
-        1
-      ]);
+      assert.deepEqual(myp5._colorMaxes[myp5.RGB], [255, 255, 255, 1]);
       myp5.colorMode(myp5.RGB, 255);
     });
 
     test('should set mode to HSL', function() {
       myp5.colorMode(myp5.HSL);
-      assert.equal(myp5._renderer._colorMode, myp5.HSL);
+      assert.equal(myp5._colorMode, myp5.HSL);
     });
 
     test('should correctly set color HSL maxes', function() {
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.HSL], [
-        360,
-        100,
-        100,
-        1
-      ]);
+      assert.deepEqual(myp5._colorMaxes[myp5.HSL], [360, 100, 100, 1]);
       myp5.colorMode(myp5.HSL, 255, 255, 255);
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.HSL], [
-        255,
-        255,
-        255,
-        1
-      ]);
+      assert.deepEqual(myp5._colorMaxes[myp5.HSL], [255, 255, 255, 1]);
       myp5.colorMode(myp5.HSL, 360);
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.HSL], [
-        360,
-        360,
-        360,
-        360
-      ]);
+      assert.deepEqual(myp5._colorMaxes[myp5.HSL], [360, 360, 360, 360]);
       myp5.colorMode(myp5.HSL, 360, 100, 100, 1);
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.HSL], [
-        360,
-        100,
-        100,
-        1
-      ]);
+      assert.deepEqual(myp5._colorMaxes[myp5.HSL], [360, 100, 100, 1]);
     });
 
     test('should set mode to HSB', function() {
       myp5.colorMode(myp5.HSB);
-      assert.equal(myp5._renderer._colorMode, myp5.HSB);
+      assert.equal(myp5._colorMode, myp5.HSB);
     });
 
     test('should correctly set color HSB maxes', function() {
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.HSB], [
-        360,
-        100,
-        100,
-        1
-      ]);
+      assert.deepEqual(myp5._colorMaxes[myp5.HSB], [360, 100, 100, 1]);
       myp5.colorMode(myp5.HSB, 255, 255, 255);
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.HSB], [
-        255,
-        255,
-        255,
-        1
-      ]);
+      assert.deepEqual(myp5._colorMaxes[myp5.HSB], [255, 255, 255, 1]);
       myp5.colorMode(myp5.HSB, 360);
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.HSB], [
-        360,
-        360,
-        360,
-        360
-      ]);
+      assert.deepEqual(myp5._colorMaxes[myp5.HSB], [360, 360, 360, 360]);
       myp5.colorMode(myp5.HSB, 360, 100, 100, 1);
-      assert.deepEqual(myp5._renderer._colorMaxes[myp5.HSB], [
-        360,
-        100,
-        100,
-        1
-      ]);
+      assert.deepEqual(myp5._colorMaxes[myp5.HSB], [360, 100, 100, 1]);
     });
   });
 });