Use class imports wherever possible

Author: limzykenneth

src/core/p5.Graphics.js

@@ -44,7 +44,7 @@ class Graphics {
 
     // Attach renderer properties
     for (const p in this._renderer) {
-      if(p[0] === '_') continue;
+      if(p[0] === '_' || typeof this._renderer[p] === 'function') continue;
       Object.defineProperty(this, p, {
         get(){
           return this._renderer?.[p];

src/webgl/3d_primitives.js

@@ -8,6 +8,9 @@
 
 import * as constants from '../core/constants';
 import { RendererGL } from './p5.RendererGL';
+import { Vector } from '../math/p5.Vector';
+import { Geometry } from './p5.Geometry';
+import { Matrix } from './p5.Matrix';
 
 function primitives3D(p5, fn){
   /**
@@ -983,13 +986,13 @@ function primitives3D(p5, fn){
           v = i / this.detailY;
           for (let j = 0; j <= this.detailX; j++) {
             u = j / this.detailX;
-            p = new p5.Vector(u - 0.5, v - 0.5, 0);
+            p = new Vector(u - 0.5, v - 0.5, 0);
             this.vertices.push(p);
             this.uvs.push(u, v);
           }
         }
       };
-      const planeGeom = new p5.Geometry(detailX, detailY, _plane);
+      const planeGeom = new Geometry(detailX, detailY, _plane);
       planeGeom.computeFaces().computeNormals();
       if (detailX <= 1 && detailY <= 1) {
         planeGeom._makeTriangleEdges()._edgesToVertices();
@@ -1192,7 +1195,7 @@ function primitives3D(p5, fn){
             //inspired by lightgl:
             //https://github.com/evanw/lightgl.js
             //octants:https://en.wikipedia.org/wiki/Octant_(solid_geometry)
-            const octant = new p5.Vector(
+            const octant = new Vector(
               ((d & 1) * 2 - 1) / 2,
               ((d & 2) - 1) / 2,
               ((d & 4) / 2 - 1) / 2
@@ -1204,7 +1207,7 @@ function primitives3D(p5, fn){
           this.faces.push([v + 2, v + 1, v + 3]);
         });
       };
-      const boxGeom = new p5.Geometry(detailX, detailY, _box);
+      const boxGeom = new Geometry(detailX, detailY, _box);
       boxGeom.computeNormals();
       if (detailX <= 4 && detailY <= 4) {
         boxGeom._edgesToVertices();
@@ -1417,16 +1420,16 @@ function primitives3D(p5, fn){
         const cur = Math.cos(ur);
 
         //VERTICES
-        this.vertices.push(new p5.Vector(sur * ringRadius, y, cur * ringRadius));
+        this.vertices.push(new Vector(sur * ringRadius, y, cur * ringRadius));
 
         //VERTEX NORMALS
         let vertexNormal;
         if (yy < 0) {
-          vertexNormal = new p5.Vector(0, -1, 0);
+          vertexNormal = new Vector(0, -1, 0);
         } else if (yy > detailY && topRadius) {
-          vertexNormal = new p5.Vector(0, 1, 0);
+          vertexNormal = new Vector(0, 1, 0);
         } else {
-          vertexNormal = new p5.Vector(sur * cosSlant, sinSlant, cur * cosSlant);
+          vertexNormal = new Vector(sur * cosSlant, sinSlant, cur * cosSlant);
         }
         this.vertexNormals.push(vertexNormal);
         //UVs
@@ -1944,7 +1947,7 @@ function primitives3D(p5, fn){
 
     const gId = `cone|${detailX}|${detailY}|${cap}`;
     if (!this._renderer.geometryInHash(gId)) {
-      const coneGeom = new p5.Geometry(detailX, detailY);
+      const coneGeom = new Geometry(detailX, detailY);
       _truncatedCone.call(coneGeom, 1, 0, 1, detailX, detailY, cap, false);
       if (detailX <= 24 && detailY <= 16) {
         coneGeom._makeTriangleEdges()._edgesToVertices();
@@ -2162,7 +2165,7 @@ function primitives3D(p5, fn){
           }
         }
       };
-      const ellipsoidGeom = new p5.Geometry(detailX, detailY, _ellipsoid);
+      const ellipsoidGeom = new Geometry(detailX, detailY, _ellipsoid);
       ellipsoidGeom.computeFaces();
       if (detailX <= 24 && detailY <= 24) {
         ellipsoidGeom._makeTriangleEdges()._edgesToVertices();
@@ -2370,21 +2373,21 @@ function primitives3D(p5, fn){
             const cosTheta = Math.cos(theta);
             const sinTheta = Math.sin(theta);
 
-            const p = new p5.Vector(
+            const p = new Vector(
               r * cosTheta,
               r * sinTheta,
               tubeRatio * sinPhi
             );
 
-            const n = new p5.Vector(cosPhi * cosTheta, cosPhi * sinTheta, sinPhi);
+            const n = new Vector(cosPhi * cosTheta, cosPhi * sinTheta, sinPhi);
 
             this.vertices.push(p);
             this.vertexNormals.push(n);
             this.uvs.push(u, v);
           }
         }
       };
-      const torusGeom = new p5.Geometry(detailX, detailY, _torus);
+      const torusGeom = new Geometry(detailX, detailY, _torus);
       torusGeom.computeFaces();
       if (detailX <= 24 && detailY <= 16) {
         torusGeom._makeTriangleEdges()._edgesToVertices();
@@ -2443,7 +2446,7 @@ function primitives3D(p5, fn){
   RendererGL.prototype.point = function(x, y, z = 0) {
 
     const _vertex = [];
-    _vertex.push(new p5.Vector(x, y, z));
+    _vertex.push(new Vector(x, y, z));
     this._drawPoints(_vertex, this.immediateMode.buffers.point);
 
     return this;
@@ -2461,15 +2464,15 @@ function primitives3D(p5, fn){
     if (!this.geometryInHash(gId)) {
       const _triangle = function() {
         const vertices = [];
-        vertices.push(new p5.Vector(0, 0, 0));
-        vertices.push(new p5.Vector(1, 0, 0));
-        vertices.push(new p5.Vector(0, 1, 0));
+        vertices.push(new Vector(0, 0, 0));
+        vertices.push(new Vector(1, 0, 0));
+        vertices.push(new Vector(0, 1, 0));
         this.edges = [[0, 1], [1, 2], [2, 0]];
         this.vertices = vertices;
         this.faces = [[0, 1, 2]];
         this.uvs = [0, 0, 1, 0, 1, 1];
       };
-      const triGeom = new p5.Geometry(1, 1, _triangle);
+      const triGeom = new Geometry(1, 1, _triangle);
       triGeom._edgesToVertices();
       triGeom.computeNormals();
       this.createBuffers(gId, triGeom);
@@ -2485,7 +2488,7 @@ function primitives3D(p5, fn){
     try {
       // triangle orientation.
       const orientation = Math.sign(x1*y2-x2*y1 + x2*y3-x3*y2 + x3*y1-x1*y3);
-      const mult = new p5.Matrix([
+      const mult = new Matrix([
         x2 - x1, y2 - y1, 0, 0, // the resulting unit X-axis
         x3 - x1, y3 - y1, 0, 0, // the resulting unit Y-axis
         0, 0, orientation, 0,   // the resulting unit Z-axis (Reflect the specified order of vertices)
@@ -2544,7 +2547,7 @@ function primitives3D(p5, fn){
         if (start.toFixed(10) !== stop.toFixed(10)) {
           // if the mode specified is PIE or null, push the mid point of the arc in vertices
           if (mode === constants.PIE || typeof mode === 'undefined') {
-            this.vertices.push(new p5.Vector(0.5, 0.5, 0));
+            this.vertices.push(new Vector(0.5, 0.5, 0));
             this.uvs.push([0.5, 0.5]);
           }
 
@@ -2556,7 +2559,7 @@ function primitives3D(p5, fn){
             const _x = 0.5 + Math.cos(theta) / 2;
             const _y = 0.5 + Math.sin(theta) / 2;
 
-            this.vertices.push(new p5.Vector(_x, _y, 0));
+            this.vertices.push(new Vector(_x, _y, 0));
             this.uvs.push([_x, _y]);
 
             if (i < detail - 1) {
@@ -2604,7 +2607,7 @@ function primitives3D(p5, fn){
         }
       };
 
-      const arcGeom = new p5.Geometry(detail, 1, _arc);
+      const arcGeom = new Geometry(detail, 1, _arc);
       arcGeom.computeNormals();
 
       if (detail <= 50) {
@@ -2651,7 +2654,7 @@ function primitives3D(p5, fn){
             const v = i / this.detailY;
             for (let j = 0; j <= this.detailX; j++) {
               const u = j / this.detailX;
-              const p = new p5.Vector(u, v, 0);
+              const p = new Vector(u, v, 0);
               this.vertices.push(p);
               this.uvs.push(u, v);
             }
@@ -2666,7 +2669,7 @@ function primitives3D(p5, fn){
             ];
           }
         };
-        const rectGeom = new p5.Geometry(detailX, detailY, _rect);
+        const rectGeom = new Geometry(detailX, detailY, _rect);
         rectGeom
           .computeFaces()
           .computeNormals()
@@ -2772,7 +2775,7 @@ function primitives3D(p5, fn){
       `quad|${x1}|${y1}|${z1}|${x2}|${y2}|${z2}|${x3}|${y3}|${z3}|${x4}|${y4}|${z4}|${detailX}|${detailY}`;
 
     if (!this.geometryInHash(gId)) {
-      const quadGeom = new p5.Geometry(detailX, detailY, function() {
+      const quadGeom = new Geometry(detailX, detailY, function() {
         //algorithm adapted from c++ to js
         //https://stackoverflow.com/questions/16989181/whats-the-correct-way-to-draw-a-distorted-plane-in-opengl/16993202#16993202
         let xRes = 1.0 / (this.detailX - 1);
@@ -2793,7 +2796,7 @@ function primitives3D(p5, fn){
             let pty = (1 - pctx) * linePt0y + pctx * linePt1y;
             let ptz = (1 - pctx) * linePt0z + pctx * linePt1z;
 
-            this.vertices.push(new p5.Vector(ptx, pty, ptz));
+            this.vertices.push(new Vector(ptx, pty, ptz));
             this.uvs.push([pctx, pcty]);
           }
         }
@@ -3533,11 +3536,10 @@ function primitives3D(p5, fn){
     }
 
     this._pInst.push();
-
-    this._pInst.noLights();
+    this.noLights();
     this._pInst.noStroke();
 
-    this._pInst.texture(img);
+    this.texture(img);
     this._pInst.textureMode(constants.NORMAL);
 
     let u0 = 0;

src/webgl/GeometryBuilder.js

@@ -1,5 +1,6 @@
-import p5 from '../core/main';
 import * as constants from '../core/constants';
+import { Matrix } from './p5.Matrix';
+import { Geometry } from './p5.Geometry';
 
 /**
  * @private
@@ -10,9 +11,9 @@ class GeometryBuilder {
   constructor(renderer) {
     this.renderer = renderer;
     renderer._pInst.push();
-    this.identityMatrix = new p5.Matrix();
-    renderer.states.uModelMatrix = new p5.Matrix();
-    this.geometry = new p5.Geometry();
+    this.identityMatrix = new Matrix();
+    renderer.states.uModelMatrix = new Matrix();
+    this.geometry = new Geometry();
     this.geometry.gid = `_p5_GeometryBuilder_${GeometryBuilder.nextGeometryId}`;
     GeometryBuilder.nextGeometryId++;
     this.hasTransform = false;

src/webgl/interaction.js

@@ -6,6 +6,7 @@
  */
 
 import * as constants from '../core/constants';
+import { Vector } from '../math/p5.Vector';
 
 function interaction(p5, fn){
   /**
@@ -428,7 +429,7 @@ function interaction(p5, fn){
       const viewZ = Math.sqrt(diffX * diffX + diffY * diffY + diffZ * diffZ);
 
       // position vector of the center.
-      let cv = new p5.Vector(cam.centerX, cam.centerY, cam.centerZ);
+      let cv = new Vector(cam.centerX, cam.centerY, cam.centerZ);
 
       // Calculate the normalized device coordinates of the center.
       cv = cam.cameraMatrix.multiplyPoint(cv);