p5 2.2.3-rc.0 → 2.2.3

package/lib/p5.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.2.3-rc.0 March 10, 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.0';
+  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;
@@ -59610,24 +59583,28 @@ var p5 = (function () {
      *
      * In addition to calling hooks, you can create uniforms, which are special variables
      * used to pass data from p5.js into the shader. They can be created by calling `uniform` + the
-     * type of the data, such as `uniformFloat` for a number of `uniformVector2` for a two-component vector.
+     * type of the data, such as `uniformFloat` for a number or `uniformVector2` for a two-component vector.
      * They take in a function that returns the data for the variable. You can then reference these
      * variables in your hooks, and their values will update every time you apply
-     * the shader with the result of your function.
+     * the shader with the result of your function.  
+     * 
+     * Move the mouse over this sketch to increase the moveCounter which will be passed to the shader as a uniform.
      *
      * ```js example
      * let myShader;
-     *
+     * //count of frames in which mouse has been moved
+     * let moveCounter = 0;
+     * 
      * function setup() {
      *   createCanvas(200, 200, WEBGL);
      *   myShader = baseMaterialShader().modify(() => {
-     *     // Get the current time from p5.js
-     *     let t = uniformFloat(() => millis());
+     *     // Get the move counter from our sketch
+     *     let count = uniformFloat(() => moveCounter);
      *
      *     getPixelInputs((inputs) => {
      *       inputs.color = [
      *         inputs.texCoord,
-     *         sin(t * 0.01) / 2 + 0.5,
+     *         sin(count/100) / 2 + 0.5,
      *         1,
      *       ];
      *       return inputs;
@@ -59635,6 +59612,10 @@ var p5 = (function () {
      *   });
      * }
      *
+     * function mouseDragged(){
+     *   moveCounter += 1;
+     * }
+     *
      * function draw() {
      *   background(255);
      *   noStroke(255);
@@ -61013,7 +60994,7 @@ var p5 = (function () {
      *   // Make a version of the shader with a hook overridden
      *   modifiedShader = myShader.modify(() => {
      *     // Create new uniforms and override the getColor hook
-     *     let t = uniformFloat(() => millis() / 1000);
+     *     let t = millis() / 1000;
      *     getColor(() => {
      *       return [0, 0.5 + 0.5 * sin(t), 1, 1];
      *     });
@@ -61259,7 +61240,7 @@ var p5 = (function () {
      * }
      * ```
      *
-     * You can also animate your filters over time by passing the time into the shader with `uniformFloat`.
+     * You can also animate your filters over time using the `millis()` function.
      *
      * ```js example
      * let myFilter;
@@ -61270,7 +61251,7 @@ var p5 = (function () {
      * }
      *
      * function gradient() {
-     *   let time = uniformFloat();
+     *   let time = millis();
      *   filterColor.begin();
      *   filterColor.set(mix(
      *     [1, 0, 0, 1], // Red
@@ -61281,12 +61262,11 @@ var p5 = (function () {
      * }
      *
      * function draw() {
-     *   myFilter.setUniform('time', millis());
      *   filter(myFilter);
      * }
      * ```
      *
-     * We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by passing in an announced uniform variable  `time` with `setUniform()`, each frame.
+     * We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by using the millis() function to get an up-to-date time value.
      *
      * ```js example
      * let myFilter;
@@ -61298,7 +61278,7 @@ var p5 = (function () {
      * }
      *
      * function noiseShaderCallback() {
-     *   let time = uniformFloat();
+     *   let time = millis();
      *   filterColor.begin();
      *   let coord = filterColor.texCoord;
      *
@@ -61315,7 +61295,6 @@ var p5 = (function () {
      * }
      *
      * function draw() {
-     *   myFilter.setUniform("time", millis());
      *   filter(myFilter);
      * }
      * ```
@@ -61529,7 +61508,7 @@ var p5 = (function () {
      * }
      *
      * function material() {
-     *   let time = uniformFloat();
+     *   let time = millis() / 1000;
      *   finalColor.begin();
      *   let r = 0.2 + 0.5 * abs(sin(time + 0));
      *   let g = 0.2 + 0.5 * abs(sin(time + 1));
@@ -61540,7 +61519,6 @@ var p5 = (function () {
      *
      * function draw() {
      *   background(245, 245, 220);
-     *   myShader.setUniform('time', millis() / 1000);
      *   shader(myShader);
      *
      *   rectMode(CENTER);
@@ -62016,7 +61994,7 @@ var p5 = (function () {
      * }
      *
      * function material() {
-     *   let time = uniformFloat();
+     *   let time = millis();
      *   worldInputs.begin();
      *   worldInputs.position.y +=
      *     20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62026,7 +62004,6 @@ var p5 = (function () {
      * function draw() {
      *   background(255);
      *   shader(myShader);
-     *   myShader.setUniform('time', millis());
      *   lights();
      *   noStroke();
      *   fill('red');
@@ -62195,7 +62172,6 @@ var p5 = (function () {
      * function draw() {
      *   background(255);
      *   shader(myShader);
-     *   myShader.setUniform('time', millis());
      *   lights();
      *   noStroke();
      *   fill('red');
@@ -62209,7 +62185,7 @@ var p5 = (function () {
      *
      * ```js
      * // myMaterial.js
-     * let time = uniformFloat();
+     * let time = millis();
      * worldInputs.begin();
      * worldInputs.position.y +=
      *   20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62318,7 +62294,7 @@ var p5 = (function () {
      * }
      *
      * function material() {
-     *   let time = uniformFloat();
+     *   let time = millis();
      *   worldInputs.begin();
      *   worldInputs.position.y +=
      *     20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62328,7 +62304,6 @@ var p5 = (function () {
      * function draw() {
      *   background(255);
      *   shader(myShader);
-     *   myShader.setUniform('time', millis());
      *   noStroke();
      *   sphere(50);
      * }
@@ -62414,7 +62389,6 @@ var p5 = (function () {
      * function draw() {
      *   background(255);
      *   shader(myShader);
-     *   myShader.setUniform('time', millis());
      *   lights();
      *   noStroke();
      *   fill('red');
@@ -62428,7 +62402,7 @@ var p5 = (function () {
      *
      * ```js
      * // myMaterial.js
-     * let time = uniformFloat();
+     * let time = millis();
      * worldInputs.begin();
      * worldInputs.position.y +=
      *   20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62521,7 +62495,7 @@ var p5 = (function () {
      * }
      *
      * function material() {
-     *   let time = uniformFloat();
+     *   let time = millis();
      *   worldInputs.begin();
      *   worldInputs.position.y +=
      *     20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62531,7 +62505,6 @@ var p5 = (function () {
      * function draw() {
      *   background(255);
      *   shader(myShader);
-     *   myShader.setUniform('time', millis());
      *   noStroke();
      *   fill('red');
      *   circle(0, 0, 50);
@@ -62580,7 +62553,6 @@ var p5 = (function () {
      * function draw() {
      *   background(255);
      *   shader(myShader);
-     *   myShader.setUniform('time', millis());
      *   lights();
      *   noStroke();
      *   fill('red');
@@ -62594,7 +62566,7 @@ var p5 = (function () {
      *
      * ```js
      * // myMaterial.js
-     * let time = uniformFloat();
+     * let time = millis();
      * worldInputs.begin();
      * worldInputs.position.y +=
      *   20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62766,7 +62738,7 @@ var p5 = (function () {
      * }
      *
      * function material() {
-     *   let time = uniformFloat();
+     *   let time = millis();
      *   worldInputs.begin();
      *   // Add a somewhat random offset to the weight
      *   // that varies based on position and time
@@ -62782,7 +62754,6 @@ var p5 = (function () {
      * function draw() {
      *   background(255);
      *   strokeShader(myShader);
-     *   myShader.setUniform('time', millis());
      *   strokeWeight(10);
      *   beginShape();
      *   for (let i = 0; i <= 50; i++) {
@@ -65479,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
@@ -65835,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;
@@ -68814,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>
@@ -69367,9 +69338,6 @@ var p5 = (function () {
         const assignmentID = getOrCreateNode(dag, assignmentNode);
         recordInBasicBlock(cfg, cfg.currentBlock, assignmentID);
 
-        // Track for global assignments processing
-        this.strandsContext.globalAssignments.push(assignmentID);
-
         // Simply update this node to be a variable node with the identifier
         // This ensures it always generates the variable name in expressions
         const variableNodeData = createNodeData({
@@ -69433,9 +69401,6 @@ var p5 = (function () {
         const assignmentID = getOrCreateNode(dag, assignmentNode);
         recordInBasicBlock(cfg, cfg.currentBlock, assignmentID);
 
-        // Track for global assignments processing in the current hook context
-        this.strandsContext.globalAssignments.push(assignmentID);
-
         // Simply update this node to be a variable node with the identifier
         // This ensures it always generates the variable name in expressions
         const variableNodeData = createNodeData({
@@ -97305,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) {
@@ -97451,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) {
@@ -97603,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);
@@ -97990,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
@@ -98037,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
@@ -98066,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
@@ -98130,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
@@ -98201,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.
@@ -98258,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.
      *
@@ -98380,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.
@@ -98457,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
@@ -98598,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.
@@ -98869,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.
      *
@@ -98883,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
@@ -99003,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.
      */
     /**
@@ -99270,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.
      *
@@ -99346,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.
@@ -99451,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;
       }
@@ -103151,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();
@@ -110745,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.
@@ -132408,18 +132376,6 @@ var p5 = (function () {
         backend.generateBlock(blockID, strandsContext, generationContext);
       }
 
-      // Process any unvisited global assignments to ensure side effects are generated
-      for (const assignmentNodeID of strandsContext.globalAssignments) {
-        if (!generationContext.visitedNodes.has(assignmentNodeID)) {
-          // This assignment hasn't been visited yet, so we need to generate it
-          backend.generateAssignment(generationContext, strandsContext.dag, assignmentNodeID);
-          generationContext.visitedNodes.add(assignmentNodeID);
-        }
-      }
-
-      // Reset global assignments for next hook
-      strandsContext.globalAssignments = [];
-
       const firstLine = backend.hookEntry(hookType);
       let returnType;
       if (hookType.returnType.properties) {
@@ -133464,7 +133420,6 @@ var p5 = (function () {
           typeInfo,
           usedInVertex: false,
           usedInFragment: false,
-          declared: false
         });
 
         return createStrandsNode(id, dimension, strandsContext);
@@ -133828,7 +133783,6 @@ var p5 = (function () {
       ctx.vertexDeclarations = new Set();
       ctx.fragmentDeclarations = new Set();
       ctx.hooks = [];
-      ctx.globalAssignments = [];
       ctx.backend = backend;
       ctx.active = active;
       ctx.renderer = renderer;
@@ -133850,7 +133804,6 @@ var p5 = (function () {
       ctx.vertexDeclarations = new Set();
       ctx.fragmentDeclarations = new Set();
       ctx.hooks = [];
-      ctx.globalAssignments = [];
       ctx.active = false;
       p5.disableFriendlyErrors = ctx.previousFES;
       for (const key in ctx.windowOverrides) {
@@ -133995,7 +133948,7 @@ var p5 = (function () {
    * }
    *
    * function material() {
-   *   let t = uniformFloat();
+   *   let t = millis();
    *   worldInputs.begin();
    *   // Move the vertex up and down in a wave in world space
    *   // In world space, moving the object (e.g., with translate()) will affect these coordinates
@@ -134007,7 +133960,6 @@ var p5 = (function () {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('t', millis());
    *   lights();
    *   noStroke();
    *   fill('red');
@@ -134096,9 +134048,7 @@ var p5 = (function () {
    *          A value between `0.0` and `1.0`
    *
    * @example
-   * <div modernizr="webgl">
-   * <code>
-   * // Example 1: A soft vertical fade using smoothstep (no uniforms)
+   * // Example 1: A soft vertical fade using smoothstep
    *
    * let fadeShader;
    *
@@ -134117,31 +134067,25 @@ var p5 = (function () {
    *
    * function setup() {
    *   createCanvas(300, 200, WEBGL);
-   *   fadeShader = baseFilterShader().modify(fadeCallback);
+   *   fadeShader = buildFilterShader(fadeCallback);
    * }
    *
    * function draw() {
    *   background(0);
    *   filter(fadeShader);
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div modernizr="webgl">
-   * <code>
-   * // Example 2: Animate the smooth transition using a uniform
+   * // Example 2: Animate the smooth transition over time
    *
    * let animatedShader;
    *
    * function animatedFadeCallback() {
-   *   const time = uniformFloat(() => millis() * 0.001);
-   *
    *   getColor((inputs) => {
    *     let x = inputs.texCoord.x;
    *
    *     // Move the smoothstep band back and forth over time
-   *     let center = 0.5 + 0.25 * sin(time);
+   *     let center = 0.5 + 0.25 * sin(millis() * 0.001);
    *     let t = smoothstep(center - 0.05, center + 0.05, x);
    *
    *     return [t, t, t, 1];
@@ -134150,15 +134094,13 @@ var p5 = (function () {
    *
    * function setup() {
    *   createCanvas(300, 200, WEBGL);
-   *   animatedShader = baseFilterShader().modify(animatedFadeCallback);
+   *   animatedShader = buildFilterShader(animatedFadeCallback);
    * }
    *
    * function draw() {
    *   background(0);
    *   filter(animatedShader);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -134275,7 +134217,7 @@ var p5 = (function () {
    * }
    *
    * function material() {
-   *   let t = uniformFloat();
+   *   let t = millis();
    *   pixelInputs.begin();
    *   // Animate alpha (transparency) based on x position
    *   pixelInputs.color.a = 0.5 + 0.5 *
@@ -134286,7 +134228,6 @@ var p5 = (function () {
    * function draw() {
    *   background(240);
    *   shader(myShader);
-   *   myShader.setUniform('t', millis());
    *   lights();
    *   noStroke();
    *   fill('purple');
@@ -134477,7 +134418,7 @@ var p5 = (function () {
    * }
    *
    * function material() {
-   *   let t = uniformFloat();
+   *   let t = millis();
    *   objectInputs.begin();
    *   // Create a sine wave along the object
    *   objectInputs.position.y += sin(t * 0.001 + objectInputs.position.x);
@@ -134487,7 +134428,6 @@ var p5 = (function () {
    * function draw() {
    *   background(220);
    *   shader(myShader);
-   *   myShader.setUniform('t', millis());
    *   noStroke();
    *   fill('orange');
    *   sphere(50);
@@ -134519,7 +134459,7 @@ var p5 = (function () {
    * }
    *
    * function material() {
-   *   let t = uniformFloat();
+   *   let t = millis();
    *   cameraInputs.begin();
    *   // Move vertices in camera space based on their x position
    *   cameraInputs.position.y += 30 * sin(cameraInputs.position.x * 0.05 + t * 0.001);
@@ -134531,7 +134471,6 @@ var p5 = (function () {
    * function draw() {
    *   background(200);
    *   shader(myShader);
-   *   myShader.setUniform('t', millis());
    *   noStroke();
    *   fill('red');
    *   sphere(50);
@@ -134578,8 +134517,6 @@ var p5 = (function () {
    * will behave as a vec4 holding components r, g, b, and a (alpha), with each component being in the range 0.0 to 1.0.
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * // A filter shader (using p5.strands) which will
    * // sample and invert the color of each pixel
    * // from the canvas.
@@ -134612,12 +134549,8 @@ var p5 = (function () {
    *
    *   filterColor.end();
    * }
-   * </code>
-   *
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * // This primitive edge-detection filter samples
    * // and compares the colors of the current pixel
    * // on the canvas, and a little to the right.
@@ -134674,8 +134607,6 @@ var p5 = (function () {
    *   rotate(frameCount / 300);
    *   square(0, 0, 30);
    * }
-   * </code>
-   * </div>
    */
 
   /**