p5 2.2.3-rc.0 → 2.2.3

package/lib/p5.esm.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.2.3-rc.0 March 10, 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.0';
+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;
@@ -59607,24 +59580,28 @@ class Shader {
    *
    * 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;
@@ -59632,6 +59609,10 @@ class Shader {
    *   });
    * }
    *
+   * function mouseDragged(){
+   *   moveCounter += 1;
+   * }
+   *
    * function draw() {
    *   background(255);
    *   noStroke(255);
@@ -61010,7 +60991,7 @@ function material(p5, fn) {
    *   // 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];
    *     });
@@ -61256,7 +61237,7 @@ function material(p5, fn) {
    * }
    * ```
    *
-   * 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;
@@ -61267,7 +61248,7 @@ function material(p5, fn) {
    * }
    *
    * function gradient() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   filterColor.begin();
    *   filterColor.set(mix(
    *     [1, 0, 0, 1], // Red
@@ -61278,12 +61259,11 @@ function material(p5, fn) {
    * }
    *
    * 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;
@@ -61295,7 +61275,7 @@ function material(p5, fn) {
    * }
    *
    * function noiseShaderCallback() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   filterColor.begin();
    *   let coord = filterColor.texCoord;
    *
@@ -61312,7 +61292,6 @@ function material(p5, fn) {
    * }
    *
    * function draw() {
-   *   myFilter.setUniform("time", millis());
    *   filter(myFilter);
    * }
    * ```
@@ -61526,7 +61505,7 @@ function material(p5, fn) {
    * }
    *
    * 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));
