p5 2.2.3-rc.1 → 2.2.3

package/lib/p5.esm.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.2.3-rc.1 March 16, 2026 */
+/*! p5.js v2.2.3 March 21, 2026 */
 /**
  * @module Constants
  * @submodule Constants
@@ -12,7 +12,7 @@ const _PI = Math.PI;
  * @property {String} VERSION
  * @final
  */
-const VERSION = '2.2.3-rc.1';
+const VERSION = '2.2.3';
 
 // GRAPHICS RENDERER
 /**
@@ -12788,7 +12788,7 @@ class XML {
    * Returns the element's name as a `String`.
    *
    * An XML element's name is given by its tag. For example, the element
-   * `<language>JavaScript</language>` has the name `language`.
+   * `<language>JavaScript</language>` has the name `language`.
    *
    * @return {String} name of the element.
    *
@@ -12831,11 +12831,11 @@ class XML {
    * Sets the element's tag name.
    *
    * An XML element's name is given by its tag. For example, the element
-   * `&lt;language&gt;JavaScript&lt;/language&gt;` has the name `language`.
+   * `<language>JavaScript</language>` has the name `language`.
    *
    * The parameter, `name`, is the element's new name as a string. For example,
    * calling `myXML.setName('planet')` will make the element's new tag name
-   * `&lt;planet&gt;&lt;/planet&gt;`.
+   * `<planet></planet>`.
    *
    * @param {String} name new tag name of the element.
    *
@@ -12977,7 +12977,7 @@ class XML {
    *
    * The parameter, `name`, is optional. If a string is passed, as in
    * `myXML.getChildren('cat')`, then the method will only return child elements
-   * with the tag `&lt;cat&gt;`.
+   * with the tag `<cat>`.
    *
    * @param {String} [name] name of the elements to return.
    * @return {p5.XML[]} child elements.
@@ -13071,7 +13071,7 @@ class XML {
    *
    * The parameter, `name`, is optional. If a string is passed, as in
    * `myXML.getChild('cat')`, then the first child element with the tag
-   * `&lt;cat&gt;` will be returned. If a number is passed, as in
+   * `<cat>` will be returned. If a number is passed, as in
    * `myXML.getChild(1)`, then the child element at that index will be returned.
    *
    * @param {String|Integer} name element name or index.
@@ -13204,7 +13204,7 @@ class XML {
    *
    * The parameter, `name`, is the child element to remove. If a string is
    * passed, as in `myXML.removeChild('cat')`, then the first child element
-   * with the tag `&lt;cat&gt;` will be removed. If a number is passed, as in
+   * with the tag `<cat>` will be removed. If a number is passed, as in
    * `myXML.removeChild(1)`, then the child element at that index will be
    * removed.
    *
@@ -13758,7 +13758,7 @@ class XML {
    * Sets the element's content.
    *
    * An element's content is the text between its tags. For example, the element
-   * `&lt;language&gt;JavaScript&lt;/language&gt;` has the content `JavaScript`.
+   * `<language>JavaScript</language>` has the content `JavaScript`.
    *
    * The parameter, `content`, is a string with the element's new content.
    *
@@ -13876,7 +13876,7 @@ function xml(p5, fn){
    * (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction" target="_blank">XML</a>)
    * is a standard format for sending data between applications. Like HTML, the
    * XML format is based on tags and attributes, as in
-   * `&lt;time units="s"&gt;1234&lt;/time&gt;`.
+   * `<time units="s">1234</time>`.
    *
    * Note: Use <a href="#/p5/loadXML">loadXML()</a> to load external XML files.
    *
@@ -14370,9 +14370,9 @@ class Element {
   /**
    * Attaches the element to a parent element.
    *
-   * For example, a `&lt;div&gt;&lt;/div&gt;` element may be used as a box to
+   * For example, a `<div></div>` element may be used as a box to
    * hold two pieces of text, a header and a paragraph. The
-   * `&lt;div&gt;&lt;/div&gt;` is the parent element of both the header and
+   * `<div></div>` is the parent element of both the header and
    * paragraph.
    *
    * The parameter `parent` can have one of three types. `parent` can be a
@@ -18943,8 +18943,9 @@ class Image {
         props.displayIndex = index;
         this.drawingContext.putImageData(props.frames[index].image, 0, 0);
       } else {
-        console.log(
-          'Cannot set GIF to a frame number that is higher than total number of frames or below zero.'
+        p5._friendlyError(
+          'Cannot set GIF to a frame number that is higher than total number of frames or below zero.',
+          'setFrame'
         );
       }
     }
@@ -27690,7 +27691,6 @@ class MediaElement extends Element {
   removeCue(id) {
     for (let i = 0; i < this._cues.length; i++) {
       if (this._cues[i].id === id) {
-        console.log(id);
         this._cues.splice(i, 1);
       }
     }
@@ -27840,7 +27840,7 @@ function media(p5, fn){
   }
 
   /**
-   * Creates a `&lt;video&gt;` element for simple audio/video playback.
+   * Creates a `<video>` element for simple audio/video playback.
    *
    * `createVideo()` returns a new
    * <a href="#/p5.MediaElement">p5.MediaElement</a> object. Videos are shown by
@@ -27928,7 +27928,7 @@ function media(p5, fn){
   /* AUDIO STUFF */
 
   /**
-   * Creates a hidden `&lt;audio&gt;` element for simple audio playback.
+   * Creates a hidden `<audio>` element for simple audio playback.
    *
    * `createAudio()` returns a new
    * <a href="#/p5.MediaElement">p5.MediaElement</a> object.
@@ -28005,7 +28005,7 @@ function media(p5, fn){
   }
 
   /**
-   * Creates a `&lt;video&gt;` element that "captures" the audio/video stream from
+   * Creates a `<video>` element that "captures" the audio/video stream from
    * the webcam and microphone.
    *
    * `createCapture()` returns a new
@@ -36807,7 +36807,7 @@ function files(p5, fn){
    * (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction" target="_blank">XML</a>)
    * is a standard format for sending data between applications. Like HTML, the
    * XML format is based on tags and attributes, as in
-   * `&lt;time units="s"&gt;1234&lt;/time&gt;`.
+   * `<time units="s">1234</time>`.
    *
    * The first parameter, `path`, is always a string with the path to the file.
    * Paths to local files should be relative, as in
@@ -55124,11 +55124,6 @@ function primitives3D(p5, fn){
    * The parameter, `callback`, is a function with the drawing instructions for
    * the new <a href="#/p5.Geometry">p5.Geometry</a> object. It will be called
    * once to create the new 3D shape.
-   *
-   * See <a href="#/p5/beginGeometry">beginGeometry()</a> and
-   * <a href="#/p5/endGeometry">endGeometry()</a> for another way to build 3D
-   * shapes.
-   *
    * Note: `buildGeometry()` can only be used in WebGL mode.
    *
    * @method buildGeometry
@@ -55332,12 +55327,8 @@ function primitives3D(p5, fn){
    * <a href="#/p5.Geometry">p5.Geometry</a> objects can contain lots of data
    * about their vertices, surface normals, colors, and so on. Complex 3D shapes
    * can use lots of memory which is a limited resource in many GPUs. Calling
-   * `freeGeometry()` can improve performance by freeing a
-   * <a href="#/p5.Geometry">p5.Geometry</a> object’s resources from GPU memory.
    * `freeGeometry()` works with <a href="#/p5.Geometry">p5.Geometry</a> objects
-   * created with <a href="#/p5/beginGeometry">beginGeometry()</a> and
-   * <a href="#/p5/endGeometry">endGeometry()</a>,
-   * <a href="#/p5/buildGeometry">buildGeometry()</a>, and
+   * created with <a href="#/p5/buildGeometry">buildGeometry()</a> and
    * <a href="#/p5/loadModel">loadModel()</a>.
    *
    * The parameter, `geometry`, is the <a href="#/p5.Geometry">p5.Geometry</a>
@@ -55353,24 +55344,6 @@ function primitives3D(p5, fn){
    * @param {p5.Geometry} geometry 3D shape whose resources should be freed.
    *
    * @example
-   * function setup() {
-   *   createCanvas(100, 100, WEBGL);
-   *
-   *   background(200);
-   *
-   *   // Create a p5.Geometry object.
-   *   beginGeometry();
-   *   cone();
-   *   let shape = endGeometry();
-   *
-   *   // Draw the shape.
-   *   model(shape);
-   *
-   *   // Free the shape's resources.
-   *   freeGeometry(shape);
-   * }
-   *
-   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let button;
@@ -65474,7 +65447,7 @@ class Graphics {
    * Removes the graphics buffer from the web page.
    *
    * Calling `myGraphics.remove()` removes the graphics buffer's
-   * `&lt;canvas&gt;` element from the web page. The graphics buffer also uses
+   * `<canvas>` element from the web page. The graphics buffer also uses
    * a bit of memory on the CPU that can be freed like so:
    *
    * ```js
@@ -65830,7 +65803,7 @@ function graphics(p5, fn){
    * @param {Number} h            height height of the graphics buffer in pixels.
    * @param {(P2D|WEBGL|P2DHDR)} renderer   the renderer to use, either P2D or WEBGL.
    * @param {p5} [pInst]          sketch instance.
-   * @param {HTMLCanvasElement} [canvas]     existing `&lt;canvas&gt;` element to use.
+   * @param {HTMLCanvasElement} [canvas]     existing `<canvas>` element to use.
    *
    * @example
    * let pg;
@@ -68809,9 +68782,9 @@ function rendering(p5, fn){
 
   /**
    * A system variable that provides direct access to the sketch's
-   * `&lt;canvas&gt;` element.
+   * `<canvas>` element.
    *
-   * The `&lt;canvas&gt;` element provides many specialized features that aren't
+   * The `<canvas>` element provides many specialized features that aren't
    * included in the p5.js library. The `drawingContext` system variable
    * provides access to these features by exposing the sketch's
    * <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a>
@@ -97294,18 +97267,20 @@ function storage(p5, fn){
    */
   fn.storeItem = function(key, value) {
     if (typeof key !== 'string') {
-      console.log(
-        `The argument that you passed to storeItem() - ${key} is not a string.`
+      p5._friendlyError(
+        `The argument that you passed to storeItem() - ${key} is not a string.`,
+        'storeItem'
       );
     }
     if (key.endsWith('p5TypeID')) {
-      console.log(
-        `The argument that you passed to storeItem() - ${key} must not end with 'p5TypeID'.`
+      p5._friendlyError(
+        `The argument that you passed to storeItem() - ${key} must not end with 'p5TypeID'.`,
+        'storeItem'
       );
     }
 
     if (typeof value === 'undefined') {
-      console.log('You cannot store undefined variables using storeItem().');
+      p5._friendlyError('You cannot store undefined variables using storeItem().', 'storeItem');
     }
     let type = typeof value;
     switch (type) {
@@ -97440,8 +97415,9 @@ function storage(p5, fn){
     let value = localStorage.getItem(key);
     const type = localStorage.getItem(`${key}p5TypeID`);
     if (typeof type === 'undefined') {
-      console.log(
-        `Unable to determine type of item stored under ${key}in local storage. Did you save the item with something other than setItem()?`
+      p5._friendlyError(
+        `Unable to determine type of item stored under ${key}in local storage. Did you save the item with something other than setItem()?`,
+        'getItem'
       );
     } else if (value !== null) {
       switch (type) {
@@ -97592,8 +97568,9 @@ function storage(p5, fn){
    */
   fn.removeItem = function(key) {
     if (typeof key !== 'string') {
-      console.log(
-        `The argument that you passed to removeItem() - ${key} is not a string.`
+      p5._friendlyError(
+        `The argument that you passed to removeItem() - ${key} is not a string.`,
+        'removeItem'
       );
     }
     localStorage.removeItem(key);
@@ -97979,16 +97956,16 @@ function dom$1(p5, fn){
   }
 
   /**
-   * Creates a `&lt;div&gt;&lt;/div&gt;` element.
+   * Creates a `<div></div>` element.
    *
-   * `&lt;div&gt;&lt;/div&gt;` elements are commonly used as containers for
+   * `<div></div>` elements are commonly used as containers for
    * other elements.
    *
    * The parameter `html` is optional. It accepts a string that sets the
-   * inner HTML of the new `&lt;div&gt;&lt;/div&gt;`.
+   * inner HTML of the new `<div></div>`.
    *
    * @method createDiv
-   * @param  {String} [html] inner HTML for the new `&lt;div&gt;&lt;/div&gt;` element.
+   * @param  {String} [html] inner HTML for the new `<div></div>` element.
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
@@ -98026,13 +98003,13 @@ function dom$1(p5, fn){
   /**
    * Creates a paragraph element.
    *
-   * `&lt;p&gt;&lt;/p&gt;` elements are commonly used for paragraph-length text.
+   * `<p></p>` elements are commonly used for paragraph-length text.
    *
    * The parameter `html` is optional. It accepts a string that sets the
-   * inner HTML of the new `&lt;p&gt;&lt;/p&gt;`.
+   * inner HTML of the new `<p></p>`.
    *
    * @method createP
-   * @param  {String} [html] inner HTML for the new `&lt;p&gt;&lt;/p&gt;` element.
+   * @param  {String} [html] inner HTML for the new `<p></p>` element.
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
@@ -98055,18 +98032,18 @@ function dom$1(p5, fn){
   };
 
   /**
-   * Creates a `&lt;span&gt;&lt;/span&gt;` element.
+   * Creates a `<span></span>` element.
    *
-   * `&lt;span&gt;&lt;/span&gt;` elements are commonly used as containers
-   * for inline elements. For example, a `&lt;span&gt;&lt;/span&gt;`
+   * `<span></span>` elements are commonly used as containers
+   * for inline elements. For example, a `<span></span>`
    * can hold part of a sentence that's a
    * <span style="color: deeppink;">different</span> style.
    *
    * The parameter `html` is optional. It accepts a string that sets the
-   * inner HTML of the new `&lt;span&gt;&lt;/span&gt;`.
+   * inner HTML of the new `<span></span>`.
    *
    * @method createSpan
-   * @param  {String} [html] inner HTML for the new `&lt;span&gt;&lt;/span&gt;` element.
+   * @param  {String} [html] inner HTML for the new `<span></span>` element.
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
@@ -98119,7 +98096,7 @@ function dom$1(p5, fn){
   };
 
   /**
-   * Creates an `&lt;img&gt;` element that can appear outside of the canvas.
+   * Creates an `<img>` element that can appear outside of the canvas.
    *
    * The first parameter, `src`, is a string with the path to the image file.
    * `src` should be a relative path, as in `'assets/image.png'`, or a URL, as
@@ -98190,7 +98167,7 @@ function dom$1(p5, fn){
   };
 
   /**
-   * Creates an `&lt;a&gt;&lt;/a&gt;` element that links to another web page.
+   * Creates an `<a></a>` element that links to another web page.
    *
    * The first parmeter, `href`, is a string that sets the URL of the linked
    * page.
@@ -98247,7 +98224,7 @@ function dom$1(p5, fn){
 
   /* INPUT */
   /**
-   * Creates a slider `&lt;input&gt;&lt;/input&gt;` element.
+   * Creates a slider `<input></input>` element.
    *
    * Range sliders are useful for quickly selecting numbers from a given range.
    *
@@ -98369,7 +98346,7 @@ function dom$1(p5, fn){
   };
 
   /**
-   * Creates a `&lt;button&gt;&lt;/button&gt;` element.
+   * Creates a `<button></button>` element.
    *
    * The first parameter, `label`, is a string that sets the label displayed on
    * the button.
@@ -98446,7 +98423,7 @@ function dom$1(p5, fn){
   };
 
   /**
-   * Creates a checkbox `&lt;input&gt;&lt;/input&gt;` element.
+   * Creates a checkbox `<input></input>` element.
    *
    * Checkboxes extend the <a href="#/p5.Element">p5.Element</a> class with a
    * `checked()` method. Calling `myBox.checked()` returns `true` if it the box
@@ -98587,11 +98564,11 @@ function dom$1(p5, fn){
   };
 
   /**
-   * Creates a dropdown menu `&lt;select&gt;&lt;/select&gt;` element.
+   * Creates a dropdown menu `<select></select>` element.
    *
    * The parameter is optional. If `true` is passed, as in
    * `let mySelect = createSelect(true)`, then the dropdown will support
-   * multiple selections. If an existing `&lt;select&gt;&lt;/select&gt;` element
+   * multiple selections. If an existing `<select></select>` element
    * is passed, as in `let mySelect = createSelect(otherSelect)`, the existing
    * element will be wrapped in a new <a href="#/p5.Element">p5.Element</a>
    * object.
@@ -98858,8 +98835,8 @@ function dom$1(p5, fn){
    *
    * The parameter is optional. If a string is passed, as in
    * `let myRadio = createSelect('food')`, then each radio option will
-   * have `"food"` as its `name` parameter: `&lt;input name="food"&gt;&lt;/input&gt;`.
-   * If an existing `&lt;div&gt;&lt;/div&gt;` or `&lt;span&gt;&lt;/span&gt;`
+   * have `"food"` as its `name` parameter: `<input name="food"></input>`.
+   * If an existing `<div></div>` or `<span></span>`
    * element is passed, as in `let myRadio = createSelect(container)`, it will
    * become the radio button's parent element.
    *
@@ -98872,8 +98849,8 @@ function dom$1(p5, fn){
    * - `myRadio.disable(shouldDisable)` enables the entire radio button if `true` is passed and disables it if `false` is passed.
    *
    * @method createRadio
-   * @param  {Object} [containerElement] container HTML Element, either a `&lt;div&gt;&lt;/div&gt;`
-   * or `&lt;span&gt;&lt;/span&gt;`.
+   * @param  {Object} [containerElement] container HTML Element, either a `<div></div>`
+   * or `<span></span>`.
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
@@ -98992,7 +98969,7 @@ function dom$1(p5, fn){
    */
   /**
    * @method createRadio
-   * @param {String} [name] name parameter assigned to each option's `&lt;input&gt;&lt;/input&gt;` element.
+   * @param {String} [name] name parameter assigned to each option's `<input></input>` element.
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    */
   /**
@@ -99259,7 +99236,7 @@ function dom$1(p5, fn){
   };
 
   /**
-   * Creates a text `&lt;input&gt;&lt;/input&gt;` element.
+   * Creates a text `<input></input>` element.
    *
    * Call `myInput.size()` to set the length of the text box.
    *
@@ -99335,7 +99312,7 @@ function dom$1(p5, fn){
   };
 
   /**
-   * Creates an `&lt;input&gt;&lt;/input&gt;` element of type `'file'`.
+   * Creates an `<input></input>` element of type `'file'`.
    *
    * `createFileInput()` allows users to select local files for use in a sketch.
    * It returns a <a href="#/p5.File">p5.File</a> object.
@@ -99440,8 +99417,9 @@ function dom$1(p5, fn){
 
     // If File API's are not supported, throw Error
     if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
-      console.log(
-        'The File APIs are not fully supported in this browser. Cannot create element.'
+      p5._friendlyError(
+        'The File APIs are not fully supported in this browser. Cannot create element.',
+        'createFileInput'
       );
       return;
     }
@@ -103140,7 +103118,7 @@ function pointer(p5, fn, lifecycles){
     canvas.requestPointerLock =
       canvas.requestPointerLock || canvas.mozRequestPointerLock;
     if (!canvas.requestPointerLock) {
-      console.log('requestPointerLock is not implemented in this browser');
+      p5._friendlyError('requestPointerLock is not implemented in this browser', 'requestPointerLock');
       return false;
     }
     canvas.requestPointerLock();
@@ -110734,9 +110712,7 @@ function loading$1(p5, fn){
    * The parameter, `model`, is the
    * <a href="#/p5.Geometry">p5.Geometry</a> object to draw.
    * <a href="#/p5.Geometry">p5.Geometry</a> objects can be built with
-   * <a href="#/p5/buildGeometry">buildGeometry()</a>, or
-   * <a href="#/p5/beginGeometry">beginGeometry()</a> and
-   * <a href="#/p5/endGeometry">endGeometry()</a>. They can also be loaded from
+   * <a href="#/p5/buildGeometry">buildGeometry()</a>. They can also be loaded from
    * a file with <a href="#/p5/loadGeometry">loadGeometry()</a>.
    *
    * Note: `model()` can only be used in WebGL mode.