From ea8151cc8f9bab6f2c16c02822d9b0c550321e2c Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 17:14:40 +0900
Subject: [PATCH 01/15] default value

---
 src/core/p5.Renderer2D.js  |  13 +--
 src/image/filters.js       | 212 ++++++++++++++++++-------------------
 src/webgl/3d_primitives.js | 163 +++++++++-------------------
 3 files changed, 154 insertions(+), 234 deletions(-)

diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js
index 42dcbf0275..a989567d55 100644
--- a/src/core/p5.Renderer2D.js
+++ b/src/core/p5.Renderer2D.js
@@ -501,20 +501,9 @@ class Renderer2D extends p5.Renderer {
     }
   }
 
-  updatePixels(x, y, w, h) {
+  updatePixels(x=0, y=0, w=this.width, h=this.height) {
     const pixelsState = this._pixelsState;
     const pd = pixelsState._pixelDensity;
-    if (
-      x === undefined &&
-      y === undefined &&
-      w === undefined &&
-      h === undefined
-    ) {
-      x = 0;
-      y = 0;
-      w = this.width;
-      h = this.height;
-    }
     x *= pd;
     y *= pd;
     w *= pd;
diff --git a/src/image/filters.js b/src/image/filters.js
index e178b9585a..6c746df32e 100644
--- a/src/image/filters.js
+++ b/src/image/filters.js
@@ -63,16 +63,16 @@ const Filters = {
   },
 
   /**
- * Returns a 32-bit number containing ARGB data at the ith pixel in the
- * 1D array containing pixels data.
- *
- * @private
- *
- * @param  {Uint8ClampedArray} data array returned by _toPixels()
- * @param  {Integer}           i    index of a 1D Image Array
- * @return {Integer}                32-bit integer value representing
- *                                  ARGB value.
- */
+   * Returns a 32-bit number containing ARGB data at the ith pixel in the
+   * 1D array containing pixels data.
+   *
+   * @private
+   *
+   * @param  {Uint8ClampedArray} data array returned by _toPixels()
+   * @param  {Integer}           i    index of a 1D Image Array
+   * @return {Integer}                32-bit integer value representing
+   *                                  ARGB value.
+   */
   _getARGB(data, i) {
     // Determine the starting position in the 'data' array for the 'i'-th pixel.
     const offset = i * 4;
@@ -86,14 +86,14 @@ const Filters = {
   },
 
   /**
- * Modifies pixels RGBA values to values contained in the data object.
- *
- * @private
- *
- * @param {Uint8ClampedArray} pixels array returned by _toPixels()
- * @param {Int32Array}        data   source 1D array where each value
- *                                   represents ARGB values
- */
+   * Modifies pixels RGBA values to values contained in the data object.
+   *
+   * @private
+   *
+   * @param {Uint8ClampedArray} pixels array returned by _toPixels()
+   * @param {Int32Array}        data   source 1D array where each value
+   *                                   represents ARGB values
+   */
   _setPixels(pixels, data) {
     let offset = 0;
     for (let i = 0, al = pixels.length; i < al; i++) {
@@ -107,15 +107,15 @@ const Filters = {
 
 
   /**
- * Returns the ImageData object for a canvas.
- * https://developer.mozilla.org/en-US/docs/Web/API/ImageData
- *
- * @private
- *
- * @param  {Canvas|ImageData} canvas canvas to get image data from
- * @return {ImageData}               Holder of pixel data (and width and
- *                                   height) for a canvas
- */
+   * Returns the ImageData object for a canvas.
+   * https://developer.mozilla.org/en-US/docs/Web/API/ImageData
+   *
+   * @private
+   *
+   * @param  {Canvas|ImageData} canvas canvas to get image data from
+   * @return {ImageData}               Holder of pixel data (and width and
+   *                                   height) for a canvas
+   */
   _toImageData(canvas) {
     if (canvas instanceof ImageData) {
       return canvas;
@@ -128,14 +128,14 @@ const Filters = {
 
 
   /**
- * Returns a blank ImageData object.
- *
- * @private
- *
- * @param  {Integer} width
- * @param  {Integer} height
- * @return {ImageData}
- */
+   * Returns a blank ImageData object.
+   *
+   * @private
+   *
+   * @param  {Integer} width
+   * @param  {Integer} height
+   * @return {ImageData}
+   */
   _createImageData(width, height) {
     Filters._tmpCanvas = document.createElement('canvas');
     Filters._tmpCtx = Filters._tmpCanvas.getContext('2d');
@@ -143,24 +143,24 @@ const Filters = {
   },
 
   /**
- * Applys a filter function to a canvas.
- *
- * The difference between this and the actual filter functions defined below
- * is that the filter functions generally modify the pixel buffer but do
- * not actually put that data back to the canvas (where it would actually
- * update what is visible). By contrast this method does make the changes
- * actually visible in the canvas.
- *
- * The apply method is the method that callers of this module would generally
- * use. It has been separated from the actual filters to support an advanced
- * use case of creating a filter chain that executes without actually updating
- * the canvas in between everystep.
- *
- * @private
- * @param  {HTMLCanvasElement} canvas The input canvas to apply the filter on.
- * @param  {function(ImageData,Object)} func The filter function to apply to the canvas's pixel data.
- * @param  {Object} filterParam An optional parameter to pass to the filter function.
- */
+   * Applys a filter function to a canvas.
+   *
+   * The difference between this and the actual filter functions defined below
+   * is that the filter functions generally modify the pixel buffer but do
+   * not actually put that data back to the canvas (where it would actually
+   * update what is visible). By contrast this method does make the changes
+   * actually visible in the canvas.
+   *
+   * The apply method is the method that callers of this module would generally
+   * use. It has been separated from the actual filters to support an advanced
+   * use case of creating a filter chain that executes without actually updating
+   * the canvas in between everystep.
+   *
+   * @private
+   * @param  {HTMLCanvasElement} canvas The input canvas to apply the filter on.
+   * @param  {function(ImageData,Object)} func The filter function to apply to the canvas's pixel data.
+   * @param  {Object} filterParam An optional parameter to pass to the filter function.
+   */
   apply(canvas, func, filterParam) {
     const pixelsState = canvas.getContext('2d');
     const imageData = pixelsState.getImageData(
@@ -194,26 +194,23 @@ const Filters = {
   },
 
   /*
- * Filters
- */
+   * Filters
+   */
 
   /**
- * Converts the image to black and white pixels depending if they are above or
- * below the threshold defined by the level parameter. The parameter must be
- * between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
- *
- * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
- *
- * @private
- * @param  {Canvas} canvas Canvas to apply thershold filter on.
- * @param  {Float} level Threshold level (0-1).
- */
-  threshold(canvas, level) {
+   * Converts the image to black and white pixels depending if they are above or
+   * below the threshold defined by the level parameter. The parameter must be
+   * between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
+   *
+   * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+   *
+   * @private
+   * @param  {Canvas} canvas Canvas to apply thershold filter on.
+   * @param  {Float} level Threshold level (0-1).
+   */
+  threshold(canvas, level = 0.5) {
     const pixels = Filters._toPixels(canvas);
 
-    if (level === undefined) {
-      level = 0.5;
-    }
     // Calculate threshold value on a (0-255) scale.
     const thresh = Math.floor(level * 255);
 
@@ -234,14 +231,14 @@ const Filters = {
   },
 
   /**
- * Converts any colors in the image to grayscale equivalents.
- * No parameter is used.
- *
- * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
- *
- * @private
- * @param {Canvas} canvas Canvas to apply gray filter on.
- */
+   * Converts any colors in the image to grayscale equivalents.
+   * No parameter is used.
+   *
+   * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+   *
+   * @private
+   * @param {Canvas} canvas Canvas to apply gray filter on.
+   */
   gray(canvas) {
     const pixels = Filters._toPixels(canvas);
 
@@ -257,11 +254,11 @@ const Filters = {
   },
 
   /**
- * Sets the alpha channel to entirely opaque. No parameter is used.
- *
- * @private
- * @param {Canvas} canvas
- */
+   * Sets the alpha channel to entirely opaque. No parameter is used.
+   *
+   * @private
+   * @param {Canvas} canvas
+   */
   opaque(canvas) {
     const pixels = Filters._toPixels(canvas);
 
@@ -273,10 +270,10 @@ const Filters = {
   },
 
   /**
- * Sets each pixel to its inverse value. No parameter is used.
- * @private
- * @param  {Canvas} canvas
- */
+   * Sets each pixel to its inverse value. No parameter is used.
+   * @private
+   * @param  {Canvas} canvas
+   */
   invert(canvas) {
     const pixels = Filters._toPixels(canvas);
 
@@ -288,21 +285,18 @@ const Filters = {
   },
 
   /**
- * Limits each channel of the image to the number of colors specified as
- * the parameter. The parameter can be set to values between 2 and 255, but
- * results are most noticeable in the lower ranges.
- *
- * Adapted from java based processing implementation
- *
- * @private
- * @param  {Canvas} canvas
- * @param  {Integer} level
- */
-  posterize(canvas, level) {
+   * Limits each channel of the image to the number of colors specified as
+   * the parameter. The parameter can be set to values between 2 and 255, but
+   * results are most noticeable in the lower ranges.
+   *
+   * Adapted from java based processing implementation
+   *
+   * @private
+   * @param  {Canvas} canvas
+   * @param  {Integer} level
+   */
+  posterize(canvas, level = 4) {
     const pixels = Filters._toPixels(canvas);
-    if (level === undefined) {
-      level = 4;
-    }
     if (level < 2 || level > 255) {
       throw new Error(
         'Level must be greater than 2 and less than 255 for posterize'
@@ -323,10 +317,10 @@ const Filters = {
   },
 
   /**
- * Increases the bright areas in an image.
- * @private
- * @param  {Canvas} canvas
- */
+   * Increases the bright areas in an image.
+   * @private
+   * @param  {Canvas} canvas
+   */
   dilate(canvas) {
     const pixels = Filters._toPixels(canvas);
     let currIdx = 0;
@@ -415,11 +409,11 @@ const Filters = {
   },
 
   /**
- * Reduces the bright areas in an image.
- * Similar to `dilate()`, but updates the output color based on the lowest luminance value.
- * @private
- * @param  {Canvas} canvas
- */
+   * Reduces the bright areas in an image.
+   * Similar to `dilate()`, but updates the output color based on the lowest luminance value.
+   * @private
+   * @param  {Canvas} canvas
+   */
   erode(canvas) {
     const pixels = Filters._toPixels(canvas);
     let currIdx = 0;
diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js
index f5bd16fd17..dd585059df 100644
--- a/src/webgl/3d_primitives.js
+++ b/src/webgl/3d_primitives.js
@@ -216,22 +216,14 @@ p5.prototype.freeGeometry = function(geometry) {
  * 3d red and green gradient.
  * rotating view of a multi-colored cylinder with concave sides.
  */
-p5.prototype.plane = function(width, height, detailX, detailY) {
+p5.prototype.plane = function (
+  width = 50,
+  height = width,
+  detailX = 1,
+  detailY = 1
+) {
   this._assert3d('plane');
   p5._validateParameters('plane', arguments);
-  if (typeof width === 'undefined') {
-    width = 50;
-  }
-  if (typeof height === 'undefined') {
-    height = width;
-  }
-
-  if (typeof detailX === 'undefined') {
-    detailX = 1;
-  }
-  if (typeof detailY === 'undefined') {
-    detailY = 1;
-  }
 
   const gId = `plane|${detailX}|${detailY}`;
 
@@ -255,7 +247,7 @@ p5.prototype.plane = function(width, height, detailX, detailY) {
     } else if (this._renderer._doStroke) {
       console.log(
         'Cannot draw stroke on plane objects with more' +
-          ' than 1 detailX or 1 detailY'
+        ' than 1 detailX or 1 detailY'
       );
     }
     this._renderer.createBuffers(gId, planeGeom);
@@ -297,7 +289,7 @@ p5.prototype.plane = function(width, height, detailX, detailY) {
  * </code>
  * </div>
  */
-p5.prototype.box = function(width, height, depth, detailX, detailY) {
+p5.prototype.box = function (width, height, depth, detailX, detailY) {
   this._assert3d('box');
   p5._validateParameters('box', arguments);
   if (typeof width === 'undefined') {
@@ -373,7 +365,7 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) {
     } else if (this._renderer._doStroke) {
       console.log(
         'Cannot draw stroke on box objects with more' +
-          ' than 4 detailX or 4 detailY'
+        ' than 4 detailX or 4 detailY'
       );
     }
     //initialize our geometry buffer with
@@ -461,18 +453,9 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) {
  * </code>
  * </div>
  */
-p5.prototype.sphere = function(radius, detailX, detailY) {
+p5.prototype.sphere = function (radius = 50, detailX = 24, detailY = 16) {
   this._assert3d('sphere');
   p5._validateParameters('sphere', arguments);
-  if (typeof radius === 'undefined') {
-    radius = 50;
-  }
-  if (typeof detailX === 'undefined') {
-    detailX = 24;
-  }
-  if (typeof detailY === 'undefined') {
-    detailY = 16;
-  }
 
   this.ellipsoid(radius, radius, radius, detailX, detailY);
 
@@ -680,34 +663,16 @@ const _truncatedCone = function(
  * </code>
  * </div>
  */
-p5.prototype.cylinder = function(
-  radius,
-  height,
-  detailX,
-  detailY,
-  bottomCap,
-  topCap
+p5.prototype.cylinder = function (
+  radius = 50,
+  height = radius,
+  detailX = 24,
+  detailY = 1,
+  bottomCap = true,
+  topCap = true
 ) {
   this._assert3d('cylinder');
   p5._validateParameters('cylinder', arguments);
-  if (typeof radius === 'undefined') {
-    radius = 50;
-  }
-  if (typeof height === 'undefined') {
-    height = radius;
-  }
-  if (typeof detailX === 'undefined') {
-    detailX = 24;
-  }
-  if (typeof detailY === 'undefined') {
-    detailY = 1;
-  }
-  if (typeof topCap === 'undefined') {
-    topCap = true;
-  }
-  if (typeof bottomCap === 'undefined') {
-    bottomCap = true;
-  }
 
   const gId = `cylinder|${detailX}|${detailY}|${bottomCap}|${topCap}`;
   if (!this._renderer.geometryInHash(gId)) {
@@ -728,7 +693,7 @@ p5.prototype.cylinder = function(
     } else if (this._renderer._doStroke) {
       console.log(
         'Cannot draw stroke on cylinder objects with more' +
-          ' than 24 detailX or 16 detailY'
+        ' than 24 detailX or 16 detailY'
       );
     }
     this._renderer.createBuffers(gId, cylinderGeom);
@@ -822,24 +787,15 @@ p5.prototype.cylinder = function(
  * </code>
  * </div>
  */
-p5.prototype.cone = function(radius, height, detailX, detailY, cap) {
+p5.prototype.cone = function (
+  radius = 50,
+  height = radius,
+  detailX = 24,
+  detailY = 1,
+  cap = true
+) {
   this._assert3d('cone');
   p5._validateParameters('cone', arguments);
-  if (typeof radius === 'undefined') {
-    radius = 50;
-  }
-  if (typeof height === 'undefined') {
-    height = radius;
-  }
-  if (typeof detailX === 'undefined') {
-    detailX = 24;
-  }
-  if (typeof detailY === 'undefined') {
-    detailY = 1;
-  }
-  if (typeof cap === 'undefined') {
-    cap = true;
-  }
 
   const gId = `cone|${detailX}|${detailY}|${cap}`;
   if (!this._renderer.geometryInHash(gId)) {
@@ -850,7 +806,7 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) {
     } else if (this._renderer._doStroke) {
       console.log(
         'Cannot draw stroke on cone objects with more' +
-          ' than 24 detailX or 16 detailY'
+        ' than 24 detailX or 16 detailY'
       );
     }
     this._renderer.createBuffers(gId, coneGeom);
@@ -943,25 +899,15 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) {
  * </code>
  * </div>
  */
-p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) {
+p5.prototype.ellipsoid = function (
+  radiusX = 50,
+  radiusY = radiusX,
+  radiusZ = radiusX,
+  detailX = 24,
+  detailY = 16
+) {
   this._assert3d('ellipsoid');
   p5._validateParameters('ellipsoid', arguments);
-  if (typeof radiusX === 'undefined') {
-    radiusX = 50;
-  }
-  if (typeof radiusY === 'undefined') {
-    radiusY = radiusX;
-  }
-  if (typeof radiusZ === 'undefined') {
-    radiusZ = radiusX;
-  }
-
-  if (typeof detailX === 'undefined') {
-    detailX = 24;
-  }
-  if (typeof detailY === 'undefined') {
-    detailY = 16;
-  }
 
   const gId = `ellipsoid|${detailX}|${detailY}`;
 
@@ -992,7 +938,7 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) {
     } else if (this._renderer._doStroke) {
       console.log(
         'Cannot draw stroke on ellipsoids with more' +
-          ' than 24 detailX or 24 detailY'
+        ' than 24 detailX or 24 detailY'
       );
     }
     this._renderer.createBuffers(gId, ellipsoidGeom);
@@ -1153,7 +1099,7 @@ p5.prototype.torus = function(radius, tubeRadius, detailX, detailY) {
     } else if (this._renderer._doStroke) {
       console.log(
         'Cannot draw strokes on torus object with more' +
-          ' than 24 detailX or 16 detailY'
+        ' than 24 detailX or 16 detailY'
       );
     }
     this._renderer.createBuffers(gId, torusGeom);
@@ -1202,10 +1148,7 @@ p5.prototype.torus = function(radius, tubeRadius, detailX, detailY) {
  * </code>
  * </div>
  */
-p5.RendererGL.prototype.point = function(x, y, z) {
-  if (typeof z === 'undefined') {
-    z = 0;
-  }
+p5.RendererGL.prototype.point = function (x, y, z = 0) {
 
   const _vertex = [];
   _vertex.push(new p5.Vector(x, y, z));
@@ -1214,7 +1157,7 @@ p5.RendererGL.prototype.point = function(x, y, z) {
   return this;
 };
 
-p5.RendererGL.prototype.triangle = function(args) {
+p5.RendererGL.prototype.triangle = function (...args) {
   const x1 = args[0],
     y1 = args[1];
   const x2 = args[2],
@@ -1267,7 +1210,7 @@ p5.RendererGL.prototype.triangle = function(args) {
   return this;
 };
 
-p5.RendererGL.prototype.ellipse = function(args) {
+p5.RendererGL.prototype.ellipse = function (...args) {
   this.arc(
     args[0],
     args[1],
@@ -1280,15 +1223,15 @@ p5.RendererGL.prototype.ellipse = function(args) {
   );
 };
 
-p5.RendererGL.prototype.arc = function(args) {
-  const x = arguments[0];
-  const y = arguments[1];
-  const width = arguments[2];
-  const height = arguments[3];
-  const start = arguments[4];
-  const stop = arguments[5];
-  const mode = arguments[6];
-  const detail = arguments[7] || 25;
+p5.RendererGL.prototype.arc = function (...args) {
+  const x = args[0];
+  const y = args[1];
+  const width = args[2];
+  const height = args[3];
+  const start = args[4];
+  const stop = args[5];
+  const mode = args[6];
+  const detail = args[7] || 25;
 
   let shape;
   let gId;
@@ -1397,7 +1340,7 @@ p5.RendererGL.prototype.arc = function(args) {
   return this;
 };
 
-p5.RendererGL.prototype.rect = function(args) {
+p5.RendererGL.prototype.rect = function (...args) {
   const x = args[0];
   const y = args[1];
   const width = args[2];
@@ -1530,14 +1473,8 @@ p5.RendererGL.prototype.rect = function(args) {
 };
 
 /* eslint-disable max-len */
-p5.RendererGL.prototype.quad = function(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, detailX, detailY) {
-/* eslint-enable max-len */
-  if (typeof detailX === 'undefined') {
-    detailX = 2;
-  }
-  if (typeof detailY === 'undefined') {
-    detailY = 2;
-  }
+p5.RendererGL.prototype.quad = function(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, detailX=2, detailY=2) {
+  /* eslint-enable max-len */
 
   const gId =
     `quad|${x1}|${y1}|${z1}|${x2}|${y2}|${z2}|${x3}|${y3}|${z3}|${x4}|${y4}|${z4}|${detailX}|${detailY}`;

From 0627e26d1088a2c96c93464538440add305fe405 Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 17:16:12 +0900
Subject: [PATCH 02/15] use native api

---
 src/webgl/p5.RendererGL.js | 38 ++++----------------------------------
 1 file changed, 4 insertions(+), 34 deletions(-)

diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
index 7f1069bfd5..cd44376154 100644
--- a/src/webgl/p5.RendererGL.js
+++ b/src/webgl/p5.RendererGL.js
@@ -2190,31 +2190,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
    * [[1, 2, 3],[4, 5, 6]] -> [1, 2, 3, 4, 5, 6]
    */
   _flatten(arr) {
-    //when empty, return empty
-    if (arr.length === 0) {
-      return [];
-    } else if (arr.length > 20000) {
-      //big models , load slower to avoid stack overflow
-      //faster non-recursive flatten via axelduch
-      //stackoverflow.com/questions/27266550/how-to-flatten-nested-array-in-javascript
-      const result = [];
-      const nodes = arr.slice();
-      let node;
-      node = nodes.pop();
-      do {
-        if (Array.isArray(node)) {
-          nodes.push(...node);
-        } else {
-          result.push(node);
-        }
-      } while (nodes.length && (node = nodes.pop()) !== undefined);
-      result.reverse(); // we reverse result to restore the original order
-      return result;
-    } else {
-      //otherwise if model within limits for browser
-      //use faster recursive loading
-      return [].concat(...arr);
-    }
+    return arr.flat();
   }
 
   /**
@@ -2226,13 +2202,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
    * [1, 2, 3, 4, 5, 6]
    */
   _vToNArray(arr) {
-    const ret = [];
-
-    for (const item of arr) {
-      ret.push(item.x, item.y, item.z);
-    }
-
-    return ret;
+    return arr.flatMap(item => [item.x, item.y, item.z]);
   }
 
   // function to calculate BezierVertex Coefficients
@@ -2265,8 +2235,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
   _initTessy() {
     // function called for each vertex of tesselator output
     function vertexCallback(data, polyVertArray) {
-      for (let i = 0; i < data.length; i++) {
-        polyVertArray.push(data[i]);
+      for (const element of data) {
+        polyVertArray.push(element);
       }
     }
 

From 5ed12087de52be46fc5121d1e4461f0ef0c6b53f Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 17:20:37 +0900
Subject: [PATCH 03/15] use arr.some

---
 src/webgl/p5.Geometry.js |  1 -
 src/webgl/p5.Shader.js   | 30 +++++++++++++++---------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js
index a1159d244b..b72c5b895e 100644
--- a/src/webgl/p5.Geometry.js
+++ b/src/webgl/p5.Geometry.js
@@ -72,7 +72,6 @@ p5.Geometry = class Geometry {
     if (callback instanceof Function) {
       callback.call(this);
     }
-    return this; // TODO: is this a constructor?
   }
 
   reset() {
diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js
index 7a25d40812..44059c1dfb 100644
--- a/src/webgl/p5.Shader.js
+++ b/src/webgl/p5.Shader.js
@@ -569,21 +569,21 @@ p5.Shader = class {
    **/
 
   isLightShader() {
-    return (
-      this.attributes.aNormal !== undefined ||
-      this.uniforms.uUseLighting !== undefined ||
-      this.uniforms.uAmbientLightCount !== undefined ||
-      this.uniforms.uDirectionalLightCount !== undefined ||
-      this.uniforms.uPointLightCount !== undefined ||
-      this.uniforms.uAmbientColor !== undefined ||
-      this.uniforms.uDirectionalDiffuseColors !== undefined ||
-      this.uniforms.uDirectionalSpecularColors !== undefined ||
-      this.uniforms.uPointLightLocation !== undefined ||
-      this.uniforms.uPointLightDiffuseColors !== undefined ||
-      this.uniforms.uPointLightSpecularColors !== undefined ||
-      this.uniforms.uLightingDirection !== undefined ||
-      this.uniforms.uSpecular !== undefined
-    );
+    return [
+      this.attributes.aNormal ,
+      this.uniforms.uUseLighting ,
+      this.uniforms.uAmbientLightCount ,
+      this.uniforms.uDirectionalLightCount ,
+      this.uniforms.uPointLightCount ,
+      this.uniforms.uAmbientColor ,
+      this.uniforms.uDirectionalDiffuseColors ,
+      this.uniforms.uDirectionalSpecularColors ,
+      this.uniforms.uPointLightLocation ,
+      this.uniforms.uPointLightDiffuseColors ,
+      this.uniforms.uPointLightSpecularColors ,
+      this.uniforms.uLightingDirection ,
+      this.uniforms.uSpecular
+    ].some(x => x !== undefined);
   }
 
   isNormalShader() {

From 7f4be957ff587cbabd17497d5d792aa48c1626d5 Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 17:33:08 +0900
Subject: [PATCH 04/15] recover updatePixels

---
 src/core/p5.Renderer2D.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js
index a989567d55..42dcbf0275 100644
--- a/src/core/p5.Renderer2D.js
+++ b/src/core/p5.Renderer2D.js
@@ -501,9 +501,20 @@ class Renderer2D extends p5.Renderer {
     }
   }
 
-  updatePixels(x=0, y=0, w=this.width, h=this.height) {
+  updatePixels(x, y, w, h) {
     const pixelsState = this._pixelsState;
     const pd = pixelsState._pixelDensity;
+    if (
+      x === undefined &&
+      y === undefined &&
+      w === undefined &&
+      h === undefined
+    ) {
+      x = 0;
+      y = 0;
+      w = this.width;
+      h = this.height;
+    }
     x *= pd;
     y *= pd;
     w *= pd;

From 12f4f4337c36dab71cd195974a69f436a11b54db Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 17:39:51 +0900
Subject: [PATCH 05/15] recover some ...args

---
 src/webgl/3d_primitives.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js
index dd585059df..c4316408f9 100644
--- a/src/webgl/3d_primitives.js
+++ b/src/webgl/3d_primitives.js
@@ -1157,7 +1157,7 @@ p5.RendererGL.prototype.point = function (x, y, z = 0) {
   return this;
 };
 
-p5.RendererGL.prototype.triangle = function (...args) {
+p5.RendererGL.prototype.triangle = function (args) {
   const x1 = args[0],
     y1 = args[1];
   const x2 = args[2],
@@ -1210,7 +1210,7 @@ p5.RendererGL.prototype.triangle = function (...args) {
   return this;
 };
 
-p5.RendererGL.prototype.ellipse = function (...args) {
+p5.RendererGL.prototype.ellipse = function (args) {
   this.arc(
     args[0],
     args[1],
@@ -1340,7 +1340,7 @@ p5.RendererGL.prototype.arc = function (...args) {
   return this;
 };
 
-p5.RendererGL.prototype.rect = function (...args) {
+p5.RendererGL.prototype.rect = function (args) {
   const x = args[0];
   const y = args[1];
   const width = args[2];

From c5a59030d93ae691e084b063297e81630c1704f4 Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 17:50:15 +0900
Subject: [PATCH 06/15] Array.isArray

---
 src/color/creating_reading.js | 12 ++++++------
 src/core/p5.Renderer2D.js     |  4 ++--
 src/core/transform.js         |  4 ++--
 src/math/calculation.js       | 16 ++++------------
 src/math/p5.Vector.js         |  2 +-
 src/math/random.js            |  2 +-
 6 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js
index 457f6db07d..1d8adf4a59 100644
--- a/src/color/creating_reading.js
+++ b/src/color/creating_reading.js
@@ -290,14 +290,14 @@ p5.prototype.brightness = function(c) {
  * @param  {p5.Color}     color
  * @return {p5.Color}
  */
-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.
+p5.prototype.color = function(...args) {
+  p5._validateParameters('color', args);
+  if (args[0] instanceof p5.Color) {
+    return args[0]; // Do nothing if argument is already a color object.
   }
 
-  const args = arguments[0] instanceof Array ? arguments[0] : arguments;
-  return new p5.Color(this, args);
+  const arg = Array.isArray(args[0]) ? args[0] : args;
+  return new p5.Color(this, arg);
 };
 
 /**
diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js
index 42dcbf0275..a9be0a6211 100644
--- a/src/core/p5.Renderer2D.js
+++ b/src/core/p5.Renderer2D.js
@@ -452,7 +452,7 @@ class Renderer2D extends p5.Renderer {
           (this.width * pixelsState._pixelDensity) +
           x * pixelsState._pixelDensity);
       if (!pixelsState.imageData) {
-        pixelsState.loadPixels.call(pixelsState);
+        pixelsState.loadPixels();
       }
       if (typeof imgOrCol === 'number') {
         if (idx < pixelsState.pixels.length) {
@@ -462,7 +462,7 @@ class Renderer2D extends p5.Renderer {
           a = 255;
           //this.updatePixels.call(this);
         }
-      } else if (imgOrCol instanceof Array) {
+      } else if (Array.isArray(imgOrCol)) {
         if (imgOrCol.length < 4) {
           throw new Error('pixel array must be of the form [R, G, B, A]');
         }
diff --git a/src/core/transform.js b/src/core/transform.js
index 4ed2e0118e..2b747a8000 100644
--- a/src/core/transform.js
+++ b/src/core/transform.js
@@ -431,7 +431,7 @@ p5.prototype.scale = function(x, y, z) {
     x = v.x;
     y = v.y;
     z = v.z;
-  } else if (x instanceof Array) {
+  } else if (Array.isArray(x)) {
     const rg = x;
     x = rg[0];
     y = rg[1];
@@ -443,7 +443,7 @@ p5.prototype.scale = function(x, y, z) {
     z = 1;
   }
 
-  this._renderer.scale.call(this._renderer, x, y, z);
+  this._renderer.scale(x, y, z);
 
   return this;
 };
diff --git a/src/math/calculation.js b/src/math/calculation.js
index 77d9239750..d94b629cc0 100644
--- a/src/math/calculation.js
+++ b/src/math/calculation.js
@@ -471,14 +471,10 @@ p5.prototype.map = function(n, start1, stop1, start2, stop2, withinBounds) {
  */
 p5.prototype.max = function(...args) {
   const findMax = arr => {
-    let max = -Infinity;
-    for (let x of arr) {
-      max = Math.max(max, x);
-    }
-    return max;
+    return Math.max(...arr);
   };
 
-  if (args[0] instanceof Array) {
+  if (Array.isArray(args[0])) {
     return findMax(args[0]);
   } else {
     return findMax(args);
@@ -549,14 +545,10 @@ p5.prototype.max = function(...args) {
  */
 p5.prototype.min = function(...args) {
   const findMin = arr => {
-    let min = Infinity;
-    for (let x of arr) {
-      min = Math.min(min, x);
-    }
-    return min;
+    Math.min(...arr);
   };
 
-  if (args[0] instanceof Array) {
+  if (Array.isArray(args[0])) {
     return findMin(args[0]);
   } else {
     return findMin(args);
diff --git a/src/math/p5.Vector.js b/src/math/p5.Vector.js
index 2ccb5fc4f5..dd2cc148eb 100644
--- a/src/math/p5.Vector.js
+++ b/src/math/p5.Vector.js
@@ -3060,7 +3060,7 @@ p5.Vector = class {
     let v;
     if (v1 instanceof p5.Vector) {
       v = v1;
-    } else if (v1 instanceof Array) {
+    } else if (Array.isArray(v1)) {
       v = new p5.Vector().set(v1);
     } else {
       p5._friendlyError(
diff --git a/src/math/random.js b/src/math/random.js
index 5a5ef7de60..70c9555759 100644
--- a/src/math/random.js
+++ b/src/math/random.js
@@ -174,7 +174,7 @@ p5.prototype.random = function(min, max) {
   if (typeof min === 'undefined') {
     return rand;
   } else if (typeof max === 'undefined') {
-    if (min instanceof Array) {
+    if (Array.isArray(min)) {
       return min[Math.floor(rand * min.length)];
     } else {
       return rand * min;

From 182b6076def7172631941eb76688690fa23ce905 Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 17:55:39 +0900
Subject: [PATCH 07/15] fix min

---
 src/math/calculation.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/math/calculation.js b/src/math/calculation.js
index d94b629cc0..e23ca71d5d 100644
--- a/src/math/calculation.js
+++ b/src/math/calculation.js
@@ -470,9 +470,7 @@ p5.prototype.map = function(n, start1, stop1, start2, stop2, withinBounds) {
  * @return {Number}
  */
 p5.prototype.max = function(...args) {
-  const findMax = arr => {
-    return Math.max(...arr);
-  };
+  const findMax = arr => Math.max(...arr);
 
   if (Array.isArray(args[0])) {
     return findMax(args[0]);
@@ -544,9 +542,7 @@ p5.prototype.max = function(...args) {
  * @return {Number}
  */
 p5.prototype.min = function(...args) {
-  const findMin = arr => {
-    Math.min(...arr);
-  };
+  const findMin = arr => Math.min(...arr);
 
   if (Array.isArray(args[0])) {
     return findMin(args[0]);

From d2036fc7eca0de41657354c21a8f47c4d2791fcb Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 18:08:17 +0900
Subject: [PATCH 08/15] remove some call

---
 src/color/p5.Color.js           |  2 +-
 src/core/shape/2d_primitives.js | 11 +++++------
 src/dom/dom.js                  |  2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/color/p5.Color.js b/src/color/p5.Color.js
index a94c36f54c..1cde51e0b7 100644
--- a/src/color/p5.Color.js
+++ b/src/color/p5.Color.js
@@ -849,7 +849,7 @@ p5.Color = class Color {
 
       // Return if string is a named colour.
       if (namedColors[str]) {
-        return Color._parseInputs.call(this, namedColors[str]);
+        return Color._parseInputs(namedColors[str]);
       }
 
       // Try RGBA pattern matching.
diff --git a/src/core/shape/2d_primitives.js b/src/core/shape/2d_primitives.js
index f2b62203e3..e2ef3cf530 100644
--- a/src/core/shape/2d_primitives.js
+++ b/src/core/shape/2d_primitives.js
@@ -292,12 +292,11 @@ p5.prototype.ellipse = function(x, y, w, h, detailX) {
  * </div>
  *
  */
-p5.prototype.circle = function() {
-  p5._validateParameters('circle', arguments);
-  const args = Array.prototype.slice.call(arguments, 0, 2);
-  args.push(arguments[2]);
-  args.push(arguments[2]);
-  return this._renderEllipse(...args);
+p5.prototype.circle = function(...args) {
+  p5._validateParameters('circle', args);
+  const argss = args.slice( 0, 2);
+  argss.push(args[2], args[2]);
+  return this._renderEllipse(...argss);
 };
 
 // internal method for drawing ellipses (without parameter validation)
diff --git a/src/dom/dom.js b/src/dom/dom.js
index b12a2750c8..5273d9d491 100644
--- a/src/dom/dom.js
+++ b/src/dom/dom.js
@@ -3243,7 +3243,7 @@ p5.Element.prototype.hide = function () {
  */
 /**
  * @method size
- * @param  {Number|Constant} w   width of the element, either AUTO, or a number.
+ * @param  {Number|Constant} [w]   width of the element, either AUTO, or a number.
  * @param  {Number|Constant} [h] height of the element, either AUTO, or a number.
  * @chainable
  */

From d7260226122e8cac26890c59c8f81a42abd7b962 Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 18:14:51 +0900
Subject: [PATCH 09/15] remove arguments

---
 src/image/image.js    | 17 ++++++++---------
 src/io/files.js       | 13 +++++--------
 src/math/p5.Vector.js | 20 +++++++-------------
 3 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/src/image/image.js b/src/image/image.js
index 2344c07257..3e82f6cbb4 100644
--- a/src/image/image.js
+++ b/src/image/image.js
@@ -170,21 +170,20 @@ p5.prototype.createImage = function(width, height) {
  *  @param  {String} [filename]
  *  @param  {String} [extension]
  */
-p5.prototype.saveCanvas = function() {
-  p5._validateParameters('saveCanvas', arguments);
+p5.prototype.saveCanvas = function(...args) {
+  p5._validateParameters('saveCanvas', args);
 
   // copy arguments to array
-  const args = [].slice.call(arguments);
   let htmlCanvas, filename, extension, temporaryGraphics;
 
-  if (arguments[0] instanceof HTMLCanvasElement) {
-    htmlCanvas = arguments[0];
+  if (args[0] instanceof HTMLCanvasElement) {
+    htmlCanvas = args[0];
     args.shift();
-  } else if (arguments[0] instanceof p5.Element) {
-    htmlCanvas = arguments[0].elt;
+  } else if (args[0] instanceof p5.Element) {
+    htmlCanvas = args[0].elt;
     args.shift();
-  } else if (arguments[0] instanceof p5.Framebuffer) {
-    const framebuffer = arguments[0];
+  } else if (args[0] instanceof p5.Framebuffer) {
+    const framebuffer = args[0];
     temporaryGraphics = this.createGraphics(framebuffer.width,
       framebuffer.height);
     temporaryGraphics.pixelDensity(pixelDensity());
diff --git a/src/io/files.js b/src/io/files.js
index 8a0370c4f9..fe1367a90c 100644
--- a/src/io/files.js
+++ b/src/io/files.js
@@ -806,10 +806,9 @@ p5.prototype.loadBytes = function(file, callback, errorCallback) {
  * @param  {function}      [errorCallback]
  * @return {Promise}
  */
-p5.prototype.httpGet = function() {
-  p5._validateParameters('httpGet', arguments);
+p5.prototype.httpGet = function(...args) {
+  p5._validateParameters('httpGet', args);
 
-  const args = Array.prototype.slice.call(arguments);
   args.splice(1, 0, 'GET');
   return p5.prototype.httpDo.apply(this, args);
 };
@@ -896,10 +895,9 @@ p5.prototype.httpGet = function() {
  * @param  {function}      [errorCallback]
  * @return {Promise}
  */
-p5.prototype.httpPost = function() {
-  p5._validateParameters('httpPost', arguments);
+p5.prototype.httpPost = function(...args) {
+  p5._validateParameters('httpPost', args);
 
-  const args = Array.prototype.slice.call(arguments);
   args.splice(1, 0, 'POST');
   return p5.prototype.httpDo.apply(this, args);
 };
@@ -1880,8 +1878,7 @@ p5.prototype._checkFileExtension = _checkFileExtension;
  *  @private
  */
 p5.prototype._isSafari = function() {
-  const x = Object.prototype.toString.call(window.HTMLElement);
-  return x.indexOf('Constructor') > 0;
+  return window.HTMLElement.toString().includes('Constructor');
 };
 
 /**
diff --git a/src/math/p5.Vector.js b/src/math/p5.Vector.js
index dd2cc148eb..fa0a75cdf5 100644
--- a/src/math/p5.Vector.js
+++ b/src/math/p5.Vector.js
@@ -433,8 +433,7 @@ p5.Vector = class {
         const xComponent = parseFloat(x.x);
         const yComponent = parseFloat(x.y);
         const zComponent = parseFloat(x.z);
-        return calculateRemainder3D.call(
-          this,
+        return calculateRemainder3D(
           xComponent,
           yComponent,
           zComponent
@@ -443,10 +442,10 @@ p5.Vector = class {
     } else if (Array.isArray(x)) {
       if (x.every(element => Number.isFinite(element))) {
         if (x.length === 2) {
-          return calculateRemainder2D.call(this, x[0], x[1]);
+          return calculateRemainder2D(x[0], x[1]);
         }
         if (x.length === 3) {
-          return calculateRemainder3D.call(this, x[0], x[1], x[2]);
+          return calculateRemainder3D(x[0], x[1], x[2]);
         }
       }
     } else if (arguments.length === 1) {
@@ -460,10 +459,8 @@ p5.Vector = class {
       const vectorComponents = [...arguments];
       if (vectorComponents.every(element => Number.isFinite(element))) {
         if (vectorComponents.length === 2) {
-          return calculateRemainder2D.call(
-            this,
-            vectorComponents[0],
-            vectorComponents[1]
+          return calculateRemainder2D(
+            ...vectorComponents
           );
         }
       }
@@ -471,11 +468,8 @@ p5.Vector = class {
       const vectorComponents = [...arguments];
       if (vectorComponents.every(element => Number.isFinite(element))) {
         if (vectorComponents.length === 3) {
-          return calculateRemainder3D.call(
-            this,
-            vectorComponents[0],
-            vectorComponents[1],
-            vectorComponents[2]
+          return calculateRemainder3D(
+            ...vectorComponents
           );
         }
       }

From f5e2fd612e517a36beb792a94d92e856f304280e Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 18:30:04 +0900
Subject: [PATCH 10/15] use this

---
 src/math/p5.Vector.js | 74 +++++++++++++++++++++++--------------------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/math/p5.Vector.js b/src/math/p5.Vector.js
index fa0a75cdf5..96410ee66c 100644
--- a/src/math/p5.Vector.js
+++ b/src/math/p5.Vector.js
@@ -7,29 +7,6 @@
 import p5 from '../core/main';
 import * as constants from '../core/constants';
 
-/// HELPERS FOR REMAINDER METHOD
-const calculateRemainder2D = function(xComponent, yComponent) {
-  if (xComponent !== 0) {
-    this.x = this.x % xComponent;
-  }
-  if (yComponent !== 0) {
-    this.y = this.y % yComponent;
-  }
-  return this;
-};
-
-const calculateRemainder3D = function(xComponent, yComponent, zComponent) {
-  if (xComponent !== 0) {
-    this.x = this.x % xComponent;
-  }
-  if (yComponent !== 0) {
-    this.y = this.y % yComponent;
-  }
-  if (zComponent !== 0) {
-    this.z = this.z % zComponent;
-  }
-  return this;
-};
 
 /**
  * A class to describe a two or three-dimensional vector. A vector is like an
@@ -365,6 +342,35 @@ p5.Vector = class {
     return this;
   }
 
+  /**
+ * @method rem
+ * @param {p5.Vector | Number[]}  value  divisor vector.
+ * @chainable
+ */
+  calculateRemainder2D (xComponent, yComponent) {
+    if (xComponent !== 0) {
+      this.x = this.x % xComponent;
+    }
+    if (yComponent !== 0) {
+      this.y = this.y % yComponent;
+    }
+    return this;
+  }
+
+  /// HELPERS FOR REMAINDER METHOD
+  calculateRemainder3D (xComponent, yComponent, zComponent) {
+    if (xComponent !== 0) {
+      this.x = this.x % xComponent;
+    }
+    if (yComponent !== 0) {
+      this.y = this.y % yComponent;
+    }
+    if (zComponent !== 0) {
+      this.z = this.z % zComponent;
+    }
+    return this;
+  }
+
   /**
  * Performs modulo (remainder) division with a vector's `x`, `y`, and `z`
  * components using separate numbers, another
@@ -421,11 +427,6 @@ p5.Vector = class {
  * print(v3.toString());
  * </code>
  * </div>
- */
-  /**
- * @method rem
- * @param {p5.Vector | Number[]}  value  divisor vector.
- * @chainable
  */
   rem (x, y, z) {
     if (x instanceof p5.Vector) {
@@ -433,7 +434,7 @@ p5.Vector = class {
         const xComponent = parseFloat(x.x);
         const yComponent = parseFloat(x.y);
         const zComponent = parseFloat(x.z);
-        return calculateRemainder3D(
+        return this.calculateRemainder3D(
           xComponent,
           yComponent,
           zComponent
@@ -442,10 +443,10 @@ p5.Vector = class {
     } else if (Array.isArray(x)) {
       if (x.every(element => Number.isFinite(element))) {
         if (x.length === 2) {
-          return calculateRemainder2D(x[0], x[1]);
+          return this.calculateRemainder2D(x[0], x[1]);
         }
         if (x.length === 3) {
-          return calculateRemainder3D(x[0], x[1], x[2]);
+          return this.calculateRemainder3D(x[0], x[1], x[2]);
         }
       }
     } else if (arguments.length === 1) {
@@ -459,8 +460,9 @@ p5.Vector = class {
       const vectorComponents = [...arguments];
       if (vectorComponents.every(element => Number.isFinite(element))) {
         if (vectorComponents.length === 2) {
-          return calculateRemainder2D(
-            ...vectorComponents
+          return this.calculateRemainder2D(
+            vectorComponents[0],
+            vectorComponents[1]
           );
         }
       }
@@ -468,8 +470,10 @@ p5.Vector = class {
       const vectorComponents = [...arguments];
       if (vectorComponents.every(element => Number.isFinite(element))) {
         if (vectorComponents.length === 3) {
-          return calculateRemainder3D(
-            ...vectorComponents
+          return this.calculateRemainder3D(
+            vectorComponents[0],
+            vectorComponents[1],
+            vectorComponents[2]
           );
         }
       }

From 37c1473439b4c5343a366837e95b829aa3d89f40 Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 18:34:08 +0900
Subject: [PATCH 11/15] fix lint

---
 src/color/p5.Color.js |   2 +-
 src/math/p5.Vector.js | 123 +++++++++++++++++++++---------------------
 2 files changed, 63 insertions(+), 62 deletions(-)

diff --git a/src/color/p5.Color.js b/src/color/p5.Color.js
index 1cde51e0b7..a94c36f54c 100644
--- a/src/color/p5.Color.js
+++ b/src/color/p5.Color.js
@@ -849,7 +849,7 @@ p5.Color = class Color {
 
       // Return if string is a named colour.
       if (namedColors[str]) {
-        return Color._parseInputs(namedColors[str]);
+        return Color._parseInputs.call(this, namedColors[str]);
       }
 
       // Try RGBA pattern matching.
diff --git a/src/math/p5.Vector.js b/src/math/p5.Vector.js
index 96410ee66c..2a28b2be42 100644
--- a/src/math/p5.Vector.js
+++ b/src/math/p5.Vector.js
@@ -342,11 +342,7 @@ p5.Vector = class {
     return this;
   }
 
-  /**
- * @method rem
- * @param {p5.Vector | Number[]}  value  divisor vector.
- * @chainable
- */
+
   calculateRemainder2D (xComponent, yComponent) {
     if (xComponent !== 0) {
       this.x = this.x % xComponent;
@@ -372,62 +368,67 @@ p5.Vector = class {
   }
 
   /**
- * Performs modulo (remainder) division with a vector's `x`, `y`, and `z`
- * components using separate numbers, another
- * <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers.
- *
- * The static version of `rem()` as in `p5.Vector.rem(v2, v1)`, returns a new
- * <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
- * originals.
- *
- * @method rem
- * @param {Number} x x component of divisor vector.
- * @param {Number} y y component of divisor vector.
- * @param {Number} z z component of divisor vector.
- * @chainable
- * @example
- * <div class='norender'>
- * <code>
- * let v = createVector(3, 4, 5);
- * v.rem(2, 3, 4);
- * // Prints 'p5.Vector Object : [1, 1, 1]'.
- * print(v.toString());
- * </code>
- * </div>
- *
- * <div class='norender'>
- * <code>
- * let v1 = createVector(3, 4, 5);
- * let v2 = createVector(2, 3, 4);
- * v1.rem(v2);
- *
- * // Prints 'p5.Vector Object : [1, 1, 1]'.
- * print(v1.toString());
- * </code>
- * </div>
- *
- * <div class='norender'>
- * <code>
- * let v = createVector(3, 4, 5);
- * let arr = [2, 3, 4];
- * v.rem(arr);
- *
- * // Prints 'p5.Vector Object : [1, 1, 1]'.
- * print(v.toString());
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * let v1 = createVector(3, 4, 5);
- * let v2 = createVector(2, 3, 4);
- * let v3 = p5.Vector.rem(v1, v2);
- *
- * // Prints 'p5.Vector Object : [1, 1, 1]'.
- * print(v3.toString());
- * </code>
- * </div>
- */
+   * Performs modulo (remainder) division with a vector's `x`, `y`, and `z`
+   * components using separate numbers, another
+   * <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers.
+   *
+   * The static version of `rem()` as in `p5.Vector.rem(v2, v1)`, returns a new
+   * <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+   * originals.
+   *
+   * @method rem
+   * @param {Number} x x component of divisor vector.
+   * @param {Number} y y component of divisor vector.
+   * @param {Number} z z component of divisor vector.
+   * @chainable
+   * @example
+   * <div class='norender'>
+   * <code>
+   * let v = createVector(3, 4, 5);
+   * v.rem(2, 3, 4);
+   * // Prints 'p5.Vector Object : [1, 1, 1]'.
+   * print(v.toString());
+   * </code>
+   * </div>
+   *
+   * <div class='norender'>
+   * <code>
+   * let v1 = createVector(3, 4, 5);
+   * let v2 = createVector(2, 3, 4);
+   * v1.rem(v2);
+   *
+   * // Prints 'p5.Vector Object : [1, 1, 1]'.
+   * print(v1.toString());
+   * </code>
+   * </div>
+   *
+   * <div class='norender'>
+   * <code>
+   * let v = createVector(3, 4, 5);
+   * let arr = [2, 3, 4];
+   * v.rem(arr);
+   *
+   * // Prints 'p5.Vector Object : [1, 1, 1]'.
+   * print(v.toString());
+   * </code>
+   * </div>
+   *
+   * <div class="norender">
+   * <code>
+   * let v1 = createVector(3, 4, 5);
+   * let v2 = createVector(2, 3, 4);
+   * let v3 = p5.Vector.rem(v1, v2);
+   *
+   * // Prints 'p5.Vector Object : [1, 1, 1]'.
+   * print(v3.toString());
+   * </code>
+   * </div>
+   */
+  /**
+   * @method rem
+   * @param {p5.Vector | Number[]}  value  divisor vector.
+   * @chainable
+   */
   rem (x, y, z) {
     if (x instanceof p5.Vector) {
       if ([x.x,x.y,x.z].every(Number.isFinite)) {

From 43b02dca483aaf06e1c5208ee28cf7df26eab9dd Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 18:43:46 +0900
Subject: [PATCH 12/15] remove some this

---
 src/image/pixels.js       | 2 +-
 src/typography/p5.Font.js | 4 ++--
 src/webgl/interaction.js  | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/image/pixels.js b/src/image/pixels.js
index 476c7ab5ec..b834501ade 100644
--- a/src/image/pixels.js
+++ b/src/image/pixels.js
@@ -568,7 +568,7 @@ p5.prototype.getFilterGraphicsLayer = function() {
  *                                   frag shader using a `tex0` uniform.
  */
 p5.prototype.filter = function(...args) {
-  p5._validateParameters('filter', arguments);
+  p5._validateParameters('filter', args);
 
   let { shader, operation, value, useWebGL } = parseFilterArgs(...args);
 
diff --git a/src/typography/p5.Font.js b/src/typography/p5.Font.js
index 08ad3a573e..255194355b 100644
--- a/src/typography/p5.Font.js
+++ b/src/typography/p5.Font.js
@@ -832,8 +832,8 @@ function pathToAbsolute(pathArray) {
   for (let r, pa, i = start, ii = pathArray.length; i < ii; i++) {
     res.push((r = []));
     pa = pathArray[i];
-    if (pa[0] !== String.prototype.toUpperCase.call(pa[0])) {
-      r[0] = String.prototype.toUpperCase.call(pa[0]);
+    if (pa[0] !== pa[0].toUpperCase()) {
+      r[0] = pa[0].toUpperCase();
       switch (r[0]) {
         case 'A':
           r[1] = pa[1];
diff --git a/src/webgl/interaction.js b/src/webgl/interaction.js
index bc1df2badc..3b9fed3baa 100644
--- a/src/webgl/interaction.js
+++ b/src/webgl/interaction.js
@@ -580,21 +580,21 @@ p5.prototype.debugMode = function(...args) {
   if (args[0] === constants.GRID) {
     this.registerMethod(
       'post',
-      this._grid.call(this, args[1], args[2], args[3], args[4], args[5])
+      this._grid(args[1], args[2], args[3], args[4], args[5])
     );
   } else if (args[0] === constants.AXES) {
     this.registerMethod(
       'post',
-      this._axesIcon.call(this, args[1], args[2], args[3], args[4])
+      this._axesIcon(args[1], args[2], args[3], args[4])
     );
   } else {
     this.registerMethod(
       'post',
-      this._grid.call(this, args[0], args[1], args[2], args[3], args[4])
+      this._grid(args[0], args[1], args[2], args[3], args[4])
     );
     this.registerMethod(
       'post',
-      this._axesIcon.call(this, args[5], args[6], args[7], args[8])
+      this._axesIcon(args[5], args[6], args[7], args[8])
     );
   }
 };

From 9f0e4062751b3a861e38a537d34e9e6cc58089a9 Mon Sep 17 00:00:00 2001
From: AsukaMinato <i@asukaminato.eu.org>
Date: Mon, 12 Feb 2024 18:51:01 +0900
Subject: [PATCH 13/15] remove some polyfill

---
 src/core/shim.js | 90 ------------------------------------------------
 1 file changed, 90 deletions(-)

diff --git a/src/core/shim.js b/src/core/shim.js
index 8bf38fdf57..e69de29bb2 100644
--- a/src/core/shim.js
+++ b/src/core/shim.js
@@ -1,90 +0,0 @@
-// requestAnim shim layer by Paul Irish
-// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-// http://my.opera.com/emoller/blog/2011/12/20/
-// requestanimationframe-for-smart-er-animating
-// requestAnimationFrame polyfill by Erik Möller
-// fixes from Paul Irish and Tino Zijdel
-window.requestAnimationFrame = (() =>
-  window.requestAnimationFrame ||
-  window.webkitRequestAnimationFrame ||
-  window.mozRequestAnimationFrame ||
-  window.oRequestAnimationFrame ||
-  window.msRequestAnimationFrame ||
-  ((callback, element) => {
-    // should '60' here be framerate?
-    window.setTimeout(callback, 1000 / 60);
-  }))();
-
-/**
- * shim for Uint8ClampedArray.slice
- * (allows arrayCopy to work with pixels[])
- * with thanks to http://halfpapstudios.com/blog/tag/html5-canvas/
- * Enumerable set to false to protect for...in from
- * Uint8ClampedArray.prototype pollution.
- */
-(() => {
-  if (
-    typeof Uint8ClampedArray !== 'undefined' &&
-    !Uint8ClampedArray.prototype.slice
-  ) {
-    Object.defineProperty(Uint8ClampedArray.prototype, 'slice', {
-      value: Array.prototype.slice,
-      writable: true,
-      configurable: true,
-      enumerable: false
-    });
-  }
-})();
-
-/**
- * this is implementation of Object.assign() which is unavailable in
- * IE11 and (non-Chrome) Android browsers.
- * The assign() method is used to copy the values of all enumerable
- * own properties from one or more source objects to a target object.
- * It will return the target object.
- * Modified from https://github.com/ljharb/object.assign
- */
-(() => {
-  if (!Object.assign) {
-    const keys = Object.keys;
-    const defineProperty = Object.defineProperty;
-    const canBeObject = obj => typeof obj !== 'undefined' && obj !== null;
-    const hasSymbols =
-      typeof Symbol === 'function' && typeof Symbol() === 'symbol';
-    const propIsEnumerable = Object.prototype.propertyIsEnumerable;
-    const isEnumerableOn = obj =>
-      (function isEnumerable(prop) {
-        return propIsEnumerable.call(obj, prop);
-      });
-
-    // per ES6 spec, this function has to have a length of 2
-    const assignShim = function assign(target, source1) {
-      if (!canBeObject(target)) {
-        throw new TypeError('target must be an object');
-      }
-      const objTarget = Object(target);
-      let s, source, i, props;
-      for (s = 1; s < arguments.length; ++s) {
-        source = Object(arguments[s]);
-        props = keys(source);
-        if (hasSymbols && Object.getOwnPropertySymbols) {
-          props.push(
-            ...Object.getOwnPropertySymbols(source)
-              .filter(isEnumerableOn(source))
-          );
-        }
-        for (i = 0; i < props.length; ++i) {
-          objTarget[props[i]] = source[props[i]];
-        }
-      }
-      return objTarget;
-    };
-
-    defineProperty(Object, 'assign', {
-      value: assignShim,
-      configurable: true,
-      enumerable: false,
-      writable: true
-    });
-  }
-})();

From 95431c9af5f346c71c45a2877c08914105d8000e Mon Sep 17 00:00:00 2001
From: Asuka Minato <i@asukaminato.eu.org>
Date: Tue, 27 Feb 2024 12:06:26 +0900
Subject: [PATCH 14/15] remove space

---
 src/webgl/3d_primitives.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js
index c4316408f9..8d574e52a3 100644
--- a/src/webgl/3d_primitives.js
+++ b/src/webgl/3d_primitives.js
@@ -216,7 +216,7 @@ p5.prototype.freeGeometry = function(geometry) {
  * 3d red and green gradient.
  * rotating view of a multi-colored cylinder with concave sides.
  */
-p5.prototype.plane = function (
+p5.prototype.plane = function(
   width = 50,
   height = width,
   detailX = 1,
@@ -289,7 +289,7 @@ p5.prototype.plane = function (
  * </code>
  * </div>
  */
-p5.prototype.box = function (width, height, depth, detailX, detailY) {
+p5.prototype.box = function(width, height, depth, detailX, detailY) {
   this._assert3d('box');
   p5._validateParameters('box', arguments);
   if (typeof width === 'undefined') {
@@ -453,7 +453,7 @@ p5.prototype.box = function (width, height, depth, detailX, detailY) {
  * </code>
  * </div>
  */
-p5.prototype.sphere = function (radius = 50, detailX = 24, detailY = 16) {
+p5.prototype.sphere = function(radius = 50, detailX = 24, detailY = 16) {
   this._assert3d('sphere');
   p5._validateParameters('sphere', arguments);
 
@@ -663,7 +663,7 @@ const _truncatedCone = function(
  * </code>
  * </div>
  */
-p5.prototype.cylinder = function (
+p5.prototype.cylinder = function(
   radius = 50,
   height = radius,
   detailX = 24,
@@ -787,7 +787,7 @@ p5.prototype.cylinder = function (
  * </code>
  * </div>
  */
-p5.prototype.cone = function (
+p5.prototype.cone = function(
   radius = 50,
   height = radius,
   detailX = 24,
@@ -899,7 +899,7 @@ p5.prototype.cone = function (
  * </code>
  * </div>
  */
-p5.prototype.ellipsoid = function (
+p5.prototype.ellipsoid = function(
   radiusX = 50,
   radiusY = radiusX,
   radiusZ = radiusX,
@@ -1148,7 +1148,7 @@ p5.prototype.torus = function(radius, tubeRadius, detailX, detailY) {
  * </code>
  * </div>
  */
-p5.RendererGL.prototype.point = function (x, y, z = 0) {
+p5.RendererGL.prototype.point = function(x, y, z = 0) {
 
   const _vertex = [];
   _vertex.push(new p5.Vector(x, y, z));
@@ -1157,7 +1157,7 @@ p5.RendererGL.prototype.point = function (x, y, z = 0) {
   return this;
 };
 
-p5.RendererGL.prototype.triangle = function (args) {
+p5.RendererGL.prototype.triangle = function(args) {
   const x1 = args[0],
     y1 = args[1];
   const x2 = args[2],
@@ -1210,7 +1210,7 @@ p5.RendererGL.prototype.triangle = function (args) {
   return this;
 };
 
-p5.RendererGL.prototype.ellipse = function (args) {
+p5.RendererGL.prototype.ellipse = function(args) {
   this.arc(
     args[0],
     args[1],
@@ -1223,7 +1223,7 @@ p5.RendererGL.prototype.ellipse = function (args) {
   );
 };
 
-p5.RendererGL.prototype.arc = function (...args) {
+p5.RendererGL.prototype.arc = function(...args) {
   const x = args[0];
   const y = args[1];
   const width = args[2];
@@ -1340,7 +1340,7 @@ p5.RendererGL.prototype.arc = function (...args) {
   return this;
 };
 
-p5.RendererGL.prototype.rect = function (args) {
+p5.RendererGL.prototype.rect = function(args) {
   const x = args[0];
   const y = args[1];
   const width = args[2];

From 5fc46d5f1350d52f9f35494f8c71735a10749343 Mon Sep 17 00:00:00 2001
From: Asuka Minato <i@asukaminato.eu.org>
Date: Tue, 27 Feb 2024 12:12:23 +0900
Subject: [PATCH 15/15] @private

---
 src/math/p5.Vector.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/math/p5.Vector.js b/src/math/p5.Vector.js
index 2a28b2be42..8257425f32 100644
--- a/src/math/p5.Vector.js
+++ b/src/math/p5.Vector.js
@@ -342,7 +342,10 @@ p5.Vector = class {
     return this;
   }
 
-
+  /**
+   * @private
+   * @chainable
+   */
   calculateRemainder2D (xComponent, yComponent) {
     if (xComponent !== 0) {
       this.x = this.x % xComponent;
@@ -353,7 +356,10 @@ p5.Vector = class {
     return this;
   }
 
-  /// HELPERS FOR REMAINDER METHOD
+  /**
+   * @private
+   * @chainable
+   */
   calculateRemainder3D (xComponent, yComponent, zComponent) {
     if (xComponent !== 0) {
       this.x = this.x % xComponent;