p5 2.2.3 → 2.3.0-rc.1

package/dist/{main-H_nu4eDs.js → main-D2kqeMXM.js}

@@ -1,12 +1,12 @@
-import { P as P2D, ac as WEBGL, B as BLEND, al as _DEFAULT_FILL, am as _DEFAULT_STROKE, w as ROUND, b as REMOVE, S as SUBTRACT, D as DARKEST, L as LIGHTEST, an as DIFFERENCE, M as MULTIPLY, E as EXCLUSION, a as SCREEN, R as REPLACE, ao as OVERLAY, ap as HARD_LIGHT, aq as SOFT_LIGHT, ar as DODGE, as as BURN, A as ADD, at as PIE, au as CHORD, q as TWO_PI, x as SQUARE, y as PROJECT, z as BEVEL, I as MITER, a9 as RIGHT, v as CENTER, av as LEFT, aw as BOTTOM, ax as BASELINE, ay as TOP, Q as OPEN, az as VERSION, a3 as constants } from './constants-BdTiYOQI.js';
+import { P as P2D, ad as WEBGL, B as BLEND, an as _DEFAULT_FILL, ao as _DEFAULT_STROKE, u as ROUND, b as REMOVE, S as SUBTRACT, D as DARKEST, L as LIGHTEST, ap as DIFFERENCE, M as MULTIPLY, E as EXCLUSION, a as SCREEN, R as REPLACE, aq as OVERLAY, ar as HARD_LIGHT, as as SOFT_LIGHT, at as DODGE, au as BURN, A as ADD, o as TWO_PI, v as SQUARE, w as PROJECT, x as BEVEL, y as MITER, aa as RIGHT, t as CENTER, av as LEFT, aw as BOTTOM, ax as BASELINE, ay as TOP, az as VERSION, am as constants } from './constants-0wkVUfqa.js';
 import transform from './core/transform.js';
 import structure from './core/structure.js';
 import environment from './core/environment.js';
-import { G as Graphics, k as rendering, n as graphics } from './rendering-CC8JNTwG.js';
-import { R as Renderer, I as Image, r as renderer } from './p5.Renderer-BmD2P6Wv.js';
+import { G as Graphics, k as rendering, n as graphics } from './rendering-ltTIxpF2.js';
+import { R as Renderer, I as Image, r as renderer } from './p5.Renderer-CQI8PO1F.js';
 import { Element } from './dom/p5.Element.js';
 import { MediaElement } from './dom/p5.MediaElement.js';
-import { b as RGBHDR } from './creating_reading-C7hu6sg1.js';
+import { b as RGBHDR } from './creating_reading-DLkHH80h.js';
 import FilterRenderer2D from './image/filterRenderer2D.js';
 import './math/p5.Matrix.js';
 import { PrimitiveToPath2DConverter } from './shape/custom_shapes.js';
@@ -14,7 +14,6 @@ import { DefaultFill, textCoreConstants } from './type/textCore.js';
 import { Matrix } from './math/Matrices/Matrix.js';
 
 const styleEmpty = 'rgba(0,0,0,0)';
