[p5.js 2.0] State machines and renderer refactoring

src/core/main.js

@@ -90,8 +90,6 @@ class p5 {
     this._lcg_random_state = null; // NOTE: move to random.js
     this._gaussian_previous = false; // NOTE: move to random.js
 
-    this._loadingScreenId = 'p5_loading';
-
     if (window.DeviceOrientationEvent) {
       this._events.deviceorientation = null;
     }
@@ -351,10 +349,7 @@ class p5 {
     if(this._startListener){
       window.removeEventListener('load', this._startListener, false);
     }
-    const loadingScreen = document.getElementById(this._loadingScreenId);
-    if (loadingScreen) {
-      loadingScreen.parentNode.removeChild(loadingScreen);
-    }
+
     if (this._curElement) {
       // stop draw
       this._loop = false;

src/core/p5.Renderer.js

@@ -61,6 +61,10 @@ p5.Renderer = class Renderer {
     this._pInst.height = this.height;
   }
 
+  remove() {
+
+  }
+
   // Makes a shallow copy of the current states
   // and push it into the push pop stack
   push() {

src/core/p5.Renderer2D.js

@@ -15,22 +15,20 @@ const styleEmpty = 'rgba(0,0,0,0)';
 class Renderer2D extends Renderer {
   constructor(elt, pInst, isMainCanvas) {
     super(elt, pInst, isMainCanvas);
-    this.elt = elt;
-    this.canvas = elt;
-    this.drawingContext = this.canvas.getContext('2d');
-    this._pInst.drawingContext = this.drawingContext;
 
-    if (isMainCanvas) {
-      // for pixel method sharing with pimage
-      this._pInst._curElement = this;
-      this._pInst.canvas = this.canvas;
-    } else {
-      // hide if offscreen buffer by default
-      this.canvas.style.display = 'none';
-    }
+    this._isMainCanvas = isMainCanvas;
+
+    // if (isMainCanvas) {
+    //   // for pixel method sharing with pimage
+    //   this._pInst._curElement = this;
+    //   this._pInst.canvas = this.canvas;
+    // } else {
+    //   // hide if offscreen buffer by default
+    //   this.canvas.style.display = 'none';
+    // }
 
     // Extend renderer with methods of p5.Element with getters
-    this.wrappedElt = new p5.Element(elt, pInst);
+    // this.wrappedElt = new p5.Element(elt, pInst);
     for (const p of Object.getOwnPropertyNames(p5.Element.prototype)) {
       if (p !== 'constructor' && p[0] !== '_') {
         Object.defineProperty(this, p, {
@@ -42,18 +40,58 @@ class Renderer2D extends Renderer {
     }
   }
 
-  // NOTE: renderer won't be created until instance createCanvas was called
-  // This createCanvas should handle the HTML stuff while other createCanvas
-  // be generic
   createCanvas(w, h, canvas) {
     super.createCanvas(w, h);
-    // this.canvas = this.elt = canvas || document.createElement('canvas');
-    // this.drawingContext = this.canvas.getContext('2d');
-    // this._pInst.drawingContext = this.drawingContext;
+
+    // Create new canvas
+    this.canvas = this.elt = canvas || document.createElement('canvas');
+    ////////
+    if (this._isMainCanvas) {
+      // for pixel method sharing with pimage
+      this._pInst._curElement = this;
+      this._pInst.canvas = this.canvas;
+    } else {
+      // hide if offscreen buffer by default
+      this.canvas.style.display = 'none';
+    }
+    ////////
+    this.elt.id = 'defaultCanvas0';
+    this.elt.classList.add('p5Canvas');
+
+    // Set canvas size
+    this.elt.width = w * this._pInst._pixelDensity;
+    this.elt.height = h * this._pInst._pixelDensity;
+    this.elt.style.width = `${w}px`;
+    this.elt.style.height = `${h}px`;
+
+    // Attach canvas element to DOM
+    if (this._pInst._userNode) {
+      // user input node case
+      this._pInst._userNode.appendChild(this.elt);
+    } else {
+      //create main element
+      if (document.getElementsByTagName('main').length === 0) {
+        let m = document.createElement('main');
+        document.body.appendChild(m);
+      }
+      //append canvas to main
+      document.getElementsByTagName('main')[0].appendChild(this.elt);
+    }
+
+    // Get and store drawing context
+    this.drawingContext = this.canvas.getContext('2d');
+    this._pInst.drawingContext = this.drawingContext;
+
+    // Set and return p5.Element
+    this.wrappedElt = new p5.Element(this.elt, this._pInst);
 
     return this.wrappedElt;
   }
 
+  remove(){
+    this.wrappedElt.remove();
+  }
+
   getFilterGraphicsLayer() {
     // create hidden webgl renderer if it doesn't exist
     if (!this.filterGraphicsLayer) {
@@ -142,6 +180,8 @@ class Renderer2D extends Renderer {
         this.blendMode(this._cachedBlendMode);
       }
 
+      console.log('background', this.drawingContext.fillStyle, this.drawingContext.canvas);
+      console.trace();
       this.drawingContext.fillRect(0, 0, this.width, this.height);
       // reset fill
       this._setFill(curFill);
@@ -1205,6 +1245,8 @@ class Renderer2D extends Renderer {
   _setFill(fillStyle) {
     if (fillStyle !== this._cachedFillStyle) {
       this.drawingContext.fillStyle = fillStyle;
+      // console.log('here', this.drawingContext.fillStyle);
+      // console.trace();
       this._cachedFillStyle = fillStyle;
     }
   }

src/core/rendering.js

@@ -140,7 +140,7 @@ p5.prototype.createCanvas = function (w, h, renderer, canvas) {
   }
 
 
-
+  /////////////////////////////////
   let r;
   if (arguments[2] instanceof HTMLCanvasElement) {
     renderer = constants.P2D;
@@ -149,90 +149,103 @@ p5.prototype.createCanvas = function (w, h, renderer, canvas) {
     r = renderer || constants.P2D;
   }
 
-  let c;
+  // let c;
 
-  if (canvas) {
-    // NOTE: this is to guard against multiple default canvas being created
-    c = document.getElementById(defaultId);
-    if (c) {
-      c.parentNode.removeChild(c); //replace the existing defaultCanvas
-    }
-    c = canvas;
-    this._defaultGraphicsCreated = false;
-  } else {
-    if (r === constants.WEBGL) {
-      c = document.getElementById(defaultId);
-      if (c) {
-        //if defaultCanvas already exists
-        c.parentNode.removeChild(c); //replace the existing defaultCanvas
-        const thisRenderer = this._renderer;
-        this._elements = this._elements.filter(e => e !== thisRenderer);
-      }
-      c = document.createElement('canvas');
-      c.id = defaultId;
-      c.classList.add(defaultClass);
-    } else {
-      if (!this._defaultGraphicsCreated) {
-        if (canvas) {
-          c = canvas;
-        } else {
-          c = document.createElement('canvas');
-        }
-        let i = 0;
-        while (document.getElementById(`defaultCanvas${i}`)) {
-          i++;
-        }
-        defaultId = `defaultCanvas${i}`;
-        c.id = defaultId;
-        c.classList.add(defaultClass);
-      } else if (
-        this._renderer &&
-        Object.getPrototypeOf(this._renderer) !== renderers[r].prototype
-      ) {
-        // Handle createCanvas() called with 2D mode after a 3D canvas is made
-        if (this.canvas.parentNode) {
-          this.canvas.parentNode.removeChild(this.canvas); //replace the existing defaultCanvas
-        }
-        const thisRenderer = this._renderer;
-        this._elements = this._elements.filter(e => e !== thisRenderer);
-        c = document.createElement('canvas');
-        c.id = defaultId;
-        c.classList.add(defaultClass);
-      } else {
-        // resize the default canvas if new one is created
-        c = this.canvas;
-      }
-    }
+  // if (canvas) {
+  //   // NOTE: this is to guard against multiple default canvas being created
+  //   c = document.getElementById(defaultId);
+  //   if (c) {
+  //     c.parentNode.removeChild(c); //replace the existing defaultCanvas
+  //   }
+  //   c = canvas;
+  //   this._defaultGraphicsCreated = false;
+  // } else {
+  //   if (r === constants.WEBGL) {
+  //     c = document.getElementById(defaultId);
+  //     if (c) {
+  //       //if defaultCanvas already exists
+  //       c.parentNode.removeChild(c); //replace the existing defaultCanvas
+  //       const thisRenderer = this._renderer;
+  //       this._elements = this._elements.filter(e => e !== thisRenderer);
+  //     }
+  //     c = document.createElement('canvas');
+  //     c.id = defaultId;
+  //     c.classList.add(defaultClass);
+  //   } else {
+  //     if (!this._defaultGraphicsCreated) {
+  //       if (canvas) {
+  //         c = canvas;
+  //       } else {
+  //         c = document.createElement('canvas');
+  //       }
+  //       let i = 0;
+  //       while (document.getElementById(`defaultCanvas${i}`)) {
+  //         i++;
+  //       }
+  //       defaultId = `defaultCanvas${i}`;
+  //       c.id = defaultId;
+  //       c.classList.add(defaultClass);
+  //     } else if (
+  //       this._renderer &&
+  //       Object.getPrototypeOf(this._renderer) !== renderers[r].prototype
+  //     ) {
+  //       // Handle createCanvas() called with 2D mode after a 3D canvas is made
+  //       if (this.canvas.parentNode) {
+  //         this.canvas.parentNode.removeChild(this.canvas); //replace the existing defaultCanvas
+  //       }
+  //       const thisRenderer = this._renderer;
+  //       this._elements = this._elements.filter(e => e !== thisRenderer);
+  //       c = document.createElement('canvas');
+  //       c.id = defaultId;
+  //       c.classList.add(defaultClass);
+  //     } else {
+  //       // resize the default canvas if new one is created
+  //       c = this.canvas;
+  //     }
+  //   }
 
-    // set to invisible if still in setup (to prevent flashing with manipulate)
-    if (!this._setupDone) {
-      c.dataset.hidden = true; // tag to show later
-      c.style.visibility = 'hidden';
-    }
+  //   // set to invisible if still in setup (to prevent flashing with manipulate)
+  //   // if (!this._setupDone) {
+  //   //   c.dataset.hidden = true; // tag to show later
+  //   //   c.style.visibility = 'hidden';
+  //   // }
 
-    if (this._userNode) {
-      // user input node case
-      this._userNode.appendChild(c);
-    } else {
-      //create main element
-      if (document.getElementsByTagName('main').length === 0) {
-        let m = document.createElement('main');
-        document.body.appendChild(m);
-      }
-      //append canvas to main
-      document.getElementsByTagName('main')[0].appendChild(c);
-    }
-  }
+  //   if (this._userNode) {
+  //     // user input node case
+  //     this._userNode.appendChild(c);
+  //   } else {
+  //     //create main element
+  //     if (document.getElementsByTagName('main').length === 0) {
+  //       let m = document.createElement('main');
+  //       document.body.appendChild(m);
+  //     }
+  //     //append canvas to main
+  //     document.getElementsByTagName('main')[0].appendChild(c);
+  //   }
+  // }
+
+  // if (this._userNode) {
+  //   // user input node case
+  //   this._userNode.appendChild(canvas);
+  // } else {
+  //   //create main element
+  //   if (document.getElementsByTagName('main').length === 0) {
+  //     let m = document.createElement('main');
+  //     document.body.appendChild(m);
+  //   }
+  //   //append canvas to main
+  //   document.getElementsByTagName('main')[0].appendChild(canvas);
+  // }
 
   // Init our graphics renderer
-  this._renderer = new renderers[r](c, this, true);
+  if(this._renderer) this._renderer.remove();
+  this._renderer = new renderers[r](canvas, this, true);
+  const element = this._renderer.createCanvas(w, h, canvas);
   this._defaultGraphicsCreated = true;
   this._elements.push(this._renderer);
-  this._renderer.resize(w, h);
   this._renderer._applyDefaults();
-  this._renderer.createCanvas(w, h, canvas);
-  // return this._renderer.createCanvas(w, h, canvas);
-  return this._renderer;
+  // return this._renderer;
+  return element;
 };
 
 /**

src/webgl/p5.RendererGL.js

@@ -437,6 +437,7 @@ p5.RendererGL = class RendererGL extends Renderer {
     super(elt, pInst, isMainCanvas);
     this.elt = elt;
     this.canvas = elt;
+    this.wrappedElt = new p5.Element(elt, pInst);
     this._setAttributeDefaults(pInst);
     this._initContext();
     this.isP3D = true; //lets us know we're in 3d mode
@@ -678,6 +679,11 @@ p5.RendererGL = class RendererGL extends Renderer {
     this._curShader = undefined;
   }
 
+  createCanvas(w, h, canvas){
+    super.createCanvas(w, h);
+    return this.wrappedElt;
+  }
+
   /**
     * Starts creating a new p5.Geometry. Subsequent shapes drawn will be added
      * to the geometry and then returned when