p5 2.3.0 → 2.3.1-rc.1

package/lib/p5.esm.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.3.0 May 28, 2026 */
+/*! p5.js v2.3.1-rc.1 June 24, 2026 */
 /**
  * @module Constants
  * @submodule Constants
@@ -12,7 +12,7 @@ const _PI = Math.PI;
  * @property {String} VERSION
  * @final
  */
-const VERSION = '2.3.0';
+const VERSION = '2.3.1-rc.1';
 
 // GRAPHICS RENDERER
 /**
@@ -11357,6 +11357,14 @@ function creatingReading(p5, fn){
    * 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.
@@ -17530,7 +17538,7 @@ function _checkFileExtension(filename, extension) {
  */
 
 
-class Image {
+let Image$1 = class Image {
   constructor(width, height) {
     this.width = width;
     this.height = height;
@@ -19313,7 +19321,7 @@ class Image {
       }
     }
   }
-}
+};
 function encodeAndDownloadGif(pImg, filename) {
   const props = pImg.gifProperties;
 
@@ -19615,9 +19623,9 @@ function image$2(p5, fn){
    * @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.
@@ -23465,6 +23473,14 @@ function vector(p5, fn) {
    * @property z
    * @name z
    */
+
+  /**
+   * The dimensions of the vector
+   * @type {Number}
+   * @for p5.Vector
+   * @property dimensions
+   * @name dimensions
+   */
 }
 
 if (typeof p5 !== 'undefined') {
@@ -24012,6 +24028,47 @@ class EllipsePrimitive extends ShapePrimitive {
   }
 }
 
+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 {
@@ -24494,6 +24551,42 @@ class Shape {
     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();
@@ -24598,6 +24691,9 @@ class PrimitiveVisitor {
   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) {
@@ -24801,6 +24897,62 @@ class PrimitiveToPath2DConverter extends PrimitiveVisitor {
     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];
@@ -24997,6 +25149,72 @@ class PrimitiveToVerticesConverter extends PrimitiveVisitor {
       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);
   }
 }
@@ -26841,7 +27059,7 @@ class Renderer {
     // 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')
@@ -30602,8 +30820,9 @@ function attributes(p5, fn){
    * 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.
    *
@@ -38983,8 +39202,19 @@ function loadingDisplaying(p5, fn){
 
       } 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;
@@ -55054,7 +55284,11 @@ class Renderer3D extends Renderer {
     // 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]
@@ -55177,7 +55411,7 @@ class Renderer3D extends Renderer {
   _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);
     }
@@ -60621,7 +60855,7 @@ class Shader {
    * @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 {
@@ -61625,6 +61859,10 @@ class Shader {
       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
@@ -63936,7 +64174,7 @@ function material(p5, fn) {
    *   // 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;
@@ -65766,11 +66004,7 @@ function trigonometry(p5, fn){
    * <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);
    *
@@ -65788,8 +66022,9 @@ function trigonometry(p5, fn){
    *
    *   describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -65807,6 +66042,52 @@ function trigonometry(p5, fn){
    *
    *   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));
@@ -65821,11 +66102,7 @@ function trigonometry(p5, fn){
    * 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);
    *
@@ -65843,8 +66120,9 @@ function trigonometry(p5, fn){
    *
    *   describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -65862,6 +66140,52 @@ function trigonometry(p5, fn){
    *
    *   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));
@@ -65876,11 +66200,7 @@ function trigonometry(p5, fn){
    * (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);
    *
@@ -65898,8 +66218,9 @@ function trigonometry(p5, fn){
    *
    *   describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -65917,6 +66238,55 @@ function trigonometry(p5, fn){
    *
    *   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));
@@ -66000,11 +66370,7 @@ function trigonometry(p5, fn){
    * 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);
    *
@@ -66022,8 +66388,9 @@ function trigonometry(p5, fn){
    *   line(50, y, x, y);
    *   circle(x, y, 20);
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -66040,8 +66407,9 @@ function trigonometry(p5, fn){
    *   // Draw the point.
    *   point(x, y);
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -66058,6 +66426,51 @@ function trigonometry(p5, fn){
    *   // 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));
@@ -66071,11 +66484,7 @@ function trigonometry(p5, fn){
    * 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);
    *
@@ -66093,8 +66502,9 @@ function trigonometry(p5, fn){
    *   line(50, y, x, y);
    *   circle(x, y, 20);
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -66111,8 +66521,9 @@ function trigonometry(p5, fn){
    *   // Draw the point.
    *   point(x, y);
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -66129,6 +66540,51 @@ function trigonometry(p5, fn){
    *   // 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));
@@ -66143,11 +66599,7 @@ function trigonometry(p5, fn){
    * 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);
    *
@@ -66164,6 +66616,53 @@ function trigonometry(p5, fn){
    *   // 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));
@@ -66179,11 +66678,7 @@ function trigonometry(p5, fn){
    * 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);
    *
@@ -66198,6 +66693,54 @@ function trigonometry(p5, fn){
    *
    *   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;
 
@@ -66211,11 +66754,7 @@ function trigonometry(p5, fn){
    * 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);
    *
@@ -66230,6 +66769,56 @@ function trigonometry(p5, fn){
    *
    *   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;
 
@@ -67215,7 +67804,7 @@ class Texture {
   _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;
@@ -70158,6 +70747,13 @@ function userError(errorType, errorMessage) {
     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
 /////////////////////////////////
@@ -70446,6 +71042,16 @@ class StrandsNode {
 
     // 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,
@@ -70498,6 +71104,16 @@ class StrandsNode {
 
     // 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,
@@ -71046,38 +71662,24 @@ function castToFloat(strandsContext, dep) {
   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);
@@ -71274,7 +71876,11 @@ function swizzleTrap(id, dimension, strandsContext, onRebind) {
             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);
@@ -71748,7 +72354,7 @@ const glslBackend = {
     }
     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];
@@ -72039,7 +72645,7 @@ class FilterRenderer2D {
       _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);
         }
@@ -72471,8 +73077,6 @@ class FilterRenderer2D {
   }
 }
 
-const styleEmpty = 'rgba(0,0,0,0)';
-
 class Renderer2D extends Renderer {
   constructor(pInst, w, h, isMainCanvas, elt, attributes = {}) {
     super(pInst, w, h, isMainCanvas);
@@ -72631,7 +73235,7 @@ class Renderer2D extends Renderer {
     }
     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
@@ -72904,10 +73508,12 @@ class Renderer2D extends Renderer {
     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
@@ -72930,16 +73536,16 @@ class Renderer2D extends Renderer {
 
       // 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);
     }
 
@@ -73025,7 +73631,7 @@ class Renderer2D extends Renderer {
     // 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(
@@ -73165,96 +73771,32 @@ class Renderer2D extends Renderer {
   }
 
   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;
   }
 
@@ -73267,134 +73809,29 @@ class Renderer2D extends Renderer {
     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;
   }
@@ -102727,6 +103164,7 @@ function pointer(p5, fn, lifecycles){
     const events = [
       'pointerdown',
       'pointerup',
+      'pointercancel',
       'pointermove',
       'dragend',
       'dragover',
@@ -103786,6 +104224,10 @@ function pointer(p5, fn, lifecycles){
     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'
@@ -104112,6 +104554,16 @@ function pointer(p5, fn, lifecycles){
   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.
    *
@@ -106344,11 +106796,7 @@ function calculation(p5, fn){
    * -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);
    *
@@ -106368,6 +106816,55 @@ function calculation(p5, fn){
    *   // 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;
 
@@ -106378,11 +106875,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -106407,6 +106900,57 @@ function calculation(p5, fn){
    *
    *   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;
 
@@ -106544,11 +107088,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -106572,8 +107112,9 @@ function calculation(p5, fn){
    *
    *   describe('A series of circles that grow exponentially from top left to bottom right.');
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -106594,6 +107135,53 @@ function calculation(p5, fn){
    *   // 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;
 
@@ -106601,11 +107189,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -106628,6 +107212,57 @@ function calculation(p5, fn){
    *
    *   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;
 
@@ -106644,13 +107279,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -106678,8 +107307,9 @@ function calculation(p5, fn){
    *
    *   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;
@@ -106709,6 +107339,54 @@ function calculation(p5, fn){
    *   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);
@@ -106721,11 +107399,7 @@ function calculation(p5, fn){
    * `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);
    *
@@ -106741,8 +107415,9 @@ function calculation(p5, fn){
    *
    *   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);
    *
@@ -106763,6 +107438,53 @@ function calculation(p5, fn){
    *   // 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;
 
@@ -106830,16 +107552,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -106858,8 +107571,9 @@ function calculation(p5, fn){
    *   // Draw the bottom line.
    *   line(0, 75, 0, x);
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -106878,6 +107592,58 @@ function calculation(p5, fn){
    *   // 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);
@@ -106901,12 +107667,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -106924,8 +107685,9 @@ function calculation(p5, fn){
    *
    *   describe('The number 20 written in the middle of a gray square.');
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -106946,6 +107708,53 @@ function calculation(p5, fn){
    *
    *   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
@@ -106977,12 +107786,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -107000,8 +107804,9 @@ function calculation(p5, fn){
    *
    *   describe('The number 5 written in the middle of a gray square.');
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -107022,6 +107827,53 @@ function calculation(p5, fn){
    *
    *   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
@@ -107090,12 +107942,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -107122,6 +107969,52 @@ function calculation(p5, fn){
    *
    *   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;
 
@@ -107134,12 +108027,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -107157,8 +108045,9 @@ function calculation(p5, fn){
    *
    *   describe('The number 4 written in middle of the canvas.');
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -107176,6 +108065,57 @@ function calculation(p5, fn){
    *
    *   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) {
@@ -107246,11 +108186,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -107266,8 +108202,9 @@ function calculation(p5, fn){
    *
    *   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);
    *
@@ -107288,6 +108225,63 @@ function calculation(p5, fn){
    *   // 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;
 
@@ -107297,11 +108291,7 @@ function calculation(p5, fn){
    * 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);
    *
@@ -107321,6 +108311,53 @@ function calculation(p5, fn){
    *
    *   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);
@@ -108452,6 +109489,8 @@ function _validatedVectorOperation(expectsSoloNumberArgument){
 }
 
 /**
+ * @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.
@@ -120921,7 +121960,7 @@ class Font {
    * 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
@@ -121004,6 +122043,15 @@ class Font {
    *
    * 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.
@@ -124886,7 +125934,7 @@ class RendererGL extends Renderer3D {
     }
 
     // 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
@@ -134979,19 +136027,116 @@ function installBuiltinGlobalAccessors(strandsContext) {
 
   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
 //////////////////////////////////////////////
@@ -135165,7 +136310,7 @@ function initGlobalStrandsAPI(p5, fn, strandsContext) {
   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);
     }
@@ -135188,6 +136333,139 @@ function initGlobalStrandsAPI(p5, fn, strandsContext) {
     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);
@@ -135213,6 +136491,7 @@ function initGlobalStrandsAPI(p5, fn, strandsContext) {
   const originalNoise = fn.noise;
   const originalNoiseDetail = fn.noiseDetail;
   const originalRandom = fn.random;
+  const originalRandomGaussian=fn.randomGaussian;
   const originalRandomSeed = fn.randomSeed;
   const originalMillis = fn.millis;
 
@@ -135356,6 +136635,20 @@ function initGlobalStrandsAPI(p5, fn, strandsContext) {
     }
   });
 
+   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);
@@ -135547,6 +136840,17 @@ function createHookArguments(strandsContext, parameters){
             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;
@@ -135624,6 +136928,7 @@ function enforceReturnTypeMatch(strandsContext, expectedType, returned, hookName
 }
 function createShaderHooksFunctions(strandsContext, fn, shader) {
   installBuiltinGlobalAccessors(strandsContext);
+  installInstanceIndexAccessor(strandsContext);
 
   // Add shader context to hooks before spreading
   const vertexHooksWithContext = Object.fromEntries(
@@ -135656,6 +136961,54 @@ function createShaderHooksFunctions(strandsContext, fn, shader) {
     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() {
@@ -135664,25 +137017,14 @@ function createShaderHooksFunctions(strandsContext, fn, shader) {
       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]);
@@ -135695,6 +137037,7 @@ function createShaderHooksFunctions(strandsContext, fn, shader) {
       return args;
     }
     function finishHook() {
+      hook._active = false;
       const userReturned = hook._result;
       strandsContext.activeHook = undefined;
 
@@ -136133,18 +137476,20 @@ if (typeof p5 !== "undefined") {
  */
 
 /**
- * @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;
@@ -136167,7 +137512,7 @@ if (typeof p5 !== "undefined") {
  *   // 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();
  * }
  *
@@ -136181,7 +137526,7 @@ if (typeof p5 !== "undefined") {
  * }
  * ```
  *
- * 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.
  *
@@ -136224,7 +137569,7 @@ if (typeof p5 !== "undefined") {
  *   let itemColor = sharedVec4();
  *
  *   worldInputs.begin();
- *   let item = data[instanceID()];
+ *   let item = data[instanceIndex];
  *   itemColor = item.color;
  *   worldInputs.position += item.position;
  *   worldInputs.end();
@@ -136246,7 +137591,22 @@ if (typeof p5 !== "undefined") {
  * 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.
  */