p5 2.3.0 → 2.3.1-rc.1

package/lib/p5.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.3.0 May 28, 2026 */
+/*! p5.js v2.3.1-rc.1 June 24, 2026 */
 var p5 = (function () {
   'use strict';
 
@@ -15,7 +15,7 @@ var p5 = (function () {
    * @property {String} VERSION
    * @final
    */
-  const VERSION = '2.3.0';
+  const VERSION = '2.3.1-rc.1';
 
   // GRAPHICS RENDERER
   /**
@@ -11360,6 +11360,14 @@ var p5 = (function () {
      * The version of `color()` with four parameters interprets them as RGBA, HSBA,
      * or HSLA colors, depending on the current `colorMode()`. The last parameter
      * sets the alpha (transparency) value.
+     * In p5.strands shader callbacks, `color()` accepts the same input
+     * formats but returns a `vec4` instead of a `p5.Color` object, with
+     * RGBA components normalized to the 0–1 range. All colors in strands
+     * are RGB-based; `colorMode()` has no effect inside shader callbacks.
+     * Color utility functions such as `red()`, `green()`, `blue()`,
+     * `alpha()`, `hue()`, `saturation()`, `brightness()`, and
+     * `lightness()` also return values in the 0–1 range when used in
+     * strands.
      *
      * @method color
      * @param  {Number} gray number specifying value between white and black.
@@ -17533,7 +17541,7 @@ var p5 = (function () {
    */
 
 
-  class Image {
+  let Image$1 = class Image {
     constructor(width, height) {
       this.width = width;
       this.height = height;
@@ -19316,7 +19324,7 @@ var p5 = (function () {
         }
       }
     }
-  }
+  };
   function encodeAndDownloadGif(pImg, filename) {
     const props = pImg.gifProperties;
 
@@ -19618,9 +19626,9 @@ var p5 = (function () {
      * @param {Number} width
      * @param {Number} height
      */
-    p5.Image = Image;
+    p5.Image = Image$1;
 
-    Image.prototype._friendlyError = p5._friendlyError;
+    Image$1.prototype._friendlyError = p5._friendlyError;
 
     /**
      * The image's width in pixels.
@@ -23468,6 +23476,14 @@ var p5 = (function () {
      * @property z
      * @name z
      */
+
+    /**
+     * The dimensions of the vector
+     * @type {Number}
+     * @for p5.Vector
+     * @property dimensions
+     * @name dimensions
+     */
   }
 
   if (typeof p5 !== 'undefined') {
@@ -24015,6 +24031,47 @@ var p5 = (function () {
     }
   }
 
+  class RectPrimitive extends ShapePrimitive {
+    #x;
+    #y;
+    #w;
+    #h;
+    #tl;
+    #tr;
+    #br;
+    #bl;
+    #vertexCapacity = 1;
+
+    constructor(startVertex, x, y, w, h, tl, tr, br, bl) {
+      super(startVertex);
+      this.#x = x;
+      this.#y = y;
+      this.#w = w;
+      this.#h = h;
+      this.#tl = tl;
+      this.#tr = tr;
+      this.#br = br;
+      this.#bl = bl;
+    }
+
+    get x() { return this.#x; }
+    get y() { return this.#y; }
+    get w() { return this.#w; }
+    get h() { return this.#h; }
+    get tl() { return this.#tl; }
+    get tr() { return this.#tr; }
+    get br() { return this.#br; }
+    get bl() { return this.#bl; }
+
+    get vertexCapacity() {
+      return this.#vertexCapacity;
+    }
+
+    accept(visitor) {
+      visitor.visitRectPrimitive(this);
+    }
+  }
+
   // ---- TESSELLATION PRIMITIVES ----
 
   class TriangleFan extends ShapePrimitive {
@@ -24497,6 +24554,42 @@ var p5 = (function () {
       return primitive.addToShape(this);
     }
 
+    rectPrimitive(x, y, w, h, tl, tr, br, bl) {
+      const startVertex = this.#createVertex(new Vector(x, y));
+      const primitive = new RectPrimitive(startVertex, x, y, w, h, tl, tr, br, bl);
+      return primitive.addToShape(this);
+    }
+
+    point(x, y) {
+      const v0 = this.#createVertex(new Vector(x, y));
+      const primitive = new Point(v0);
+      return primitive.addToShape(this);
+    }
+
+    line(x1, y1, x2, y2) {
+      const v0 = this.#createVertex(new Vector(x1, y1));
+      const v1 = this.#createVertex(new Vector(x2, y2));
+      const primitive = new Line(v0, v1);
+      return primitive.addToShape(this);
+    }
+
+    triangle(x1, y1, x2, y2, x3, y3) {
+      const v0 = this.#createVertex(new Vector(x1, y1));
+      const v1 = this.#createVertex(new Vector(x2, y2));
+      const v2 = this.#createVertex(new Vector(x3, y3));
+      const primitive = new Triangle(v0, v1, v2);
+      return primitive.addToShape(this);
+    }
+
+    quad(x1, y1, x2, y2, x3, y3, x4, y4) {
+      const v0 = this.#createVertex(new Vector(x1, y1));
+      const v1 = this.#createVertex(new Vector(x2, y2));
+      const v2 = this.#createVertex(new Vector(x3, y3));
+      const v3 = this.#createVertex(new Vector(x4, y4));
+      const primitive = new Quad(v0, v1, v2, v3);
+      return primitive.addToShape(this);
+    }
+
     beginContour(shapeKind = PATH) {
       if (this.at(-1)?.kind === EMPTY_PATH) {
         this.contours.pop();
@@ -24601,6 +24694,9 @@ var p5 = (function () {
     visitEllipsePrimitive(ellipse) {
       throw new Error('Method visitEllipsePrimitive() has not been implemented.');
     }
+    visitRectPrimitive(rect) {
+      throw new Error('Method visitRectPrimitive() has not been implemented.');
+    }
 
     // isolated primitives
     visitPoint(point) {
@@ -24804,6 +24900,62 @@ var p5 = (function () {
       this.path.moveTo(centerX + radiusX, centerY);
       this.path.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
     }
+    visitRectPrimitive(rect) {
+      const x = rect.x;
+      const y = rect.y;
+      const w = rect.w;
+      const h = rect.h;
+      let tl = rect.tl;
+      let tr = rect.tr;
+      let br = rect.br;
+      let bl = rect.bl;
+
+      if (typeof tl === 'undefined') {
+        this.path.rect(x, y, w, h);
+      } else {
+        if (typeof tr === 'undefined') {
+          tr = tl;
+        }
+        if (typeof br === 'undefined') {
+          br = tr;
+        }
+        if (typeof bl === 'undefined') {
+          bl = br;
+        }
+
+        const absW = Math.abs(w);
+        const absH = Math.abs(h);
+        const hw = absW / 2;
+        const hh = absH / 2;
+
+        if (absW < 2 * tl) {
+          tl = hw;
+        }
+        if (absH < 2 * tl) {
+          tl = hh;
+        }
+        if (absW < 2 * tr) {
+          tr = hw;
+        }
+        if (absH < 2 * tr) {
+          tr = hh;
+        }
+        if (absW < 2 * br) {
+          br = hw;
+        }
+        if (absH < 2 * br) {
+          br = hh;
+        }
+        if (absW < 2 * bl) {
+          bl = hw;
+        }
+        if (absH < 2 * bl) {
+          bl = hh;
+        }
+
+        this.path.roundRect(x, y, w, h, [tl, tr, br, bl]);
+      }
+    }
     visitQuadStrip(quadStrip) {
       for (let i = 0; i < quadStrip.vertices.length - 3; i += 2) {
         const v0 = quadStrip.vertices[i];
@@ -25000,6 +25152,72 @@ var p5 = (function () {
         verts.push(new Vertex(vertexProps));
       }
 
+      this.contours.push(verts);
+    }
+    visitRectPrimitive(rect) {
+      const x = rect.x;
+      const y = rect.y;
+      const w = rect.w;
+      const h = rect.h;
+      let tl = rect.tl;
+      let tr = rect.tr;
+      let br = rect.br;
+      let bl = rect.bl;
+
+      const startVertex = rect.vertices[0];
+      const getVertexProps = (px, py) => {
+        const props = {};
+        for (const [key, value] of Object.entries(startVertex)) {
+          if (key === 'position') continue;
+          props[key] = value;
+        }
+        props.position = new Vector(px, py);
+        return new Vertex(props);
+      };
+
+      const verts = [];
+      if (typeof tl === 'undefined') {
+        verts.push(getVertexProps(x, y));
+        verts.push(getVertexProps(x + w, y));
+        verts.push(getVertexProps(x + w, y + h));
+        verts.push(getVertexProps(x, y + h));
+        verts.push(getVertexProps(x, y));
+      } else {
+        if (typeof tr === 'undefined') tr = tl;
+        if (typeof br === 'undefined') br = tr;
+        if (typeof bl === 'undefined') bl = br;
+
+        const absW = Math.abs(w);
+        const absH = Math.abs(h);
+        const hw = absW / 2;
+        const hh = absH / 2;
+
+        if (absW < 2 * tl) tl = hw;
+        if (absH < 2 * tl) tl = hh;
+        if (absW < 2 * tr) tr = hw;
+        if (absH < 2 * tr) tr = hh;
+        if (absW < 2 * br) br = hw;
+        if (absH < 2 * br) br = hh;
+        if (absW < 2 * bl) bl = hw;
+        if (absH < 2 * bl) bl = hh;
+
+        const addCornerArc = (cx, cy, rx, ry, startAngle, endAngle) => {
+          const perimeter = Math.PI / 2 * (rx + ry) / 2;
+          const numPoints = Math.max(1, Math.ceil(this.curveDetail * perimeter));
+          for (let i = 0; i <= numPoints; i++) {
+            const angle = startAngle + (endAngle - startAngle) * (i / numPoints);
+            verts.push(getVertexProps(cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)));
+          }
+        };
+
+        addCornerArc(x + tl, y + tl, tl, tl, Math.PI, 1.5 * Math.PI);
+        addCornerArc(x + w - tr, y + tr, tr, tr, 1.5 * Math.PI, 2 * Math.PI);
+        addCornerArc(x + w - br, y + h - br, br, br, 0, 0.5 * Math.PI);
+        addCornerArc(x + bl, y + h - bl, bl, bl, 0.5 * Math.PI, Math.PI);
+
+        verts.push(verts[0]);
+      }
+
       this.contours.push(verts);
     }
   }
@@ -26844,7 +27062,7 @@ var p5 = (function () {
       // get(x,y,w,h)
       }
 
-      const region = new Image(w*pd, h*pd);
+      const region = new Image$1(w*pd, h*pd);
       region.pixelDensity(pd);
       region.canvas
         .getContext('2d')
@@ -30605,8 +30823,9 @@ var p5 = (function () {
      * Sets the width of the stroke used for points, lines, and the outlines of
      * shapes.
      *
-     * Note: `strokeWeight()` is affected by transformations, especially calls to
-     * <a href="#/p5/scale">scale()</a>.
+     * Note: In 2D mode, `strokeWeight()` is affected by transformations,
+     * especially calls to <a href="#/p5/scale">scale()</a>. It isn't affected by
+     * transformations in WebGL and WebGPU modes.
      * 
      * Calling `strokeWeight()` without an argument returns the current stroke weight as a number.
      *
@@ -38986,8 +39205,19 @@ var p5 = (function () {
 
         } else {
           // Non-GIF Section
-          const blob = new Blob([data]);
-          const img = await createImageBitmap(blob);
+          const img = await new Promise((resolve, reject) => {
+            const img = new Image();
+            const blob = new Blob([data], { type: contentType });
+            const url = URL.createObjectURL(blob);
+
+            img.onerror = e => reject(e);
+            img.onload = () => {
+              URL.revokeObjectURL(url);
+              resolve(img);
+            };
+
+            img.src = url;
+          });
 
           pImg.width = pImg.canvas.width = img.width;
           pImg.height = pImg.canvas.height = img.height;
@@ -55057,7 +55287,11 @@ var p5 = (function () {
       // the next time a shader is used. However, the texture() function
       // works differently and is global p5 state. If the p5 state has
       // been cleared, we also need to clear the value in uSampler to match.
-      fillShader.setUniform("uSampler", this.states._tex || empty);
+      this._settingFillUniforms = true;
+      if (this.states._tex || !fillShader._userSetSampler) {
+        fillShader.setUniform("uSampler", this.states._tex || empty);
+      }
+      this._settingFillUniforms = false;
       fillShader.setUniform(
         "uTint",
         this.states.tint?._getRGBA([255, 255, 255, 255]) ?? [255, 255, 255, 255]
@@ -55180,7 +55414,7 @@ var p5 = (function () {
     _getEmptyTexture() {
       if (!this._emptyTexture) {
         // a plain white texture RGBA, full alpha, single pixel.
-        const im = new Image(1, 1);
+        const im = new Image$1(1, 1);
         im.set(0, 0, 255);
         this._emptyTexture = new Texture(this, im);
       }
@@ -60624,7 +60858,7 @@ var p5 = (function () {
      * @returns {String} The GLSL version used by the shader.
      */
     version() {
-      const match = /#version (.+)$/.exec(this.vertSrc());
+      const match = /#version (.+)$/m.exec(this.vertSrc());
       if (match) {
         return match[1];
       } else {
@@ -61628,6 +61862,10 @@ var p5 = (function () {
         return;
       }
 
+      if (uniformName === 'uSampler' && !this._renderer._settingFillUniforms) {
+        this._userSetSampler = true;
+      }
+
       // In p5.strands-related code, where some of the code may be in
       // p5.webgpu.js instead of the main p5.js build, we generally use
       // duck typing instead of instanceof to avoid accidentally importing
@@ -63939,7 +64177,7 @@ var p5 = (function () {
      *   // Replace alpha in the color with dithering by
      *   // randomly setting pixel colors to 0 based on opacity
      *   let a = 1;
-     *   if (noise(pixelInputs.position.xy) > pixelInputs.color.a) {
+     *   if (random() > pixelInputs.color.a) {
      *     a = 0;
      *   }
      *   pixelInputs.color.a = a;
@@ -65769,11 +66007,7 @@ var p5 = (function () {
      * <a href="#/p5/angleMode">angleMode()</a> is `DEGREES`, then values are
      * returned in the range 0 to 180.
      *
-     * @method acos
-     * @param  {Number} value value whose arc cosine is to be returned.
-     * @return {Number}       arc cosine of the given value.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -65791,8 +66025,9 @@ var p5 = (function () {
      *
      *   describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -65810,6 +66045,52 @@ var p5 = (function () {
      *
      *   describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
      * }
+     * ```
+     *
+     * `acos()` can also be used in shaders with p5.strands. The following example
+     * uses `acos()` to create a pulsing color transition on a shape.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that pulses between orange and teal.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // acos(cos(t)) creates a triangle wave that goes from 0 to PI and back.
+     *   // Dividing by PI normalizes the result to the 0 to 1 range.
+     *   let value = acos(cos(t)) / PI;
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let orange = [1, 0.5, 0, 1];
+     *   let teal = [0, 0.8, 0.8, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between orange (when value = 0) and teal (when value = 1).
+     *   // acos() creates a pulsing effect by turning smooth oscillation into a triangle wave.
+     *   finalColor.set(mix(orange, teal, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method acos
+     * @param  {Number} value value whose arc cosine is to be returned.
+     * @return {Number}       arc cosine of the given value.
      */
     fn.acos = function(ratio) {
       return this._fromRadians(Math.acos(ratio));
@@ -65824,11 +66105,7 @@ var p5 = (function () {
      * the <a href="#/p5/angleMode">angleMode()</a> is `DEGREES` then values are
      * returned in the range -90 to 90.
      *
-     * @method asin
-     * @param  {Number} value value whose arc sine is to be returned.
-     * @return {Number}       arc sine of the given value.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -65846,8 +66123,9 @@ var p5 = (function () {
      *
      *   describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -65865,6 +66143,52 @@ var p5 = (function () {
      *
      *   describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
      * }
+     * ```
+     *
+     * `asin()` can also be used in shaders with p5.strands. The following example
+     * uses `asin()` to create a smooth color transition on a shape.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that smoothly shifts between green and purple.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // asin(sin(t)) returns a value between -PI/2 and PI/2.
+     *   // Dividing by PI/2 normalizes to -1 to 1, then adding 1 and multiplying by 0.5
+     *   // remaps to the 0 to 1 range.
+     *   let value = (asin(sin(t)) / (PI / 2) + 1) * 0.5;
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let green = [0, 1, 0.5, 1];
+     *   let purple = [0.5, 0, 1, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between green (when value = 0) and purple (when value = 1).
+     *   finalColor.set(mix(green, purple, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method asin
+     * @param  {Number} value value whose arc sine is to be returned.
+     * @return {Number}       arc sine of the given value.
      */
     fn.asin = function(ratio) {
       return this._fromRadians(Math.asin(ratio));
@@ -65879,11 +66203,7 @@ var p5 = (function () {
      * (about 1.57). If the <a href="#/p5/angleMode">angleMode()</a> is `DEGREES`
      * then values are returned in the range -90 to 90.
      *
-     * @method atan
-     * @param  {Number} value value whose arc tangent is to be returned.
-     * @return {Number}       arc tangent of the given value.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -65901,8 +66221,9 @@ var p5 = (function () {
      *
      *   describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -65920,6 +66241,55 @@ var p5 = (function () {
      *
      *   describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
      * }
+     * ```
+     *
+     * `atan()` can also be used in shaders with p5.strands. The following example
+     * uses `atan()` to create a soft color transition on a shape.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that softly shifts between pink and lime.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   // sin() oscillates the input between -5 and 5, so atan() gets both positive and negative values.
+     *   let t = sin(millis() * 0.001) * 5;
+     *
+     *   // atan(t) returns values between -PI/2 and PI/2.
+     *   // Dividing by PI/2 normalizes to -1 to 1, then adding 1 and multiplying by 0.5
+     *   // remaps to the 0 to 1 range.
+     *   // atan() compresses the wide range of t into a smooth S-curve (soft clipping).
+     *   let value = (atan(t) / (PI / 2) + 1) * 0.5;
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let pink = [1, 0, 0.5, 1];
+     *   let lime = [0.5, 1, 0, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between pink (when value = 0) and lime (when value = 1).
+     *   // atan() creates a soft, eased transition instead of a linear blend.
+     *   finalColor.set(mix(pink, lime, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method atan
+     * @param  {Number} value value whose arc tangent is to be returned.
+     * @return {Number}       arc tangent of the given value.
      */
     fn.atan = function(ratio) {
       return this._fromRadians(Math.atan(ratio));
@@ -66003,11 +66373,7 @@ var p5 = (function () {
      * calculates the cosine of an angle, using radians by default, or according
      * to if <a href="#/p5/angleMode">angleMode()</a> setting (RADIANS or DEGREES).
      *
-     * @method cos
-     * @param  {Number} angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
-     * @return {Number}       cosine of the angle.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -66025,8 +66391,9 @@ var p5 = (function () {
      *   line(50, y, x, y);
      *   circle(x, y, 20);
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -66043,8 +66410,9 @@ var p5 = (function () {
      *   // Draw the point.
      *   point(x, y);
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -66061,6 +66429,51 @@ var p5 = (function () {
      *   // Draw the point.
      *   point(x, y);
      * }
+     * ```
+     *
+     * `cos()` can also be used in shaders with p5.strands. The following example
+     * uses `cos()` to smoothly oscillate the color of a shape over time.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that fades between yellow and blue.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // cos(t) oscillates between -1 and 1.
+     *   // 0.5 + 0.5 * cos(t) remaps this to the 0 to 1 range.
+     *   let value = 0.5 + 0.5 * cos(t);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let yellow = [1, 1, 0, 1];
+     *   let blue = [0, 0, 1, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between yellow (when value = 0) and blue (when value = 1).
+     *   finalColor.set(mix(yellow, blue, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method cos
+     * @param  {Number} angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
+     * @return {Number}       cosine of the angle.
      */
     fn.cos = function(angle) {
       return Math.cos(this._toRadians(angle));
@@ -66074,11 +66487,7 @@ var p5 = (function () {
      * calculates the sine of an angle, using radians by default, or according to
      * if <a href="#/p5/angleMode">angleMode()</a> setting (RADIANS or DEGREES).
      *
-     * @method sin
-     * @param  {Number} angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
-     * @return {Number}       sine of the angle.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -66096,8 +66505,9 @@ var p5 = (function () {
      *   line(50, y, x, y);
      *   circle(x, y, 20);
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -66114,8 +66524,9 @@ var p5 = (function () {
      *   // Draw the point.
      *   point(x, y);
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -66132,6 +66543,51 @@ var p5 = (function () {
      *   // Draw the point.
      *   point(x, y);
      * }
+     * ```
+     *
+     * `sin()` can also be used in shaders with p5.strands. The following example
+     * uses `sin()` to oscillate the color of a shape over time.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that pulses between cyan and magenta.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // sin(t) oscillates between -1 and 1.
+     *   // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
+     *   let value = 0.5 + 0.5 * sin(t);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let cyan = [0, 1, 1, 1];
+     *   let magenta = [1, 0, 1, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between cyan (when value = 0) and magenta (when value = 1).
+     *   finalColor.set(mix(cyan, magenta, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method sin
+     * @param  {Number} angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
+     * @return {Number}       sine of the angle.
      */
     fn.sin = function(angle) {
       return Math.sin(this._toRadians(angle));
@@ -66146,11 +66602,7 @@ var p5 = (function () {
      * by default, or according to
      * if <a href="#/p5/angleMode">angleMode()</a> setting (RADIANS or DEGREES).
      *
-     * @method tan
-     * @param  {Number} angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
-     * @return {Number}       tangent of the angle.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -66167,6 +66619,53 @@ var p5 = (function () {
      *   // Draw the point.
      *   point(x, y);
      * }
+     * ```
+     *
+     * `tan()` can also be used in shaders with p5.strands. The following example
+     * uses `tan()` to create rapid color transitions on a shape.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere with rapidly shifting colors.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.0005 to slow it down.
+     *   let t = millis() * 0.0005;
+     *
+     *   // tan(t) can grow to very large values (even infinity) at certain angles.
+     *   // 0.5 + 0.5 * tan(t) shifts the range but can still go way past 0 or 1.
+     *   // min(max(..., 0), 1) clamps the result to the 0 to 1 range.
+     *   let value = min(max(0.5 + 0.5 * tan(t), 0), 1);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let orange = [1, 0.5, 0, 1];
+     *   let blue = [0, 0.5, 1, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between orange (when value = 0) and blue (when value = 1).
+     *   // tan() creates rapid, dramatic color shifts as it spikes and resets.
+     *   finalColor.set(mix(orange, blue, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method tan
+     * @param  {Number} angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
+     * @return {Number}       tangent of the angle.
      */
     fn.tan = function(angle) {
       return Math.tan(this._toRadians(angle));
@@ -66182,11 +66681,7 @@ var p5 = (function () {
      * quarter of a full rotation. The same angle is 2 &times; &pi; &divide; 4
      * (about 1.57) radians.
      *
-     * @method degrees
-     * @param  {Number} radians radians value to convert to degrees.
-     * @return {Number}         converted angle.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -66201,6 +66696,54 @@ var p5 = (function () {
      *
      *   describe('The text "0.79 rad = 45˚".');
      * }
+     * ```
+     *
+     * `degrees()` can also be used in shaders with p5.strands. The following example
+     * uses `degrees()` to convert a radian value to degrees inside a shader.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that cycles through warm colors.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // degrees() converts the radian value t to degrees.
+     *   // (deg % 360) wraps the degrees into a 0-360 range.
+     *   // Dividing by 360 normalizes to the 0 to 1 range.
+     *   let deg = degrees(t);
+     *   let value = (deg % 360) / 360;
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let red = [1, 0, 0, 1];
+     *   let yellow = [1, 1, 0, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between red (when value = 0) and yellow (when value = 1).
+     *   // degrees() creates a cycling sawtooth pattern as time increases.
+     *   finalColor.set(mix(red, yellow, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method degrees
+     * @param  {Number} radians radians value to convert to degrees.
+     * @return {Number}         converted angle.
      */
     fn.degrees = angle => angle * RAD_TO_DEG;
 
@@ -66214,11 +66757,7 @@ var p5 = (function () {
      * quarter of a full rotation. The same angle is 2 &times; &pi; &divide; 4
      * (about 1.57) radians.
      *
-     * @method radians
-     * @param  {Number} degrees degree value to convert to radians.
-     * @return {Number}         converted angle.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -66233,6 +66772,56 @@ var p5 = (function () {
      *
      *   describe('The text "45˚ = 0.785 rad".');
      * }
+     * ```
+     *
+     * `radians()` can also be used in shaders with p5.strands. The following example
+     * uses `radians()` to convert degrees to radians inside a shader.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that fades between red and white.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start.
+     *   // Multiply by 0.05 and mod 360 to cycle through 0-360 degrees over time.
+     *   let deg = (millis() * 0.05) % 360;
+     *
+     *   // radians() converts degrees to radians so sin() can use them.
+     *   let rad = radians(deg);
+     *
+     *   // sin(rad) oscillates between -1 and 1.
+     *   // 0.5 + 0.5 * sin(rad) remaps this to the 0 to 1 range.
+     *   let value = 0.5 + 0.5 * sin(rad);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let red = [1, 0, 0, 1];
+     *   let white = [1, 1, 1, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between red (when value = 0) and white (when value = 1).
+     *   // radians() converts the degree input so sin() can produce smooth oscillation.
+     *   finalColor.set(mix(red, white, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method radians
+     * @param  {Number} degrees degree value to convert to radians.
+     * @return {Number}         converted angle.
      */
     fn.radians = angle => angle * DEG_TO_RAD;
 
@@ -67218,7 +67807,7 @@ var p5 = (function () {
     _detectSourceType() {
       const obj = this.src;
       this.isFramebufferTexture = obj instanceof FramebufferTexture;
-      this.isSrcP5Image = obj instanceof Image;
+      this.isSrcP5Image = obj instanceof Image$1;
       this.isSrcP5Graphics = obj instanceof Graphics;
       this.isSrcP5Renderer = obj instanceof Renderer;
       this.isImageData = typeof ImageData !== 'undefined' && obj instanceof ImageData;
@@ -70161,6 +70750,13 @@ var p5 = (function () {
       throw new Error(prefixedMessage);
   }
 
+  function dimensionMismatchError(declaredDim,actualDim,varName){
+      userError(
+          'dimension mismatch',
+      `Cannot assign a value of dimension ${actualDim} to \`${varName}\`, which expects dimension ${declaredDim}.`
+      );
+  }
+
   /////////////////////////////////
   // Public functions for strands runtime
   /////////////////////////////////
@@ -70449,6 +71045,16 @@ var p5 = (function () {
 
       // For varying variables, we need both assignment generation AND a way to reference by identifier
       if (this._originalIdentifier) {
+        const valueDim = value?.isStrandsNode
+          ? value.dimension
+          : (Array.isArray(value) ? value.length : 1);
+        if (valueDim !== this._originalDimension && valueDim !== 1){
+          dimensionMismatchError(
+            this._originalDimension,
+            valueDim,
+            this._originalIdentifier
+          );
+        }
         // Create a variable node for the target (the varying variable)
         const { id: targetVarID } = variableNode(
           this.strandsContext,
@@ -70501,6 +71107,16 @@ var p5 = (function () {
 
       // For varying variables, create swizzle assignment
       if (this._originalIdentifier) {
+        const valueDim = value?.isStrandsNode
+          ? value.dimension
+          : (Array.isArray(value) ? value.length : 1);
+        if (valueDim !== swizzlePattern.length && valueDim !== 1){
+          dimensionMismatchError(
+            swizzlePattern.length,
+            valueDim,
+            `${this._originalIdentifier}.${swizzlePattern}`
+          );
+        }
         // Create a variable node for the target with swizzle
         const { id: targetVarID } = variableNode(
           this.strandsContext,
@@ -71049,38 +71665,24 @@ var p5 = (function () {
     return createStrandsNode(id, dimension, strandsContext);
   }
 
-  function structConstructorNode(strandsContext, structTypeInfo, rawUserArgs) {
+  function structConstructorNode(strandsContext, structTypeInfo, dependsOn) {
     const { cfg, dag } = strandsContext;
     const { properties } = structTypeInfo;
 
-    if (!(rawUserArgs.length === properties.length)) {
+    if (dependsOn.length !== properties.length) {
       userError('type error',
-        `You've tried to construct a ${structTypeInfo.typeName} struct with ${rawUserArgs.length} properties, but it expects ${properties.length} properties.\n` +
+        `You've tried to construct a ${structTypeInfo.typeName} struct with ${dependsOn.length} properties, but it expects ${properties.length} properties.\n` +
         `The properties it expects are:\n` +
-        `${properties.map(prop => prop.name + ' ' + prop.DataType.baseType + prop.DataType.dimension)}`
+        `${properties.map(prop => `${prop.name}: ${prop.dataType.baseType}${prop.dataType.dimension}`).join(', ')}`
       );
     }
 
-    const dependsOn = [];
-    for (let i = 0; i < properties.length; i++) {
-      const expectedProperty = properties[i];
-      const { originalNodeID, mappedDependencies } = mapPrimitiveDepsToIDs(strandsContext, expectedProperty.dataType, rawUserArgs[i]);
-      if (originalNodeID) {
-        dependsOn.push(originalNodeID);
-      }
-      else {
-        dependsOn.push(
-          constructTypeFromIDs(strandsContext, expectedProperty.dataType, mappedDependencies)
-        );
-      }
-    }
-
     const nodeData = createNodeData({
       nodeType: NodeType.OPERATION,
       opCode: OpCode.Nary.CONSTRUCTOR,
       dimension: properties.length,
-      baseType: structTypeInfo.typeName ,
-      dependsOn
+      baseType: structTypeInfo.typeName,
+      dependsOn,
     });
     const id = getOrCreateNode(dag, nodeData);
     recordInBasicBlock(cfg, cfg.currentBlock, id);
@@ -71277,7 +71879,11 @@ var p5 = (function () {
               scalars.push(createStrandsNode(id, dimension, strandsContext));
             }
           } else {
-            userError('type error', `Swizzle assignment: RHS vector does not match LHS vector (need ${chars.length}, got ${value.dimension}).`);
+            dimensionMismatchError(
+              chars.length,
+              value.dimension,
+              `${target._originalIdentifier || 'value'}.${property}`
+            );
           }
         } else if (Array.isArray(value)) {
           const flat = value.flat(Infinity);
@@ -71751,7 +72357,7 @@ var p5 = (function () {
       }
       const dag = strandsContext.dag;
       const rootNode = getNodeDataFromID(dag, rootNodeID);
-      if (isStructType(returnType)) {
+      if (isStructType(returnType) && rootNode.identifier) {
         const structTypeInfo = returnType;
         for (let i = 0; i < structTypeInfo.properties.length; i++) {
           const prop = structTypeInfo.properties[i];
@@ -72042,7 +72648,7 @@ var p5 = (function () {
         _arraysEqual: (a, b) => JSON.stringify(a) === JSON.stringify(b),
         _getEmptyTexture: () => {
           if (!this._emptyTexture) {
-            const im = new Image(1, 1);
+            const im = new Image$1(1, 1);
             im.set(0, 0, 255);
             this._emptyTexture = new Texture(this._renderer, im);
           }
@@ -72474,8 +73080,6 @@ var p5 = (function () {
     }
   }
 
-  const styleEmpty = 'rgba(0,0,0,0)';
-
   class Renderer2D extends Renderer {
     constructor(pInst, w, h, isMainCanvas, elt, attributes = {}) {
       super(pInst, w, h, isMainCanvas);
@@ -72634,7 +73238,7 @@ var p5 = (function () {
       }
       this.push();
       this.resetMatrix();
-      if (args[0] instanceof Image) {
+      if (args[0] instanceof Image$1) {
         const img = args[0];
         if (args[1] >= 0) {
           // set transparency of background
@@ -72907,10 +73511,12 @@ var p5 = (function () {
       ctx.save();
       ctx.clearRect(0, 0, img.canvas.width, img.canvas.height);
 
+      const tint = this.states.tint._getRGBA([255, 255, 255, 255]);
+
       if (
-        this.states.tint[0] < 255 ||
-        this.states.tint[1] < 255 ||
-        this.states.tint[2] < 255
+        tint[0] < 255 ||
+        tint[1] < 255 ||
+        tint[2] < 255
       ) {
         // Color tint: we need to use the multiply blend mode to change the colors.
         // However, the canvas implementation of this destroys the alpha channel of
@@ -72933,16 +73539,16 @@ var p5 = (function () {
 
         // Apply color tint
         ctx.globalCompositeOperation = 'multiply';
-        ctx.fillStyle = `rgb(${this.states.tint.slice(0, 3).join(', ')})`;
+        ctx.fillStyle = `rgb(${tint.slice(0, 3).join(', ')})`;
         ctx.fillRect(0, 0, img.canvas.width, img.canvas.height);
 
         // Replace the alpha channel with the original alpha * the alpha tint
         ctx.globalCompositeOperation = 'destination-in';
-        ctx.globalAlpha = this.states.tint[3] / 255;
+        ctx.globalAlpha = tint[3] / 255;
         ctx.drawImage(img.canvas, 0, 0);
       } else {
         // If we only need to change the alpha, we can skip all the extra work!
-        ctx.globalAlpha = this.states.tint[3] / 255;
+        ctx.globalAlpha = tint[3] / 255;
         ctx.drawImage(img.canvas, 0, 0);
       }
 
@@ -73028,7 +73634,7 @@ var p5 = (function () {
       // round down to get integer numbers
       x = Math.floor(x);
       y = Math.floor(y);
-      if (imgOrCol instanceof Graphics || imgOrCol instanceof Image) {
+      if (imgOrCol instanceof Graphics || imgOrCol instanceof Image$1) {
         this.drawingContext.save();
         this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
         this.drawingContext.scale(
@@ -73168,96 +73774,32 @@ var p5 = (function () {
     }
 
     line(x1, y1, x2, y2) {
-      const ctx = this.drawingContext;
-      if (!this.states.strokeColor) {
-        return this;
-      } else if (this._getStroke() === styleEmpty) {
-        return this;
-      }
-      if (this._clipping) {
-        const tempPath = new Path2D();
-        tempPath.moveTo(x1, y1);
-        tempPath.lineTo(x2, y2);
-        const currentTransform = this.drawingContext.getTransform();
-        const clipBaseTransform = this._clipBaseTransform.inverse();
-        const relativeTransform = clipBaseTransform.multiply(currentTransform);
-        this.clipPath.addPath(tempPath, relativeTransform);
-        return this;
-      }
-      ctx.beginPath();
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.stroke();
+      const shape = new p5$2.Shape({ position: new p5$2.Vector(0, 0) });
+      shape.beginShape();
+      shape.line(x1, y1, x2, y2);
+      shape.endShape();
+      this.drawShape(shape);
 
       return this;
     }
 
     point(x, y) {
-      const ctx = this.drawingContext;
-      if (!this.states.strokeColor) {
-        return this;
-      } else if (this._getStroke() === styleEmpty) {
-        return this;
-      }
-      const s = this._getStroke();
-      const f = this._getFill();
-      if (this._clipping) {
-        const tempPath = new Path2D();
-        const drawingContextWidth = this.drawingContext.lineWidth;
-        tempPath.arc(x, y, drawingContextWidth / 2, 0, TWO_PI);
-        const currentTransform = this.drawingContext.getTransform();
-        const clipBaseTransform = this._clipBaseTransform.inverse();
-        const relativeTransform = clipBaseTransform.multiply(currentTransform);
-        this.clipPath.addPath(tempPath, relativeTransform);
-        return this;
-      }
-      this._setFill(s);
-      ctx.beginPath();
-      ctx.arc(x, y, ctx.lineWidth / 2, 0, TWO_PI, false);
-      ctx.fill();
-      this._setFill(f);
+      const shape = new p5$2.Shape({ position: new p5$2.Vector(0, 0) });
+      shape.beginShape();
+      shape.point(x, y);
+      shape.endShape();
+      this.drawShape(shape);
 
       return this;
     }
 
     quad(x1, y1, x2, y2, x3, y3, x4, y4) {
-      const ctx = this.drawingContext;
-      const doFill = !!this.states.fillColor,
-        doStroke = this.states.strokeColor;
-      if (doFill && !doStroke) {
-        if (this._getFill() === styleEmpty) {
-          return this;
-        }
-      } else if (!doFill && doStroke) {
-        if (this._getStroke() === styleEmpty) {
-          return this;
-        }
-      }
-      if (this._clipping) {
-        const tempPath = new Path2D();
-        tempPath.moveTo(x1, y1);
-        tempPath.lineTo(x2, y2);
-        tempPath.lineTo(x3, y3);
-        tempPath.lineTo(x4, y4);
-        tempPath.closePath();
-        const currentTransform = this.drawingContext.getTransform();
-        const clipBaseTransform = this._clipBaseTransform.inverse();
-        const relativeTransform = clipBaseTransform.multiply(currentTransform);
-        this.clipPath.addPath(tempPath, relativeTransform);
-        return this;
-      }
-      ctx.beginPath();
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.lineTo(x3, y3);
-      ctx.lineTo(x4, y4);
-      ctx.closePath();
-      if (doFill) {
-        ctx.fill();
-      }
-      if (doStroke) {
-        ctx.stroke();
-      }
+      const shape = new p5$2.Shape({ position: new p5$2.Vector(0, 0) });
+      shape.beginShape();
+      shape.quad(x1, y1, x2, y2, x3, y3, x4, y4);
+      shape.endShape();
+      this.drawShape(shape);
+
       return this;
     }
 
@@ -73270,134 +73812,29 @@ var p5 = (function () {
       let tr = args[5];
       let br = args[6];
       let bl = args[7];
-      const ctx = this.drawingContext;
-      const doFill = !!this.states.fillColor,
-        doStroke = this.states.strokeColor;
-      if (doFill && !doStroke) {
-        if (this._getFill() === styleEmpty) {
-          return this;
-        }
-      } else if (!doFill && doStroke) {
-        if (this._getStroke() === styleEmpty) {
-          return this;
-        }
-      }
-      if (this._clipping) {
-        const tempPath = new Path2D();
-        if (typeof tl === 'undefined') {
-          tempPath.rect(x, y, w, h);
-        } else {
-          tempPath.roundRect(x, y, w, h, [tl, tr, br, bl]);
-        }
-        const currentTransform = this.drawingContext.getTransform();
-        const clipBaseTransform = this._clipBaseTransform.inverse();
-        const relativeTransform = clipBaseTransform.multiply(currentTransform);
-        this.clipPath.addPath(tempPath, relativeTransform);
-        return this;
-      }
-      ctx.beginPath();
-      if (typeof tl === 'undefined') {
-        // No rounded corners
-        ctx.rect(x, y, w, h);
-      } else {
-        // At least one rounded corner
-        // Set defaults when not specified
-        if (typeof tr === 'undefined') {
-          tr = tl;
-        }
-        if (typeof br === 'undefined') {
-          br = tr;
-        }
-        if (typeof bl === 'undefined') {
-          bl = br;
-        }
 
-        // corner rounding must always be positive
-        const absW = Math.abs(w);
-        const absH = Math.abs(h);
-        const hw = absW / 2;
-        const hh = absH / 2;
-
-        // Clip radii
-        if (absW < 2 * tl) {
-          tl = hw;
-        }
-        if (absH < 2 * tl) {
-          tl = hh;
-        }
-        if (absW < 2 * tr) {
-          tr = hw;
-        }
-        if (absH < 2 * tr) {
-          tr = hh;
-        }
-        if (absW < 2 * br) {
-          br = hw;
-        }
-        if (absH < 2 * br) {
-          br = hh;
-        }
-        if (absW < 2 * bl) {
-          bl = hw;
-        }
-        if (absH < 2 * bl) {
-          bl = hh;
-        }
+      const shape = new p5$2.Shape({ position: new p5$2.Vector(0, 0) });
+      shape.beginShape();
+      shape.rectPrimitive(x, y, w, h, tl, tr, br, bl);
+      shape.endShape();
+      this.drawShape(shape);
 
-        ctx.roundRect(x, y, w, h, [tl, tr, br, bl]);
-      }
-      if (doFill) {
-        ctx.fill();
-      }
-      if (doStroke) {
-        ctx.stroke();
-      }
       return this;
     }
 
-
     triangle(args) {
-      const ctx = this.drawingContext;
-      const doFill = !!this.states.fillColor,
-        doStroke = this.states.strokeColor;
       const x1 = args[0],
         y1 = args[1];
       const x2 = args[2],
         y2 = args[3];
       const x3 = args[4],
         y3 = args[5];
-      if (doFill && !doStroke) {
-        if (this._getFill() === styleEmpty) {
-          return this;
-        }
-      } else if (!doFill && doStroke) {
-        if (this._getStroke() === styleEmpty) {
-          return this;
-        }
-      }
-      if (this._clipping) {
-        const tempPath = new Path2D();
-        tempPath.moveTo(x1, y1);
-        tempPath.lineTo(x2, y2);
-        tempPath.lineTo(x3, y3);
-        tempPath.closePath();
-        const currentTransform = this.drawingContext.getTransform();
-        const clipBaseTransform = this._clipBaseTransform.inverse();
-        const relativeTransform = clipBaseTransform.multiply(currentTransform);
-        this.clipPath.addPath(tempPath, relativeTransform);
-        return this;
-      }
-      ctx.beginPath();
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.lineTo(x3, y3);
-      ctx.closePath();
-      if (doFill) {
-        ctx.fill();
-      }
-      if (doStroke) {
-        ctx.stroke();
-      }
+
+      const shape = new p5$2.Shape({ position: new p5$2.Vector(0, 0) });
+      shape.beginShape();
+      shape.triangle(x1, y1, x2, y2, x3, y3);
+      shape.endShape();
+      this.drawShape(shape);
 
       return this;
     }
@@ -102730,6 +103167,7 @@ var p5 = (function () {
       const events = [
         'pointerdown',
         'pointerup',
+        'pointercancel',
         'pointermove',
         'dragend',
         'dragover',
@@ -103789,6 +104227,10 @@ var p5 = (function () {
       this._activePointers.set(e.pointerId, e);
       this._setMouseButton(e);
 
+      if (this.mouseIsPressed && e.buttons === 0) {
+        this._onpointerup(e);
+      }
+
       if (
         !this.mouseIsPressed &&
         typeof this._customActions.mouseMoved === 'function'
@@ -104115,6 +104557,16 @@ var p5 = (function () {
     fn._ondragend = fn._onpointerup;
     fn._ondragover = fn._onpointermove;
 
+    fn._onpointercancel = function(e) {
+      this._activePointers.delete(e.pointerId);
+      this._setMouseButton(e);
+      this._updatePointerCoords(e);
+
+      if (this._activePointers.size === 0) {
+        this.mouseIsPressed = false;
+      }
+    };
+
     /**
      * A function that's called once after a mouse button is pressed and released.
      *
@@ -106347,11 +106799,7 @@ var p5 = (function () {
      * -5 and 5 are both five units away from zero, so calling `abs(-5)` and
      * `abs(5)` both return 5. The absolute value of a number is always positive.
      *
-     * @method abs
-     * @param  {Number} n number to compute.
-     * @return {Number}   absolute value of given number.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106371,6 +106819,55 @@ var p5 = (function () {
      *   // from the middle.
      *   rect(0, 100 - h, 100, h);
      * }
+     * ```
+     *
+     * `abs()` can also be used in shaders with p5.strands. The following example
+     * uses `abs()` to create a mirror effect on the color of a shape.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere with colors that fold back like a mirror.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // sin(t) goes between -1 and 1 over time.
+     *   let sinVal = sin(t);
+     *
+     *   // abs() folds the negative values to positive.
+     *   // Now value goes between 0 and 1, creating a mirror effect.
+     *   let value = abs(sinVal);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let navy = [0.2, 0.2, 0.8, 1];
+     *   let coral = [0.8, 0.2, 0.2, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between navy (when value = 0) and coral (when value = 1).
+     *   finalColor.set(mix(navy, coral, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method abs
+     * @param  {Number} n number to compute.
+     * @return {Number}   absolute value of given number.
+     *
      */
     fn.abs = Math.abs;
 
@@ -106381,11 +106878,7 @@ var p5 = (function () {
      * For example, calling `ceil(9.03)` and `ceil(9.97)` both return the value
      * 10.
      *
-     * @method ceil
-     * @param  {Number} n number to round up.
-     * @return {Integer}   rounded up number.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106410,6 +106903,57 @@ var p5 = (function () {
      *
      *   describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');
      * }
+     * ```
+     *
+     * `ceil()` can also be used in shaders with p5.strands. The following example
+     * uses `ceil()` to create a stepped color effect on a shape.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere with stepped color bands.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // sin(t) goes between -1 and 1.
+     *   // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
+     *   let sinVal = 0.5 + 0.5 * sin(t);
+     *
+     *   // Multiply by 4 then ceil to get the next whole number up.
+     *   // Divide by 4 to bring the result back to the 0 to 1 range.
+     *   // This creates 4 distinct stepped color levels: 0.25, 0.5, 0.75, 1.
+     *   let value = ceil(sinVal * 4) / 4;
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let cyan = [0, 0.5, 1, 1];
+     *   let orange = [1, 0.5, 0, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between cyan (when value = 0) and orange (when value = 1).
+     *   // ceil() creates sharp steps between color levels.
+     *   finalColor.set(mix(cyan, orange, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method ceil
+     * @param  {Number} n number to round up.
+     * @return {Integer}   rounded up number.
      */
     fn.ceil = Math.ceil;
 
@@ -106547,11 +107091,7 @@ var p5 = (function () {
      * Calculates the value of Euler's number e (2.71828...) raised to the power
      * of a number.
      *
-     * @method exp
-     * @param  {Number} n exponent to raise.
-     * @return {Number}   e^n
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106575,8 +107115,9 @@ var p5 = (function () {
      *
      *   describe('A series of circles that grow exponentially from top left to bottom right.');
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106597,6 +107138,53 @@ var p5 = (function () {
      *   // Draw a point.
      *   point(x, y);
      * }
+     * ```
+     *
+     * `exp()` can also be used in shaders with p5.strands. The following example
+     * uses `exp()` to create an accelerating color transition on a shape.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that brightens with accelerating speed.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.0005 to slow it.
+     *   let t = millis() * 0.0005;
+     *
+     *   // exp(t) grows slowly at first, then accelerates (exponential growth).
+     *   // Multiply by 0.01 to keep it from growing too fast.
+     *   // min(..., 1) caps the value at 1 so it doesn't go past white.
+     *   let value = min(exp(t) * 0.01, 1);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let darkBlue = [0.1, 0.1, 0.3, 1];
+     *   let lightYellow = [1, 1, 0.5, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between darkBlue (when value = 0) and lightYellow (when value = 1).
+     *   // Because exp() accelerates, the color transition gets faster over time.
+     *   finalColor.set(mix(darkBlue, lightYellow, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method exp
+     * @param  {Number} n exponent to raise.
+     * @return {Number}   e^n
      */
     fn.exp = Math.exp;
 
@@ -106604,11 +107192,7 @@ var p5 = (function () {
      * Calculates the closest integer value that is less than or equal to the
      * value of a number.
      *
-     * @method floor
-     * @param  {Number} n number to round down.
-     * @return {Integer}  rounded down number.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106631,6 +107215,57 @@ var p5 = (function () {
      *
      *   describe('Two rectangles. The one on the left is bright red and the one on the right is black.');
      * }
+     * ```
+     *
+     * `floor()` can also be used in shaders with p5.strands. The following example
+     * uses `floor()` to create banding effects on a shape.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere with posterized color bands.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // sin(t) goes between -1 and 1.
+     *   // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
+     *   let sinVal = 0.5 + 0.5 * sin(t);
+     *
+     *   // Multiply by 4 then floor to get the next whole number down.
+     *   // Divide by 4 to bring the result back to the 0 to 1 range.
+     *   // This creates 5 distinct stepped color levels: 0, 0.25, 0.5, 0.75, 1.
+     *   let value = floor(sinVal * 4) / 4;
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let darkPurple = [0.2, 0, 0.8, 1];
+     *   let brightTeal = [0.2, 1, 0.8, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between darkPurple (when value = 0) and brightTeal (when value = 1).
+     *   // The floor() creates visible banding/posterization in the color.
+     *   finalColor.set(mix(darkPurple, brightTeal, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method floor
+     * @param  {Number} n number to round down.
+     * @return {Integer}  rounded down number.
      */
     fn.floor = Math.floor;
 
@@ -106647,13 +107282,7 @@ var p5 = (function () {
      * number outside of the original interval. For example, calling
      * `lerp(0, 10, 1.5)` will return 15.
      *
-     * @method lerp
-     * @param  {Number} start first value.
-     * @param  {Number} stop  second value.
-     * @param  {Number} amt   number.
-     * @return {Number}       lerped value.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106681,8 +107310,9 @@ var p5 = (function () {
      *
      *   describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * let x = 50;
      * let y = 50;
      * let targetX = 50;
@@ -106712,6 +107342,54 @@ var p5 = (function () {
      *   x = mouseX;
      *   y = mouseY;
      * }
+     * ```
+     *
+     * `lerp()` can also be used in shaders with p5.strands, where it maps to the
+     * <a href="#/p5/mix">mix()</a> function in GLSL. The following example
+     * uses `lerp()` to blend colors on a shape over time.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that blends between teal and coral.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // sin(t) goes between -1 and 1 over time.
+     *   // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
+     *   let value = 0.5 + 0.5 * sin(t);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let teal = [0, 0.8, 0.8, 1];
+     *   let coral = [1, 0.5, 0.3, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // lerp() blends teal (when value = 0) and coral (when value = 1).
+     *   finalColor.set(lerp(teal, coral, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method lerp
+     * @param  {Number} start first value.
+     * @param  {Number} stop  second value.
+     * @param  {Number} amt   number.
+     * @return {Number}       lerped value.
      */
     fn.lerp = function(start, stop, amt) {
       // p5._validateParameters('lerp', arguments);
@@ -106724,11 +107402,7 @@ var p5 = (function () {
      * `log()` expects the `n` parameter to be a value greater than 0 because
      * the natural logarithm is defined that way.
      *
-     * @method log
-     * @param  {Number} n number greater than 0.
-     * @return {Number}   natural logarithm of n.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106744,8 +107418,9 @@ var p5 = (function () {
      *
      *   describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106766,6 +107441,53 @@ var p5 = (function () {
      *   // Draw a point.
      *   point(x, y);
      * }
+     * ```
+     *
+     * `log()` can also be used in shaders with p5.strands. The following example
+     * uses `log()` to create a decelerating color transition on a shape.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that slowly shifts from purple to yellow.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // log(1 + t * 2) grows at a moderate pace over time.
+     *   // Multiply by 0.4 to bring it into the 0 to 1 range.
+     *   // min(..., 1) caps the value at 1.
+     *   let value = min(log(1 + t * 2) * 0.4, 1);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let purple = [0.5, 0, 0.5, 1];
+     *   let yellow = [1, 1, 0, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between purple (when value = 0) and yellow (when value = 1).
+     *   // Because log() slows down over time, the color transition decelerates.
+     *   finalColor.set(mix(purple, yellow, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method log
+     * @param  {Number} n number greater than 0.
+     * @return {Number}   natural logarithm of n.
      */
     fn.log = Math.log;
 
@@ -106833,16 +107555,7 @@ var p5 = (function () {
      * constrains the remapped value to the target range. For example,
      * `map(11, 0, 10, 0, 100, true)` returns 100.
      *
-     * @method map
-     * @param  {Number} value  the value to be remapped.
-     * @param  {Number} start1 lower bound of the value's current range.
-     * @param  {Number} stop1  upper bound of the value's current range.
-     * @param  {Number} start2 lower bound of the value's target range.
-     * @param  {Number} stop2  upper bound of the value's target range.
-     * @param  {Boolean} [withinBounds] constrain the value to the newly mapped range.
-     * @return {Number}        remapped number.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106861,8 +107574,9 @@ var p5 = (function () {
      *   // Draw the bottom line.
      *   line(0, 75, 0, x);
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106881,6 +107595,58 @@ var p5 = (function () {
      *   // Draw the circle.
      *   circle(50, 50, 20);
      * }
+     * ```
+     *
+     * `map()` can also be used in shaders with p5.strands. The following example
+     * uses `map()` to remap time values to color in a shader.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that shifts between cyan and orange over time.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // sin(t) goes between -1 and 1 over time.
+     *   let sinVal = sin(t);
+     *
+     *   // map() remaps this from the range [-1, 1] to the range [0, 1].
+     *   let value = map(sinVal, -1, 1, 0, 1);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let cyan = [0, 0.5, 1, 1];
+     *   let orange = [1, 0.5, 0, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between cyan (when value = 0) and orange (when value = 1).
+     *   finalColor.set(mix(cyan, orange, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method map
+     * @param  {Number} value  the value to be remapped.
+     * @param  {Number} start1 lower bound of the value's current range.
+     * @param  {Number} stop1  upper bound of the value's current range.
+     * @param  {Number} start2 lower bound of the value's target range.
+     * @param  {Number} stop2  upper bound of the value's target range.
+     * @param  {Boolean} [withinBounds] constrain the value to the newly mapped range.
+     * @return {Number}        remapped number.
      */
     fn.map = function(n, start1, stop1, start2, stop2, withinBounds) {
       // p5._validateParameters('map', arguments);
@@ -106904,12 +107670,7 @@ var p5 = (function () {
      * The version of `max()` with two or more parameters interprets them as
      * individual numbers and returns the largest number.
      *
-     * @method max
-     * @param  {Number} n0 first number to compare.
-     * @param  {Number} n1 second number to compare.
-     * @return {Number}             maximum number.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106927,8 +107688,9 @@ var p5 = (function () {
      *
      *   describe('The number 20 written in the middle of a gray square.');
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -106949,6 +107711,53 @@ var p5 = (function () {
      *
      *   describe('The number 20 written in the middle of a gray square.');
      * }
+     * ```
+     *
+     * `max()` can also be used in shaders with p5.strands. The following example
+     * uses `max()` to clamp values in a shader.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that shifts from rose to steelBlue and stops.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // 1 - t * 0.2 decreases steadily over time.
+     *   // max(..., 0) ensures the value never goes below 0.
+     *   let value = max(1 - t * 0.2, 0);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let steelBlue = [0, 0.3, 0.8, 1];
+     *   let rose = [1, 0.3, 0.8, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between steelBlue (when value = 0) and rose (when value = 1).
+     *   // max() clamps the blend so the color stops changing once it reaches steelBlue.
+     *   finalColor.set(mix(steelBlue, rose, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method max
+     * @param  {Number} n0 first number to compare.
+     * @param  {Number} n1 second number to compare.
+     * @return {Number}             maximum number.
      */
     /**
      * @method max
@@ -106980,12 +107789,7 @@ var p5 = (function () {
      * The version of `min()` with two or more parameters interprets them as
      * individual numbers and returns the smallest number.
      *
-     * @method min
-     * @param  {Number} n0 first number to compare.
-     * @param  {Number} n1 second number to compare.
-     * @return {Number}             minimum number.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -107003,8 +107807,9 @@ var p5 = (function () {
      *
      *   describe('The number 5 written in the middle of a gray square.');
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -107025,6 +107830,53 @@ var p5 = (function () {
      *
      *   describe('The number 5 written in the middle of a gray square.');
      * }
+     * ```
+     *
+     * `min()` can also be used in shaders with p5.strands. The following example
+     * uses `min()` to clamp values in a shader.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that shifts from red to green and stops.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // t * 0.2 grows steadily over time.
+     *   // min(..., 1) caps the value at 1 so it doesn't go past the target color.
+     *   let value = min(t * 0.2, 1);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let deepRed = [0.8, 0, 0.2, 1];
+     *   let yellowGreen = [0.8, 1, 0.2, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between deepRed (when value = 0) and yellowGreen (when value = 1).
+     *   // min() clamps the blend so the color stops changing once it reaches yellowGreen.
+     *   finalColor.set(mix(deepRed, yellowGreen, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method min
+     * @param  {Number} n0 first number to compare.
+     * @param  {Number} n1 second number to compare.
+     * @return {Number}             minimum number.
      */
     /**
      * @method min
@@ -107093,12 +107945,7 @@ var p5 = (function () {
      * 2 &times; 2 &times; 2. `pow(2, -3)` evaluates 1 &#247;
      * (2 &times; 2 &times; 2).
      *
-     * @method pow
-     * @param  {Number} n base of the exponential expression.
-     * @param  {Number} e power by which to raise the base.
-     * @return {Number}   n^e.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -107125,6 +107972,52 @@ var p5 = (function () {
      *
      *   describe('A series of circles that grow exponentially from top left to bottom right.');
      * }
+     * ```
+     *
+     * `pow()` can also be used in shaders with p5.strands. The following example
+     * uses `pow()` to create a gamma curve effect on colors in a shader.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere with colors that shift with a power curve.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.0005 to slow it.
+     *   let t = millis() * 0.0005;
+     *
+     *   // pow(t, 2) squares the time value: it starts slow then accelerates.
+     *   let value = pow(t, 2);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let deepBlue = [0, 0.1, 0.5, 1];
+     *   let gold = [1, 0.8, 0, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between deepBlue (when value = 0) and gold (when value = 1).
+     *   // Because pow() accelerates, the color transition gets faster over time.
+     *   finalColor.set(mix(deepBlue, gold, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method pow
+     * @param  {Number} n base of the exponential expression.
+     * @param  {Number} e power by which to raise the base.
+     * @return {Number}   n^e.
      */
     fn.pow = Math.pow;
 
@@ -107137,12 +108030,7 @@ var p5 = (function () {
      * decimal places to use when rounding. For example, `round(12.34, 1)` returns
      * 12.3. `decimals` is 0 by default.
      *
-     * @method round
-     * @param  {Number} n number to round.
-     * @param  {Number} [decimals] number of decimal places to round to, default is 0.
-     * @return {Integer}  rounded number.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -107160,8 +108048,9 @@ var p5 = (function () {
      *
      *   describe('The number 4 written in middle of the canvas.');
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -107179,6 +108068,57 @@ var p5 = (function () {
      *
      *   describe('The number 12.78 written in middle of canvas.');
      * }
+     * ```
+     *
+     * `round()` can also be used in shaders with p5.strands. The following example
+     * uses `round()` to quantize colors in a shader.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere with posterized quantized colors.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // sin(t) goes between -1 and 1.
+     *   // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
+     *   let sinVal = 0.5 + 0.5 * sin(t);
+     *
+     *   // Multiply by 4 then round to get 5 distinct levels (0, 0.25, 0.5, 0.75, 1).
+     *   // Divide by 4 to bring the result back to the 0 to 1 range.
+     *   let value = round(sinVal * 4) / 4;
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let mutedBlue = [0.3, 0.4, 0.7, 1];
+     *   let rose = [0.8, 0.3, 0.4, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between mutedBlue (when value = 0) and rose (when value = 1).
+     *   // The round() creates stepped bands of color like a posterization effect.
+     *   finalColor.set(mix(mutedBlue, rose, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method round
+     * @param  {Number} n number to round.
+     * @param  {Number} [decimals] number of decimal places to round to, default is 0.
+     * @return {Integer}  rounded number.
      */
     fn.round = function(n, decimals) {
       if (!decimals) {
@@ -107249,11 +108189,7 @@ var p5 = (function () {
      * always returns a positive value. `sqrt()` doesn't work with negative arguments
      * such as `sqrt(-9)`.
      *
-     * @method sqrt
-     * @param  {Number} n non-negative number to square root.
-     * @return {Number}   square root of number.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -107269,8 +108205,9 @@ var p5 = (function () {
      *
      *   describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');
      * }
+     * ```
      *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -107291,6 +108228,63 @@ var p5 = (function () {
      *   // Draw the point.
      *   point(x, y);
      * }
+     * ```
+     *
+     * `sqrt()` can also be used in shaders with p5.strands. The following example
+     * uses `sqrt()` to create a smooth ease-out curve on color and size.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere that grows and shifts from navy to orange with an ease-out curve.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // sin(t) goes between -1 and 1.
+     *   // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
+     *   let sinVal = 0.5 + 0.5 * sin(t);
+     *
+     *   // sqrt(sinVal) creates an ease-out curve: fast start, slow finish.
+     *   // Since sinVal is in [0,1], sqrt() stays in [0,1].
+     *   let value = sqrt(sinVal);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let navy = [0, 0.1, 0.4, 1];
+     *   let brightOrange = [1, 0.6, 0, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between navy (when value = 0) and brightOrange (when value = 1).
+     *   // The sqrt() ease-out makes the color change fast at first, then slow down.
+     *   finalColor.set(mix(navy, brightOrange, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function drawShape() {
+     *   let t = millis() * 0.001;
+     *   let sinVal = 0.5 + 0.5 * sin(t);
+     *   let size = 10 + sqrt(sinVal) * 30;
+     *   sphere(size);
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   drawShape();
+     * }
+     * ```
+     *
+     * @method sqrt
+     * @param  {Number} n non-negative number to square root.
+     * @return {Number}   square root of number.
      */
     fn.sqrt = Math.sqrt;
 
@@ -107300,11 +108294,7 @@ var p5 = (function () {
      * A number's fractional part includes its decimal values. For example,
      * `fract(12.34)` returns 0.34.
      *
-     * @method fract
-     * @param {Number} n number whose fractional part will be found.
-     * @returns {Number} fractional part of n.
-     *
-     * @example
+     * ```js example
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -107324,6 +108314,53 @@ var p5 = (function () {
      *
      *   describe('The number 56.78 written above the number 0.78.');
      * }
+     * ```
+     *
+     * `fract()` can also be used in shaders with p5.strands. The following example
+     * uses `fract()` to create repeating patterns in a shader.
+     *
+     * ```js example
+     * let myShader;
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   myShader = buildColorShader(shaderCallback);
+     *   describe('A sphere with a repeating gradient pattern.');
+     * }
+     *
+     * function shaderCallback() {
+     *   // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
+     *   let t = millis() * 0.001;
+     *
+     *   // Multiply by 0.5 to slow the animation to half speed.
+     *   // fract(t * 0.5) extracts only the decimal part of the number.
+     *   // This creates a smooth sawtooth wave that repeats every 2 seconds.
+     *   let value = fract(t * 0.5);
+     *
+     *   // Each color is [R, G, B, A] with values from 0 to 1.
+     *   let cyan = [0, 0.5, 1, 1];
+     *   let orange = [1, 0.5, 0, 1];
+     *
+     *   finalColor.begin();
+     *
+     *   // mix() blends between cyan (when value = 0) and orange (when value = 1).
+     *   // Because fract() resets to 0 each cycle, the color loops smoothly.
+     *   finalColor.set(mix(cyan, orange, value));
+     *
+     *   finalColor.end();
+     * }
+     *
+     * function draw() {
+     *   background(220);
+     *   shader(myShader);
+     *   noStroke();
+     *   sphere(30);
+     * }
+     * ```
+     *
+     * @method fract
+     * @param {Number} n number whose fractional part will be found.
+     * @returns {Number} fractional part of n.
      */
     fn.fract = function(toConvert) {
       // p5._validateParameters('fract', arguments);
@@ -108455,6 +109492,8 @@ var p5 = (function () {
   }
 
   /**
+   * @private
+   * @internal
    * Each of the following decorators validates the data on vector operations.
    * These ensure that the arguments are consistently formatted, and that
    * pre-conditions are met.
@@ -120924,7 +121963,7 @@ var p5 = (function () {
      * coordinates of the bounding box's bottom-left corner. See
      * <a href="#/p5/textAlign">textAlign()</a> for more ways to align text.
      *
-     * The fourth parameter, `options`, is also optional. `font.textToPoints()`
+     * The fourth parameter, `options`, is also optional. `font.textToContours()`
      * expects an object with the following properties:
      *
      * `sampleFactor` is the ratio of the text's path length to the number of
@@ -121007,6 +122046,15 @@ var p5 = (function () {
      *
      * The generated model (a Geometry object) can be manipulated further—rotated, scaled,
      * or styled with shaders—to create engaging, interactive visual art.
+     * 
+     * The `options` parameter is also optional. `font.textToModel()` expects an object 
+     * with the following properties:
+     * 
+     * `extrude` is the depth to extrude the text. It defaults to 0. A value of 0 produces
+     * flat text; higher values create thicker, 3D models.
+     * 
+     * `sampleFactor` is a factor controlling the level of detail for the text contours.
+     * It defaults to 1. Higher values result in smoother curves.
      *
      * @param {String} str The text string to convert into a 3D model.
      * @param {Number} x The x-coordinate for the starting position of the text.
@@ -124889,7 +125937,7 @@ var p5 = (function () {
       }
 
       // Create image from data
-      const region = new Image(w * framebuffer.density, h * framebuffer.density);
+      const region = new Image$1(w * framebuffer.density, h * framebuffer.density);
       region.imageData = region.canvas.getContext('2d').createImageData(
         region.width,
         region.height
@@ -134982,19 +136030,116 @@ var p5 = (function () {
 
     for (const name of Object.keys(BUILTIN_GLOBAL_SPECS)) {
       const spec = BUILTIN_GLOBAL_SPECS[name];
-      Object.defineProperty(window, name, {
-        get: () => {
+      const backingKey = `_strands_${name}`;
+
+      // Define on window for global mode only
+      const inst = getRuntimeP5Instance();
+      if (inst?._isGlobal) {
+        Object.defineProperty(window, name, {
+          get: () => {
+            if (strandsContext.active) {
+              return getBuiltinGlobalNode(strandsContext, name);
+            }
+            const inst = getRuntimeP5Instance();
+            return spec.get(inst);
+          },
+          configurable: true,
+        });
+      }
+
+      // Capture original descriptor (held in closure for the getter to delegate to)
+      const originalProtoDesc = Object.getOwnPropertyDescriptor(strandsContext.p5.prototype, name);
+
+      // Define on p5.prototype for instance mode
+      Object.defineProperty(strandsContext.p5.prototype, name, {
+        get: function() {
           if (strandsContext.active) {
             return getBuiltinGlobalNode(strandsContext, name);
           }
-          const inst = getRuntimeP5Instance();
-            return spec.get(inst);
+          // If our setter stored a value on this instance, return it
+          if (Object.prototype.hasOwnProperty.call(this, backingKey)) {
+            return this[backingKey];
+          }
+          // Delegate to original getter (e.g. width -> this._renderer?.width)
+          if (originalProtoDesc?.get) {
+            return originalProtoDesc.get.call(this);
+          }
+          // Fall back to original value for data properties (like mouseX)
+          return originalProtoDesc?.value;
         },
+        set: function(val) {
+          this[backingKey] = val;
+        },
+        configurable: true,
       });
+
+      // Define on p5.Graphics.prototype for graphics mode
+      const GraphicsProto = strandsContext.p5?.Graphics?.prototype;
+      if (GraphicsProto) {
+        const originalDesc = Object.getOwnPropertyDescriptor(GraphicsProto, name);
+
+        Object.defineProperty(GraphicsProto, name, {
+          get: function() {
+            if (strandsContext.active) {
+              return getBuiltinGlobalNode(strandsContext, name);
+            }
+            // Delegate to original getter if it exists (class-level getters like width, deltaTime)
+            if (originalDesc?.get) {
+              return originalDesc.get.call(this);
+            }
+            return this[backingKey];
+          },
+          set: function(val) {
+            if (originalDesc?.set) {
+              originalDesc.set.call(this, val);
+            } else {
+              this[backingKey] = val;
+            }
+          },
+          configurable: true,
+        });
+      }
     }
     strandsContext._builtinGlobalsAccessorsInstalled = true;
   }
 
+  function installInstanceIndexAccessor(strandsContext) {
+    if (strandsContext._instanceIndexAccessorInstalled) return;
+
+    const getRuntimeP5Instance = () => strandsContext.renderer?._pInst || strandsContext.p5?.instance;
+
+    const instanceIndexGetter = function() {
+      if (strandsContext.active) {
+        const node = variableNode(strandsContext, { baseType: BaseType.INT, dimension: 1 }, strandsContext.backend.instanceIdReference());
+        return createStrandsNode(node.id, node.dimension, strandsContext);
+      }
+      return undefined;
+    };
+
+    const inst = getRuntimeP5Instance();
+    if (inst?._isGlobal) {
+      Object.defineProperty(window, 'instanceIndex', {
+        get: instanceIndexGetter,
+        configurable: true,
+      });
+    }
+
+    Object.defineProperty(strandsContext.p5.prototype, 'instanceIndex', {
+      get: instanceIndexGetter,
+      configurable: true,
+    });
+
+    const GraphicsProto = strandsContext.p5?.Graphics?.prototype;
+    if (GraphicsProto) {
+      Object.defineProperty(GraphicsProto, 'instanceIndex', {
+        get: instanceIndexGetter,
+        configurable: true,
+      });
+    }
+
+    strandsContext._instanceIndexAccessorInstalled = true;
+  }
+
   //////////////////////////////////////////////
   // Prototype mirroring helpers
   //////////////////////////////////////////////
@@ -135168,7 +136313,7 @@ var p5 = (function () {
     const originalLerp = fn.lerp;
     augmentFn(fn, p5, 'lerp', function (...args) {
       if (strandsContext.active) {
-        return fn.mix(...args);
+        return this.mix(...args);
       } else {
         return originalLerp.apply(this, args);
       }
@@ -135191,6 +136336,139 @@ var p5 = (function () {
       return result;
     });
 
+    const originalColor = fn.color;
+    augmentFn(fn, p5, 'color', function (...args) {
+      if (!strandsContext.active) {
+        return originalColor.apply(this, args);
+      }
+      // Reuse p5's parser - handles hex strings, rgb(), CSS named colors, numerics
+      const c = originalColor.apply(this, args);
+      // _getRGBA() returns [r, g, b, a] normalized to 0-1
+      const rgba = c._getRGBA();
+      const { id, dimension } = primitiveConstructorNode(
+        strandsContext,
+        { baseType: BaseType.FLOAT, dimension: null },
+        rgba
+      );
+      return createStrandsNode(id, dimension, strandsContext);
+    });
+    const originalLerpColor = fn.lerpColor;
+    augmentFn(fn, p5, 'lerpColor', function (...args) {
+      if (!strandsContext.active) {
+        return originalLerpColor.apply(this, args);
+      }
+      // In strands, colors are vec4s - lerpColor maps directly to GLSL mix()
+      return this.mix(...args);
+    });
+    // Component accessors: extract scalar channels from a vec4 color
+    const originalRed = fn.red;
+    augmentFn(fn, p5, 'red', function (...args) {
+      if (!strandsContext.active) {
+        return originalRed.apply(this, args);
+      }
+      return p5.strandsNode(args[0]).x;
+    });
+
+    const originalGreen = fn.green;
+    augmentFn(fn, p5, 'green', function (...args) {
+      if (!strandsContext.active) {
+        return originalGreen.apply(this, args);
+      }
+      return p5.strandsNode(args[0]).y;
+    });
+
+    const originalBlue = fn.blue;
+    augmentFn(fn, p5, 'blue', function (...args) {
+      if (!strandsContext.active) {
+        return originalBlue.apply(this, args);
+      }
+      return p5.strandsNode(args[0]).z;
+    });
+
+    const originalAlpha = fn.alpha;
+    augmentFn(fn, p5, 'alpha', function (...args) {
+      if (!strandsContext.active) {
+        return originalAlpha.apply(this, args);
+      }
+      return p5.strandsNode(args[0]).w;
+    });
+
+    // RGB to HSB conversion based on:
+    // https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB
+    // Using mix/step to avoid branching, via the compact form from:
+    // http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl
+    const _rgb2hsb = (instance, colorNode) => {
+    const r = colorNode.x;
+    const g = colorNode.y;
+    const b = colorNode.z;
+    const K = instance.vec4(0, -1/3, 2/3, -1);
+    const p = instance.mix(
+      instance.vec4(b, g, K.w, K.z),
+      instance.vec4(g, b, K.x, K.y),
+      instance.step(b, g)
+    );
+    const q = instance.mix(
+      instance.vec4(p.x, p.y, p.w, r),
+      instance.vec4(r, p.y, p.z, p.x),
+      instance.step(p.x, r)
+    );
+    const d = q.x.sub(instance.min(q.w, q.y));
+    const e = p5.strandsNode(1e-10);
+    const h = instance.abs(q.z.add(q.w.sub(q.y).div(d.mult(6).add(e))));
+    const s = d.div(q.x.add(e));
+    return instance.vec3(h, s, q.x);
+  };
+
+  const _rgb2hsl = (instance, colorNode) => {
+    const r = colorNode.x;
+    const g = colorNode.y;
+    const b = colorNode.z;
+    const maxC = instance.max(r, instance.max(g, b));
+    const minC = instance.min(r, instance.min(g, b));
+    const l = maxC.add(minC).div(2);
+    const d = maxC.sub(minC);
+    const e = p5.strandsNode(1e-10);
+    const s = instance.mix(
+      p5.strandsNode(0),
+      d.div(p5.strandsNode(1).sub(instance.abs(l.mult(2).sub(1)))),
+      instance.step(e, d)
+    );
+    const h_rg = instance.mod(g.sub(b).div(d.add(e)), p5.strandsNode(6)).div(6);
+    const h_gb = b.sub(r).div(d.add(e)).add(2).div(6);
+    const h_br = r.sub(g).div(d.add(e)).add(4).div(6);
+    const isR = instance.step(maxC.sub(e), r).mult(instance.step(r.sub(e), maxC));
+    const isG = instance.step(maxC.sub(e), g).mult(instance.step(g.sub(e), maxC));
+    const h = instance.mix(instance.mix(h_br, h_gb, isG), h_rg, isR);
+    return instance.vec3(h, s, l);
+  };
+    const originalHue = fn.hue;
+    augmentFn(fn, p5, 'hue', function (...args) {
+      if (!strandsContext.active) return originalHue.apply(this, args);
+      const colorNode = p5.strandsNode(args[0]);
+      return _rgb2hsl(this, this.vec3(colorNode.x, colorNode.y, colorNode.z)).x;
+    });
+
+    const originalSaturation = fn.saturation;
+    augmentFn(fn, p5, 'saturation', function (...args) {
+      if (!strandsContext.active) return originalSaturation.apply(this, args);
+      const colorNode = p5.strandsNode(args[0]);
+      return _rgb2hsl(this, this.vec3(colorNode.x, colorNode.y, colorNode.z)).y;
+    });
+
+    const originalBrightness = fn.brightness;
+    augmentFn(fn, p5, 'brightness', function (...args) {
+      if (!strandsContext.active) return originalBrightness.apply(this, args);
+      const colorNode = p5.strandsNode(args[0]);
+      return _rgb2hsb(this, this.vec3(colorNode.x, colorNode.y, colorNode.z)).z;
+    });
+
+    const originalLightness = fn.lightness;
+    augmentFn(fn, p5, 'lightness', function (...args) {
+      if (!strandsContext.active) return originalLightness.apply(this, args);
+      const colorNode = p5.strandsNode(args[0]);
+      return _rgb2hsl(this, this.vec3(colorNode.x, colorNode.y, colorNode.z)).z;
+    });
+
     augmentFn(fn, p5, 'getTexture', function (...rawArgs) {
       if (strandsContext.active) {
         const { id, dimension } = strandsContext.backend.createGetTextureCall(strandsContext, rawArgs);
@@ -135216,6 +136494,7 @@ var p5 = (function () {
     const originalNoise = fn.noise;
     const originalNoiseDetail = fn.noiseDetail;
     const originalRandom = fn.random;
+    const originalRandomGaussian=fn.randomGaussian;
     const originalRandomSeed = fn.randomSeed;
     const originalMillis = fn.millis;
 
@@ -135359,6 +136638,20 @@ var p5 = (function () {
       }
     });
 
+     augmentFn(fn, p5, 'randomGaussian', function(...args){
+        if(!strandsContext.active){
+          return originalRandomGaussian.apply(this, args);
+        }
+        const mean = args.length >= 1 ? args[0] : 0;
+        const stdDev = args.length >= 2 ? args[1] : 1;
+
+        const u1 = this.max(this.random(), 1e-6);
+        const u2 = this.random();
+        const z = this.sqrt(this.log(u1).mult(-2)).mult(this.cos(u2.mult(2*Math.PI)));
+
+        return z.mult(stdDev).add(mean);
+      });
+
     augmentFn(fn, p5, 'millis', function (...args) {
       if (!strandsContext.active) {
         return originalMillis.apply(this, args);
@@ -135550,6 +136843,17 @@ var p5 = (function () {
               return createStrandsNode(propNode.id, propNode.dimension, strandsContext, onRebind);
             },
             set(val) {
+              const valDim = val?.isStrandsNode
+                ? val.dimension
+                : (Array.isArray(val) ? val.length : 1);
+              if( valDim !== propertyType.dataType.dimension && valDim !== 1){
+                dimensionMismatchError(
+                  propertyType.dataType.dimension,
+                  valDim,
+                  `${param.name}.${propertyType.name}`
+                );
+              }
+
               const oldDependsOn = dag.dependsOn[structNode.id];
               const newDependsOn = [...oldDependsOn];
               let newValueID;
@@ -135627,6 +136931,7 @@ var p5 = (function () {
   }
   function createShaderHooksFunctions(strandsContext, fn, shader) {
     installBuiltinGlobalAccessors(strandsContext);
+    installInstanceIndexAccessor(strandsContext);
 
     // Add shader context to hooks before spreading
     const vertexHooksWithContext = Object.fromEntries(
@@ -135659,6 +136964,54 @@ var p5 = (function () {
       hook.set = function(result) {
         hook._result = result;
       };
+      hook._active = false;
+
+      const numStructArgs = hookType.parameters.filter(
+        param => param.type && param.type.properties
+      ).length;
+      let argIdx = -1;
+      if (numStructArgs === 1) {
+        argIdx = hookType.parameters.findIndex(
+          param => param.type && param.type.properties
+        );
+      }
+      if (argIdx >= 0) {
+        const structParam = hookType.parameters[argIdx];
+        if (structParam.type.properties) {
+          const nameMatch = /^get([A-Z0-9]\w*)$/.exec(hookType.name);
+          const displayName = nameMatch
+            ? nameMatch[1][0].toLowerCase() + nameMatch[1].slice(1)
+            : hookType.name;
+          for (const prop of structParam.type.properties) {
+            const key = prop.name;
+            Object.defineProperty(hook, key, {
+              get() {
+                if (!this._active) {
+                  userError(
+                    'scope error',
+                    `It looks like you're trying to access "${displayName}.${key}" outside of its begin()/end() block.\n\n` +
+                    `Properties of ${displayName} are only available between ` +
+                    `${displayName}.begin() and ${displayName}.end().\n\n` +
+                    `To share data between hooks, use sharedVec3() or sharedFloat() ` +
+                    `to pass values between them.`
+                  );
+                }
+                return this._args[this._argIdx][key];
+              },
+              set(val) {
+                if (!this._active) {
+                  userError(
+                    'scope error',
+                    `It looks like you're trying to set "${displayName}.${key}" outside of its begin()/end() block.`
+                  );
+                }
+                this._args[this._argIdx][key] = val;
+              },
+              enumerable: true,
+            });
+          }
+        }
+      }
 
       let entryBlockID;
       function setupHook() {
@@ -135667,25 +137020,14 @@ var p5 = (function () {
         addEdge(cfg, cfg.currentBlock, entryBlockID);
         pushBlock(cfg, entryBlockID);
         const args = createHookArguments(strandsContext, hookType.parameters);
-        const numStructArgs = hookType.parameters.filter(param => param.type.properties).length;
-        let argIdx = -1;
-        if (numStructArgs === 1) {
-          argIdx = hookType.parameters.findIndex(param => param.type.properties);
-        }
+        hook._active = true;
+        hook._args = args;
+        hook._argIdx = argIdx;
         hook._properties = [];
         for (let i = 0; i < args.length; i++) {
           if (i === argIdx) {
             for (const key of args[argIdx].structProperties || []) {
               hook._properties.push(key);
-              Object.defineProperty(hook, key, {
-                get() {
-                  return args[argIdx][key];
-                },
-                set(val) {
-                  args[argIdx][key] = val;
-                },
-                enumerable: true,
-              });
             }
             if (hookType.returnType?.typeName === hookType.parameters[argIdx].type.typeName) {
               hook.set(args[argIdx]);
@@ -135698,6 +137040,7 @@ var p5 = (function () {
         return args;
       }
       function finishHook() {
+        hook._active = false;
         const userReturned = hook._result;
         strandsContext.activeHook = undefined;
 
@@ -136136,18 +137479,20 @@ var p5 = (function () {
    */
 
   /**
-   * @method instanceID
+   * @property instanceIndex
    * @beta
    * @description
    * Returns the index of the current instance when drawing multiple copies of a
    * shape with <a href="#/p5/model">`model(count)`</a>. The first instance has an
-   * ID of `0`, the second has `1`, and so on.
+   * index of `0`, the second has `1`, and so on.
    *
    * This lets each copy of a shape behave differently. For example, you can use
-   * the ID to place instances at different positions, give them different colors,
+   * the index to place instances at different positions, give them different colors,
    * or animate them at different speeds.
    *
-   * `instanceID()` can only be used inside a p5.strands shader callback.
+   * `instanceIndex` can only be used inside a p5.strands shader callback.
+   *
+   * (Note: `instanceID()` is also available as a function for compatibility.)
    *
    * ```js example
    * let instancesShader;
@@ -136170,7 +137515,7 @@ var p5 = (function () {
    *   // Spread spheres evenly across the canvas based on their index
    *   let spacing = width / count;
    *   worldInputs.position.x +=
-   *     (instanceID() - (count - 1) / 2) * spacing;
+   *     (instanceIndex - (count - 1) / 2) * spacing;
    *   worldInputs.end();
    * }
    *
@@ -136184,7 +137529,7 @@ var p5 = (function () {
    * }
    * ```
    *
-   * If you are using WebGPU mode, a common pattern is to use `instanceID()` to look up data made with
+   * If you are using WebGPU mode, a common pattern is to use `instanceIndex` to look up data made with
    * <a href="#/p5/createStorage">`createStorage()`</a>.
    * This lets you give each instance different properties.
    *
@@ -136227,7 +137572,7 @@ var p5 = (function () {
    *   let itemColor = sharedVec4();
    *
    *   worldInputs.begin();
-   *   let item = data[instanceID()];
+   *   let item = data[instanceIndex];
    *   itemColor = item.color;
    *   worldInputs.position += item.position;
    *   worldInputs.end();
@@ -136249,7 +137594,22 @@ var p5 = (function () {
    * This can be paired with <a href="#/p5/buildComputeShader">`buildComputeShader`</a>
    * to update the data being read.
    *
-   * @webgpu
+   * @type {*}
+   */
+
+  /**
+   * @method instanceID
+   * @beta
+   * @deprecated Use <a href="#/p5/instanceIndex">`instanceIndex`</a> instead.
+   * @description
+   * A function alias for <a href="#/p5/instanceIndex">`instanceIndex`</a>, kept for compatibility.
+   * Prefer using <a href="#/p5/instanceIndex">`instanceIndex`</a> directly as a value instead.
+   *
+   * Returns the index of the current instance when drawing multiple copies of a
+   * shape with <a href="#/p5/model">`model(count)`</a>.
+   *
+   * `instanceID()` can only be used inside a p5.strands shader callback.
+   *
    * @returns {*} The index of the current instance.
    */