Selectively attach renderer properties to p5.Graphics

Author: limzykenneth

preview/index.html

@@ -20,8 +20,12 @@
     import p5 from '../src/app.js';
 
     const sketch = function (p) {
+      let g, f;
+
       p.setup = function () {
         p.createCanvas(200, 200);
+        g = p.createGraphics(200, 200);
+        f = p.createGraphics(200, 200, p.WEBGL);
       };
 
       p.draw = function () {
@@ -31,6 +35,10 @@
         p.fill('white');
         p.textSize(30);
         p.text('hello', 10, 30);
+
+        // f.fill('red');
+        f.sphere();
+        p.image(f, 0, 0);
       };
     };
 

src/core/p5.Graphics.js

@@ -30,39 +30,6 @@ class Graphics {
     this._pInst = pInst;
     this._renderer = new renderers[r](this._pInst, w, h, false, canvas);
 
-    // Attach renderer methods
-    // for(const p of Object.getOwnPropertyNames(p5.renderers[r].prototype)) {
-    //   if(
-    //     p !== 'constructor' &&
-    //     p[0] !== '_' &&
-    //     !(p in this) &&
-    //     typeof this._renderer[p] === 'function'
-    //   ){
-    //     this[p] = this._renderer[p].bind(this._renderer);
-    //   }
-    // }
-
-    // Attach renderer properties
-    for (const p in this._renderer) {
-      if(p[0] === '_' || typeof this._renderer[p] === 'function') continue;
-      Object.defineProperty(this, p, {
-        get(){
-          return this._renderer?.[p];
-        }
-      })
-    }
-
-    // bind methods and props of p5 to the new object
-    // for (const p in p5.prototype) {
-    //   if (!this[p]) {
-    //     // console.log(p);
-    //     if (typeof p5.prototype[p] === 'function') {
-    //       this[p] = p5.prototype[p].bind(this);
-    //     } else if(p !== 'deltaTime') {
-    //       this[p] = p5.prototype[p];
-    //     }
-    //   }
-    // }
     p5.prototype._initializeInstanceVariables.apply(this);
 
     this._renderer._applyDefaults();
@@ -73,21 +40,25 @@ class Graphics {
     return this._pInst.deltaTime;
   }
 
-  // get canvas(){
-  //   return this._renderer.canvas;
-  // }
+  get canvas(){
+    return this._renderer?.canvas;
+  }
 
-  // get drawingContext(){
-  //   return this._renderer.drawingContext;
-  // }
+  get drawingContext(){
+    return this._renderer.drawingContext;
+  }
 
-  // get width(){
-  //   return this._renderer.width;
-  // }
+  get width(){
+    return this._renderer?.width;
+  }
+
+  get height(){
+    return this._renderer?.height;
+  }
 
-  // get height(){
-  //   return this._renderer.height;
-  // }
+  get pixels(){
+    return this._renderer?.pixels;
+  }
 
   pixelDensity(val){
     let returnValue;

src/io/files.js

@@ -1905,7 +1905,7 @@ function files(p5, fn){
       // otherwise, parse the arguments
 
       // if first param is a p5Graphics, then saveCanvas
-      fn.saveCanvas(args[0].elt, args[1], args[2]);
+      fn.saveCanvas(args[0].canvas, args[1], args[2]);
       return;
     } else if (args.length === 1 && typeof args[0] === 'string') {
       // if 1st param is String and only one arg, assume it is canvas filename

src/webgl/p5.Texture.js

@@ -96,12 +96,11 @@ class Texture {
       textureData = this.src.canvas;
     } else if (
       this.isSrcMediaElement ||
-    this.isSrcP5Graphics ||
-    this.isSrcHTMLElement
+      this.isSrcHTMLElement
     ) {
     // if param is a video HTML element
       textureData = this.src.elt;
-    } else if (this.isSrcP5Renderer) {
+    } else if (this.isSrcP5Graphics || this.isSrcP5Renderer) {
       textureData = this.src.canvas;
     } else if (this.isImageData) {
       textureData = this.src;