-// const alphaThreshold = 0.00125; // minimum visible
 
 class Renderer2D extends Renderer {
   constructor(pInst, w, h, isMainCanvas, elt, attributes = {}) {
@@ -31,7 +30,9 @@ class Renderer2D extends Renderer {
       this.canvas.style.display = 'none';
     }
 
-    this.elt.id = 'defaultCanvas0';
+    if(!this.elt.id){
+      this.elt.id = `defaultCanvas${p5.sketchCount++}`;
+    }
     this.elt.classList.add('p5Canvas');
 
     // Extend renderer with methods of p5.Element with getters
@@ -167,18 +168,18 @@ class Renderer2D extends Renderer {
   //////////////////////////////////////////////
 
   background(...args) {
+    if (args.length === 0) {
+      return this;// setter with no args does nothing
+    }
     this.push();
     this.resetMatrix();
-
     if (args[0] instanceof Image) {
+      const img = args[0];
       if (args[1] >= 0) {
         // set transparency of background
-        const img = args[0];
         this.drawingContext.globalAlpha = args[1] / 255;
-        this._pInst.image(img, 0, 0, this.width, this.height);
-      } else {
-        this._pInst.image(args[0], 0, 0, this.width, this.height);
       }
+      this._pInst.image(img, 0, 0, this.width, this.height);
     } else {
       // create background rect
       const color = this._pInst.color(...args);
@@ -203,6 +204,8 @@ class Renderer2D extends Renderer {
       }
     }
     this.pop();
+
+    return this;
   }
 
   clear() {
@@ -215,6 +218,9 @@ class Renderer2D extends Renderer {
   fill(...args) {
     super.fill(...args);
     const color = this.states.fillColor;
+    if (args.length === 0) {
+      return color; // getter
+    }
     this._setFill(color.toString());
 
     // Add accessible outputs if the method exists; on success,
@@ -227,6 +233,9 @@ class Renderer2D extends Renderer {
   stroke(...args) {
     super.stroke(...args);
     const color = this.states.strokeColor;
+    if (args.length === 0) {
+      return color; // getter
+    }
     this._setStroke(color.toString());
 
     // Add accessible outputs if the method exists; on success,
@@ -280,10 +289,10 @@ class Renderer2D extends Renderer {
       this.clipPath.closePath();
     } else {
       if (this.states.fillColor) {
-        this.drawingContext.fill(visitor.path);
+        this.drawingContext.fill(visitor.fillPath || visitor.path);
       }
       if (this.states.strokeColor) {
-        this.drawingContext.stroke(visitor.path);
+        this.drawingContext.stroke(visitor.strokePath || visitor.path);
       }
     }
   }
@@ -485,6 +494,9 @@ class Renderer2D extends Renderer {
   //////////////////////////////////////////////
 
   blendMode(mode) {
+    if (typeof mode === 'undefined') { // getter
+      return this._cachedBlendMode;
+    }
     if (mode === SUBTRACT) {
       console.warn('blendMode(SUBTRACT) only works in WEBGL mode.');
     } else if (
@@ -662,101 +674,35 @@ class Renderer2D extends Renderer {
    *   start <= stop < start + TWO_PI
    */
   arc(x, y, w, h, start, stop, mode) {
-    const ctx = this.drawingContext;
-
-    const centerX = x + w / 2,
-      centerY = y + h / 2,
-      radiusX = w / 2,
-      radiusY = h / 2;
-    if (this._clipping) {
-      const tempPath = new Path2D();
-      tempPath.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
-      const currentTransform = this.drawingContext.getTransform();
-      const clipBaseTransform = this._clipBaseTransform.inverse();
-      const relativeTransform = clipBaseTransform.multiply(currentTransform);
-      this.clipPath.addPath(tempPath, relativeTransform);
-      return this;
-    }
-    // Determines whether to add a line to the center, which should be done
-    // when the mode is PIE or default; as well as when the start and end
-    // angles do not form a full circle.
-    const createPieSlice = ! (
-      mode === CHORD ||
-      mode === OPEN ||
-      (stop - start) % TWO_PI === 0
+    const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
+    shape.beginShape();
+    shape.arcPrimitive(
+      x,
+      y,
+      w,
+      h,
+      start,
+      stop,
+      mode
     );
-
-    // Fill curves
-    if (this.states.fillColor) {
-      ctx.beginPath();
-      ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
-      if (createPieSlice) ctx.lineTo(centerX, centerY);
-      ctx.closePath();
-      ctx.fill();
-    }
-
-    // Stroke curves
-    if (this.states.strokeColor) {
-      ctx.beginPath();
-      ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
-
-      if (mode === PIE && createPieSlice) {
-        // In PIE mode, stroke is added to the center and back to path,
-        // unless the pie forms a complete ellipse (see: createPieSlice)
-        ctx.lineTo(centerX, centerY);
-      }
-
-      if (mode === PIE || mode === CHORD) {
-        // Stroke connects back to path begin for both PIE and CHORD
-        ctx.closePath();
-      }
-      ctx.stroke();
-    }
+    shape.endShape();
+    this.drawShape(shape);
 
     return this;
 
   }
 
   ellipse(args) {
-    const ctx = this.drawingContext;
-    const doFill = !!this.states.fillColor,
-      doStroke = this.states.strokeColor;
     const x = parseFloat(args[0]),
       y = parseFloat(args[1]),
       w = parseFloat(args[2]),
       h = parseFloat(args[3]);
-    if (doFill && !doStroke) {
-      if (this._getFill() === styleEmpty) {
-        return this;
-      }
-    } else if (!doFill && doStroke) {
-      if (this._getStroke() === styleEmpty) {
-        return this;
-      }
-    }
-    const centerX = x + w / 2,
-      centerY = y + h / 2,
-      radiusX = w / 2,
-      radiusY = h / 2;
-    if (this._clipping) {
-      const tempPath = new Path2D();
-      tempPath.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
-      const currentTransform = this.drawingContext.getTransform();
-      const clipBaseTransform = this._clipBaseTransform.inverse();
-      const relativeTransform = clipBaseTransform.multiply(currentTransform);
-      this.clipPath.addPath(tempPath, relativeTransform);
-      return this;
-    }
-    ctx.beginPath();
-    ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
-    ctx.closePath();
-    if (doFill) {
-      ctx.fill();
-    }
-    if (doStroke) {
-      ctx.stroke();
-    }
 
+    const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
+    shape.beginShape();
+    shape.ellipsePrimitive(x,y,w,h);
+    shape.endShape();
+    this.drawShape(shape);
     return this;
   }
 
@@ -1000,6 +946,9 @@ class Renderer2D extends Renderer {
   //////////////////////////////////////////////
 
   strokeCap(cap) {
+    if (typeof cap === 'undefined') { // getter
+      return this.drawingContext.lineCap;
+    }
     if (
       cap === ROUND ||
       cap === SQUARE ||
@@ -1011,6 +960,9 @@ class Renderer2D extends Renderer {
   }
 
   strokeJoin(join) {
+    if (typeof join === 'undefined') { // getter
+      return this.drawingContext.lineJoin;
+    }
     if (
       join === ROUND ||
       join === BEVEL ||
@@ -1023,7 +975,10 @@ class Renderer2D extends Renderer {
 
   strokeWeight(w) {
     super.strokeWeight(w);
-    if (typeof w === 'undefined' || w === 0) {
+    if (typeof w === 'undefined') {
+      return this.states.strokeWeight;
+    }
+    if (w === 0) {
       // hack because lineWidth 0 doesn't work
       this.drawingContext.lineWidth = 0.0001;
     } else {
@@ -1086,16 +1041,22 @@ class Renderer2D extends Renderer {
 
   rotate(rad) {
     this.drawingContext.rotate(rad);
+    return this;
   }
 
   scale(x, y) {
+    // support passing objects with x,y properties (including p5.Vector)
+    if (typeof x === 'object' && 'x' in x && 'y' in x) {
+      y = x.y;
+      x = x.x;
+    }
     this.drawingContext.scale(x, y);
     return this;
   }
 
   translate(x, y) {
-    // support passing a vector as the 1st parameter
-    if (x instanceof p5.Vector) {
+    // support passing objects with x,y properties (including p5.Vector)
+    if (typeof x === 'object' && 'x' in x && 'y' in x) {
       y = x.y;
       x = x.x;
     }
@@ -1257,7 +1218,6 @@ function renderer2D(p5, fn){
  * @module Structure
  * @submodule Structure
  * @for p5
- * @requires constants
  */
 
 
@@ -1289,6 +1249,7 @@ class p5 {
   // This is a pointer to our global mode p5 instance, if we're in
   // global mode.
   static instance = null;
+  static sketchCount = 0;
   static lifecycleHooks = {
     presetup: [],
     postsetup: [],
@@ -1304,7 +1265,7 @@ class p5 {
   constructor(sketch, node) {
     // Apply addon defined decorations
     if(p5.decorations.size > 0){
-      decorateClass(p5, p5.decorations);
+      decorateClass(p5, p5.decorations, 'p5');
       p5.decorations.clear();
     }
 
@@ -1379,19 +1340,24 @@ class p5 {
     const blurHandler = () => {
       this.focused = false;
     };
-    window.addEventListener('focus', focusHandler);
-    window.addEventListener('blur', blurHandler);
-    p5.lifecycleHooks.remove.push(function() {
-      window.removeEventListener('focus', focusHandler);
-      window.removeEventListener('blur', blurHandler);
-    });
 
-    // Initialization complete, start runtime
-    if (document.readyState === 'complete') {
+    if(typeof window !== 'undefined'){
+      window.addEventListener('focus', focusHandler);
+      window.addEventListener('blur', blurHandler);
+      p5.lifecycleHooks.remove.push(function() {
+        window.removeEventListener('focus', focusHandler);
+        window.removeEventListener('blur', blurHandler);
+      });
+
+      // Initialization complete, start runtime
+      if (document.readyState === 'complete') {
+        this.#_start();
+      } else {
+        this._startListener = this.#_start.bind(this);
+        window.addEventListener('load', this._startListener, false);
+      }
+    }else {
       this.#_start();
-    } else {
-      this._startListener = this.#_start.bind(this);
-      window.addEventListener('load', this._startListener, false);
     }
   }
 
@@ -1478,15 +1444,17 @@ class p5 {
     // Always create a default canvas.
     // Later on if the user calls createCanvas, this default one
     // will be replaced
-    this.createCanvas(
-      100,
-      100,
-      P2D
-    );
+    if(typeof window !== 'undefined'){
+      this.createCanvas(
+        100,
+        100,
+        P2D
+      );
+    }
 
     // Record the time when setup starts. millis() will start at 0 within
     // setup, but this isn't documented, locked-in behavior yet.
-    this._millisStart = window.performance.now();
+    this._millisStart = globalThis.performance.now();
 
     const context = this._isGlobal ? window : this;
     if (typeof context.setup === 'function') {
@@ -1494,21 +1462,23 @@ class p5 {
     }
     if (this.hitCriticalError) return;
 
-    const canvases = document.getElementsByTagName('canvas');
-    for (const k of canvases) {
-      // Apply touchAction = 'none' to canvases to prevent scrolling
-      // when dragging on canvas elements
-      k.style.touchAction = 'none';
-
-      // unhide any hidden canvases that were created
-      if (k.dataset.hidden === 'true') {
-        k.style.visibility = '';
-        delete k.dataset.hidden;
+    if(typeof document !== 'undefined'){
+      const canvases = document.getElementsByTagName('canvas');
+      for (const k of canvases) {
+        // Apply touchAction = 'none' to canvases to prevent scrolling
+        // when dragging on canvas elements
+        k.style.touchAction = 'none';
+
+        // unhide any hidden canvases that were created
+        if (k.dataset.hidden === 'true') {
+          k.style.visibility = '';
+          delete k.dataset.hidden;
+        }
       }
     }
 
-    this._lastTargetFrameTime = window.performance.now();
-    this._lastRealFrameTime = window.performance.now();
+    this._lastTargetFrameTime = globalThis.performance.now();
+    this._lastRealFrameTime = globalThis.performance.now();
     this._setupDone = true;
     if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
       this._updateAccsOutput();
@@ -1519,7 +1489,7 @@ class p5 {
 
     // Record the time when the draw loop starts so that millis() starts at 0
     // when the draw loop begins.
-    this._millisStart = window.performance.now();
+    this._millisStart = globalThis.performance.now();
   }
 
   // While '#_draw' here is async, it is not awaited as 'requestAnimationFrame'
@@ -1529,7 +1499,7 @@ class p5 {
   // and 'postdraw'.
   async _draw(requestAnimationFrameTimestamp) {
     if (this.hitCriticalError) return;
-    const now = requestAnimationFrameTimestamp || window.performance.now();
+    const now = requestAnimationFrameTimestamp || globalThis.performance.now();
     const timeSinceLastFrame = now - this._lastTargetFrameTime;
     const targetTimeBetweenFrames = 1000 / this._targetFrameRate;
 
@@ -1571,9 +1541,10 @@ class p5 {
     // get notified the next time the browser gives us
     // an opportunity to draw.
     if (this._loop) {
-      this._requestAnimId = window.requestAnimationFrame(
-        this._draw.bind(this)
-      );
+      const boundDraw = this._draw.bind(this);
+      this._requestAnimId = typeof window !== 'undefined' ?
+        window.requestAnimationFrame(boundDraw) :
+        setImmediate(boundDraw);
     }
   }
 
@@ -1775,7 +1746,6 @@ function createBindGlobal(instance) {
 
 // Generic function to decorate classes
 function decorateClass(Target, decorations, path){
-  path ??= Target.name;
   // Static properties
   for(const key in Target){
     if(!key.startsWith('_')){
@@ -1917,6 +1887,7 @@ p5.registerAddon(graphics);
  *
  * @method setup
  * @for p5
+ * @return {void|Promise<void>}
  *
  * @example
  * function setup() {

package/dist/math/Matrices/Matrix.js

@@ -1,6 +1,6 @@
 import { Vector } from '../p5.Vector.js';
 import { MatrixInterface } from './MatrixInterface.js';
-import '../../constants-BdTiYOQI.js';
+import '../../constants-0wkVUfqa.js';
 
 /**
  * @module Math

package/dist/math/Matrices/MatrixNumjs.js

@@ -1,7 +1,7 @@
 import nj from '@d4c/numjs/build/module/numjs.min.js';
 import { Vector } from '../p5.Vector.js';
 import { MatrixInterface } from './MatrixInterface.js';
-import '../../constants-BdTiYOQI.js';
+import '../../constants-0wkVUfqa.js';
 
 let isMatrixArray = x => Array.isArray(x);
 if (typeof Float32Array !== 'undefined') {

package/dist/math/calculation.js

@@ -2,7 +2,6 @@
  * @module Math
  * @submodule Calculation
  * @for p5
- * @requires core
  */
 
 function calculation(p5, fn){

package/dist/math/index.js

@@ -4,7 +4,8 @@ import random from './random.js';
 import trigonometry from './trigonometry.js';
 import math$1 from './math.js';
 import vector from './p5.Vector.js';
-import '../constants-BdTiYOQI.js';
+import vectorValidation from './patch-vector.js';
+import '../constants-0wkVUfqa.js';
 
 function math(p5){
   p5.registerAddon(calculation);
@@ -13,6 +14,7 @@ function math(p5){
   p5.registerAddon(trigonometry);
   p5.registerAddon(math$1);
   p5.registerAddon(vector);
+  p5.registerAddon(vectorValidation);
 }
 
 export { math as default };

package/dist/math/math.js

@@ -1,7 +1,6 @@
 /**
  * @module Math
  * @for p5
- * @requires core
  */
 
 function math(p5, fn) {
@@ -38,7 +37,7 @@ function math(p5, fn) {
    * <a href="#/p5.Vector">p5.Vector</a> class.
    *
    * @method createVector
-   * @param {...Number} x Zero or more numbers, representing each component of the vector.
+   * @param {...Number} x List of numbers representing each component of the vector.
    * @return {p5.Vector} new <a href="#/p5.Vector">p5.Vector</a> object.
    *
    * @example
@@ -92,21 +91,8 @@ function math(p5, fn) {
    *   point(pos);
    * }
    */
-  fn.createVector = function (x, y, z) {
-    if (arguments.length === 0) {
-      p5._friendlyError(
-        'In 1.x, createVector() was a shortcut for createVector(0, 0, 0). In 2.x, p5.js has vectors of any dimension, so you must provide your desired number of zeros. Use createVector(0, 0) for a 2D vector and createVector(0, 0, 0) for a 3D vector.'
-      );
-    }
-    if (this instanceof p5) {
-      return new p5.Vector(
-        this._fromRadians.bind(this),
-        this._toRadians.bind(this),
-        ...arguments
-      );
-    } else {
-      return new p5.Vector(x, y, z);
-    }
+  fn.createVector = function (...args) {
+    return new p5.Vector(...args);
   };
 
   /**

package/dist/math/noise.js

@@ -15,7 +15,6 @@
  * @module Math
  * @submodule Noise
  * @for p5
- * @requires core
  */
 function noise(p5, fn){
   const PERLIN_YWRAPB = 4;

package/dist/math/p5.Matrix.js

@@ -1,11 +1,10 @@
 import { Matrix } from './Matrices/Matrix.js';
 import './p5.Vector.js';
-import '../constants-BdTiYOQI.js';
+import '../constants-0wkVUfqa.js';
 import './Matrices/MatrixInterface.js';
 
 /**
  * @module Math
- * @requires constants
  * @todo see methods below needing further implementation.
  * future consideration: implement SIMD optimizations
  * when browser compatibility becomes available