@@ -61537,7 +61516,6 @@ function material(p5, fn) {
    *
    * function draw() {
    *   background(245, 245, 220);
-   *   myShader.setUniform('time', millis() / 1000);
    *   shader(myShader);
    *
    *   rectMode(CENTER);
@@ -62013,7 +61991,7 @@ function material(p5, fn) {
    * }
    *
    * function material() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   worldInputs.begin();
    *   worldInputs.position.y +=
    *     20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62023,7 +62001,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   lights();
    *   noStroke();
    *   fill('red');
@@ -62192,7 +62169,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   lights();
    *   noStroke();
    *   fill('red');
@@ -62206,7 +62182,7 @@ function material(p5, fn) {
    *
    * ```js
    * // myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    *   20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62315,7 +62291,7 @@ function material(p5, fn) {
    * }
    *
    * function material() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   worldInputs.begin();
    *   worldInputs.position.y +=
    *     20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62325,7 +62301,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   noStroke();
    *   sphere(50);
    * }
@@ -62411,7 +62386,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   lights();
    *   noStroke();
    *   fill('red');
@@ -62425,7 +62399,7 @@ function material(p5, fn) {
    *
    * ```js
    * // myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    *   20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62518,7 +62492,7 @@ function material(p5, fn) {
    * }
    *
    * function material() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   worldInputs.begin();
    *   worldInputs.position.y +=
    *     20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62528,7 +62502,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   noStroke();
    *   fill('red');
    *   circle(0, 0, 50);
@@ -62577,7 +62550,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   lights();
    *   noStroke();
    *   fill('red');
@@ -62591,7 +62563,7 @@ function material(p5, fn) {
    *
    * ```js
    * // myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    *   20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -62763,7 +62735,7 @@ function material(p5, fn) {
    * }
    *
    * 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
@@ -62779,7 +62751,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   strokeShader(myShader);
-   *   myShader.setUniform('time', millis());
    *   strokeWeight(10);
    *   beginShape();
    *   for (let i = 0; i <= 50; i++) {
@@ -65476,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
@@ -65832,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;
@@ -68811,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>
@@ -69364,9 +69335,6 @@ class StrandsNode {
       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({
@@ -69430,9 +69398,6 @@ class StrandsNode {
       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({
@@ -97302,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) {
@@ -97448,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) {
@@ -97600,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);
@@ -97987,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
@@ -98034,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
@@ -98063,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
@@ -98127,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
@@ -98198,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.
@@ -98255,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.
    *
@@ -98377,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.
@@ -98454,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
@@ -98595,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.
@@ -98866,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.
    *
@@ -98880,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
@@ -99000,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.
    */
   /**
@@ -99267,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.
    *
@@ -99343,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.
@@ -99448,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;
     }
@@ -103148,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();
@@ -110742,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.
@@ -132405,18 +132373,6 @@ function generateShaderCode(strandsContext) {
       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) {
@@ -133461,7 +133417,6 @@ function initGlobalStrandsAPI(p5, fn, strandsContext) {
         typeInfo,
         usedInVertex: false,
         usedInFragment: false,
-        declared: false
       });
 
       return createStrandsNode(id, dimension, strandsContext);
@@ -133825,7 +133780,6 @@ function strands(p5, fn) {
     ctx.vertexDeclarations = new Set();
     ctx.fragmentDeclarations = new Set();
     ctx.hooks = [];
-    ctx.globalAssignments = [];
     ctx.backend = backend;
     ctx.active = active;
     ctx.renderer = renderer;
@@ -133847,7 +133801,6 @@ function strands(p5, fn) {
     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) {
@@ -133992,7 +133945,7 @@ if (typeof p5 !== "undefined") {
  * }
  *
  * 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
@@ -134004,7 +133957,6 @@ if (typeof p5 !== "undefined") {
  * function draw() {
  *   background(255);
  *   shader(myShader);
- *   myShader.setUniform('t', millis());
  *   lights();
  *   noStroke();
  *   fill('red');
@@ -134093,9 +134045,7 @@ if (typeof p5 !== "undefined") {
  *          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;
  *
@@ -134114,31 +134064,25 @@ if (typeof p5 !== "undefined") {
  *
  * 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];
@@ -134147,15 +134091,13 @@ if (typeof p5 !== "undefined") {
  *
  * function setup() {
  *   createCanvas(300, 200, WEBGL);
- *   animatedShader = baseFilterShader().modify(animatedFadeCallback);
+ *   animatedShader = buildFilterShader(animatedFadeCallback);
  * }
  *
  * function draw() {
  *   background(0);
  *   filter(animatedShader);
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -134272,7 +134214,7 @@ if (typeof p5 !== "undefined") {
  * }
  *
  * function material() {
- *   let t = uniformFloat();
+ *   let t = millis();
  *   pixelInputs.begin();
  *   // Animate alpha (transparency) based on x position
  *   pixelInputs.color.a = 0.5 + 0.5 *
@@ -134283,7 +134225,6 @@ if (typeof p5 !== "undefined") {
  * function draw() {
  *   background(240);
  *   shader(myShader);
- *   myShader.setUniform('t', millis());
  *   lights();
  *   noStroke();
  *   fill('purple');
@@ -134474,7 +134415,7 @@ if (typeof p5 !== "undefined") {
  * }
  *
  * 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);
@@ -134484,7 +134425,6 @@ if (typeof p5 !== "undefined") {
  * function draw() {
  *   background(220);
  *   shader(myShader);
- *   myShader.setUniform('t', millis());
  *   noStroke();
  *   fill('orange');
  *   sphere(50);
@@ -134516,7 +134456,7 @@ if (typeof p5 !== "undefined") {
  * }
  *
  * 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);
@@ -134528,7 +134468,6 @@ if (typeof p5 !== "undefined") {
  * function draw() {
  *   background(200);
  *   shader(myShader);
- *   myShader.setUniform('t', millis());
  *   noStroke();
  *   fill('red');
  *   sphere(50);
@@ -134575,8 +134514,6 @@ if (typeof p5 !== "undefined") {
  * 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.
@@ -134609,12 +134546,8 @@ if (typeof p5 !== "undefined") {
  *
  *   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.
@@ -134671,8 +134604,6 @@ if (typeof p5 !== "undefined") {
  *   rotate(frameCount / 300);
  *   square(0, 0, 30);
  * }
- * </code>
- * </div>
  */
 
 /**