processing
diff --git a/‎preview/index.html
-3 b/‎preview/index.html
-3
diff --git a/‎src/accessibility/outputs.js
+4-4 b/‎src/accessibility/outputs.js
+4-4
diff --git a/‎src/app.js
+4-19 b/‎src/app.js
+4-19
diff --git a/‎src/color/creating_reading.js
+2-2 b/‎src/color/creating_reading.js
+2-2
@@ -18,9 +18,6 @@
 <body>
   <script type="module">
     import p5 from '../src/app.js';
-    // import calculation from './src/math/calculation.js';
-
-    // p5.registerAddon(calculation);
 
     const sketch = function (p) {
       p.setup = function () {
 
@@ -547,8 +547,8 @@ function outputs(p5, fn){
       this.drawingContext.getTransform();
     const { x: transformedX, y: transformedY } = untransformedPosition
       .matrixTransform(currentTransform);
-    const canvasWidth = this.width * this._pixelDensity;
-    const canvasHeight = this.height * this._pixelDensity;
+    const canvasWidth = this.width * this._renderer._pixelDensity;
+    const canvasHeight = this.height * this._renderer._pixelDensity;
     if (transformedX < 0.4 * canvasWidth) {
       if (transformedY < 0.4 * canvasHeight) {
         return 'top left';
@@ -653,8 +653,8 @@ function outputs(p5, fn){
       // (Ax( By −  Cy) + Bx(Cy − Ay) + Cx(Ay − By ))/2
     }
     //  Store the positions of the canvas corners
-    const canvasWidth = this.width * this._pixelDensity;
-    const canvasHeight = this.height * this._pixelDensity;
+    const canvasWidth = this.width * this._renderer._pixelDensity;
+    const canvasHeight = this.height * this._renderer._pixelDensity;
     const canvasCorners = [
       new DOMPoint(0, 0),
       new DOMPoint(canvasWidth, 0),
 
@@ -1,26 +1,15 @@
 // core
 import p5 from './core/main';
-import './core/constants';
-import './core/environment';
 import './core/friendly_errors/stacktrace';
 import './core/friendly_errors/validate_params';
 import './core/friendly_errors/file_errors';
 import './core/friendly_errors/fes_core';
 import './core/friendly_errors/sketch_reader';
-import './core/helpers';
-import './core/legacy';
-// import './core/preload';
 import './core/p5.Element';
-import './core/p5.Graphics';
-// import './core/p5.Renderer';
-import './core/p5.Renderer2D';
-import './core/rendering';
-import './core/structure';
-import './core/transform';
-import './core/shape/2d_primitives';
-import './core/shape/attributes';
-import './core/shape/curves';
-import './core/shape/vertex';
+// import './core/p5.Graphics';
+// import './core/rendering';
+import shape from './shape';
+shape(p5);
 
 //accessibility
 import accessibility from './accessibility';
@@ -71,10 +60,6 @@ utilities(p5);
 // webgl
 import webgl from './webgl';
 webgl(p5);
-import './webgl/p5.RendererGL.Immediate';
-import './webgl/p5.RendererGL';
-import './webgl/p5.RendererGL.Retained';
-import './webgl/p5.Texture';
 
 import './core/init';
 
 
@@ -683,7 +683,7 @@ function creatingReading(p5, fn){
     }
 
     const arg = Array.isArray(args[0]) ? args[0] : args;
-    return new p5.Color(this, arg);
+    return new p5.Color(arg, this._colorMode, this._colorMaxes);
   };
 
   /**
@@ -1027,7 +1027,7 @@ function creatingReading(p5, fn){
       space: c1.color.space.path[spaceIndex].id
     })(amt);
 
-    return new p5.Color(this, lerpColor);
+    return new p5.Color(lerpColor, this._colorMode, this._colorMaxes);
   };
 
   /**