p5 2.2.3-rc.1 → 2.2.3

package/lib/p5.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.2.3-rc.1 March 16, 2026 */
+/*! p5.js v2.2.3 March 21, 2026 */
 var p5 = (function () {
   'use strict';
 
@@ -15,7 +15,7 @@ var p5 = (function () {
    * @property {String} VERSION
    * @final
    */
-  const VERSION = '2.2.3-rc.1';
+  const VERSION = '2.2.3';
 
   // GRAPHICS RENDERER
   /**
@@ -12791,7 +12791,7 @@ var p5 = (function () {
      * 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.
      *
@@ -12834,11 +12834,11 @@ var p5 = (function () {
      * 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.
      *
@@ -12980,7 +12980,7 @@ var p5 = (function () {
      *
      * 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.
@@ -13074,7 +13074,7 @@ var p5 = (function () {
      *
      * 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.
@@ -13207,7 +13207,7 @@ var p5 = (function () {
      *
      * 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.
      *
@@ -13761,7 +13761,7 @@ var p5 = (function () {
      * 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.
      *
@@ -13879,7 +13879,7 @@ var p5 = (function () {
      * (<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.
      *
@@ -14373,9 +14373,9 @@ var p5 = (function () {
     /**
      * 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
@@ -18946,8 +18946,9 @@ var p5 = (function () {
           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'
           );
         }
       }
@@ -27693,7 +27694,6 @@ var p5 = (function () {
     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);
         }
       }
@@ -27843,7 +27843,7 @@ var p5 = (function () {
     }
 
     /**
-     * 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
@@ -27931,7 +27931,7 @@ var p5 = (function () {
     /* 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.
@@ -28008,7 +28008,7 @@ var p5 = (function () {
     }
 
     /**
-     * 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
@@ -36810,7 +36810,7 @@ var p5 = (function () {
      * (<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
@@ -55127,11 +55127,6 @@ var p5 = (function () {
      * 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
@@ -55335,12 +55330,8 @@ var p5 = (function () {
      * <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>
@@ -55356,24 +55347,6 @@ var p5 = (function () {
      * @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;
@@ -65477,7 +65450,7 @@ var p5 = (function () {
      * 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
@@ -65833,7 +65806,7 @@ var p5 = (function () {
      * @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;
@@ -68812,9 +68785,9 @@ var p5 = (function () {
 
     /**
      * 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>
@@ -97297,18 +97270,20 @@ var p5 = (function () {
      */
     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) {
@@ -97443,8 +97418,9 @@ var p5 = (function () {
       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) {
@@ -97595,8 +97571,9 @@ var p5 = (function () {
      */
     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);
@@ -97982,16 +97959,16 @@ var p5 = (function () {
     }
 
     /**
-     * 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
@@ -98029,13 +98006,13 @@ var p5 = (function () {
     /**
      * 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
@@ -98058,18 +98035,18 @@ var p5 = (function () {
     };
 
     /**
-     * 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
@@ -98122,7 +98099,7 @@ var p5 = (function () {
     };
 
     /**
-     * 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
@@ -98193,7 +98170,7 @@ var p5 = (function () {
     };
 
     /**
-     * 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.
@@ -98250,7 +98227,7 @@ var p5 = (function () {
 
     /* 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.
      *
@@ -98372,7 +98349,7 @@ var p5 = (function () {
     };
 
     /**
-     * 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.
@@ -98449,7 +98426,7 @@ var p5 = (function () {
     };
 
     /**
-     * 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
@@ -98590,11 +98567,11 @@ var p5 = (function () {
     };
 
     /**
-     * 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.
@@ -98861,8 +98838,8 @@ var p5 = (function () {
      *
      * 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.
      *
@@ -98875,8 +98852,8 @@ var p5 = (function () {
      * - `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
@@ -98995,7 +98972,7 @@ var p5 = (function () {
      */
     /**
      * @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.
      */
     /**
@@ -99262,7 +99239,7 @@ var p5 = (function () {
     };
 
     /**
-     * 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.
      *
@@ -99338,7 +99315,7 @@ var p5 = (function () {
     };
 
     /**
-     * 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.
@@ -99443,8 +99420,9 @@ var p5 = (function () {
 
       // 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;
       }
@@ -103143,7 +103121,7 @@ var p5 = (function () {
       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();
@@ -110737,9 +110715,7 @@ var p5 = (function () {
      * 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.