Merge branch 'dev-2.0' into transform/Clip

Author: perminder-17

contributor_docs/es/steward_guidelines.md

@@ -2286,18 +2286,114 @@ function customShapes(p5, fn) {
   };
 
   /**
-   * Get or set multiple spline properties at once.
-   *
-   * Similar to <a href="#/p5/splineProperty">splineProperty()</a>:
-   * `splineProperty('tightness', t)` is the same as
-   * `splineProperties({'tightness': t})`
+   * Sets multiple properties for spline curves at once.
+   *
+   * `splineProperties()` accepts an object with key-value pairs to configure
+   * how spline curves are drawn. This is a convenient way to set multiple
+   * spline properties with a single function call, rather than calling
+   * <a href="#/p5/splineProperty">splineProperty()</a> multiple times.
+   *
+   * The properties object can include:
+   * - `tightness`: A number that controls how tightly the curve fits to the
+   *   vertex points. The default value is 0. Positive values make the curve
+   *   tighter (straighter), while negative values make it looser. Values
+   *   between -5 and 5 work best.
+   * - `ends`: Controls whether to draw the end segments of the spline. Set to
+   *   `EXCLUDE` to skip drawing the segments between the first and second
+   *   points and between the second-to-last and last points. This is useful
+   *   when you want to use the first and last points as control points only.
+   *
+   * `splineProperties()` affects curves drawn with
+   * <a href="#/p5/splineVertex">splineVertex()</a> within
+   * <a href="#/p5/beginShape">beginShape()</a> and
+   * <a href="#/p5/endShape">endShape()</a>, as well as curves drawn with
+   * <a href="#/p5/spline">spline()</a>. The properties remain active until
+   * changed by another call to `splineProperties()` or
+   * <a href="#/p5/splineProperty">splineProperty()</a>.
    *
    * @method splineProperties
-   * @param {Object} properties An object containing key-value pairs to set.
-   */
-  /**
+   * @param  {Object} values an object containing spline property key-value pairs
+   * @chainable
+   *
+   * @example
+   * <div>
+   * <code>
+   * function setup() {
+   *   createCanvas(100, 100);
+   *   background(220);
+   *
+   *   // Set spline tightness using splineProperties
+   *   splineProperties({
+   *     tightness: 0.5
+   *   });
+   *
+   *   // Draw a spline curve
+   *   noFill();
+   *   stroke(0);
+   *   strokeWeight(2);
+   *   
+   *   beginShape();
+   *   splineVertex(20, 80);
+   *   splineVertex(30, 30);
+   *   splineVertex(70, 30);
+   *   splineVertex(80, 80);
+   *   endShape();
+   *
+   *   // Show vertex points
+   *   fill(255, 0, 0);
+   *   noStroke();
+   *   circle(20, 80, 6);
+   *   circle(30, 30, 6);
+   *   circle(70, 30, 6);
+   *   circle(80, 80, 6);
+   *
+   *   describe('A smooth curved line with tightness 0.5 connecting four red points.');
+   * }
+   * </code>
+   * </div>
+   *
+   * @example
+   * <div>
+   * <code>
+   * function setup() {
+   *   createCanvas(100, 100);
+   *   background(220);
+   *
+   *   // Exclude end segments - first and last points become control points
+   *   splineProperties({
+   *     tightness: 0,
+   *     ends: EXCLUDE
+   *   });
+   *
+   *   // Draw curve only between middle points
+   *   noFill();
+   *   stroke(0);
+   *   strokeWeight(2);
+   *   
+   *   beginShape();
+   *   splineVertex(10, 50);  // Control point (affects curve but not drawn to)
+   *   splineVertex(30, 20);  // Start of visible curve
+   *   splineVertex(70, 80);  // End of visible curve
+   *   splineVertex(90, 50);  // Control point (affects curve but not drawn to)
+   *   endShape();
+   *
+   *   // Show all points
+   *   fill(200, 0, 0);
+   *   noStroke();
+   *   circle(10, 50, 6);  // Control point
+   *   circle(90, 50, 6);  // Control point
+   *   
+   *   fill(0, 0, 255);
+   *   circle(30, 20, 6);  // Visible curve point
+   *   circle(70, 80, 6);  // Visible curve point
+   *
+   *   describe('A curved line between two blue points, with red control points at the ends.');
+   * }
+   * </code>
+   * </div>
+   *
    * @method splineProperties
-   * @returns {Object} The current spline properties.
+   * @return {Object}
    */
   fn.splineProperties = function(values) {
     return this._renderer.splineProperties(values);

src/shape/custom_shapes.js

@@ -65,39 +65,41 @@ function strands(p5, fn) {
 
   p5.Shader.prototype.modify = function(shaderModifier, scope = {}) {
     if (shaderModifier instanceof Function) {
-      // Reset the context object every time modify is called;
-      // const backend = glslBackend;
-      initStrandsContext(strandsContext, glslBackend, { active: true });
-      createShaderHooksFunctions(strandsContext, fn, this);
-      // TODO: expose this, is internal for debugging for now.
-      const options = { parser: true, srcLocations: false };
+      try {
+        // Reset the context object every time modify is called;
+        // const backend = glslBackend;
+        initStrandsContext(strandsContext, glslBackend, { active: true });
+        createShaderHooksFunctions(strandsContext, fn, this);
+        // TODO: expose this, is internal for debugging for now.
+        const options = { parser: true, srcLocations: false };
 
-      // 1. Transpile from strands DSL to JS
-      let strandsCallback;
-      if (options.parser) {
-        // #7955 Wrap function declaration code in brackets so anonymous functions are not top level statements, which causes an error in acorn when parsing
-        // https://github.com/acornjs/acorn/issues/1385
-        const sourceString = `(${shaderModifier.toString()})`;
-        strandsCallback = transpileStrandsToJS(p5, sourceString, options.srcLocations, scope);
-      } else {
-        strandsCallback = shaderModifier;
-      }
-
-      // 2. Build the IR from JavaScript API
-      const globalScope = createBasicBlock(strandsContext.cfg, BlockType.GLOBAL);
-      pushBlock(strandsContext.cfg, globalScope);
-      strandsCallback();
-      popBlock(strandsContext.cfg);
+        // 1. Transpile from strands DSL to JS
+        let strandsCallback;
+        if (options.parser) {
+          // #7955 Wrap function declaration code in brackets so anonymous functions are not top level statements, which causes an error in acorn when parsing
+          // https://github.com/acornjs/acorn/issues/1385
+          const sourceString = `(${shaderModifier.toString()})`;
+          strandsCallback = transpileStrandsToJS(p5, sourceString, options.srcLocations, scope);
+        } else {
+          strandsCallback = shaderModifier;
+        }
 
-      // 3. Generate shader code hooks object from the IR
-      // .......
-      const hooksObject = generateShaderCode(strandsContext);
+        // 2. Build the IR from JavaScript API
+        const globalScope = createBasicBlock(strandsContext.cfg, BlockType.GLOBAL);
+        pushBlock(strandsContext.cfg, globalScope);
+        strandsCallback();
+        popBlock(strandsContext.cfg);
 
-      // Reset the strands runtime context
-      deinitStrandsContext(strandsContext);
+        // 3. Generate shader code hooks object from the IR
+        // .......
+        const hooksObject = generateShaderCode(strandsContext);
 
-      // Call modify with the generated hooks object
-      return oldModify.call(this, hooksObject);
+        // Call modify with the generated hooks object
+        return oldModify.call(this, hooksObject);
+      } finally {
+        // Reset the strands runtime context
+        deinitStrandsContext(strandsContext);
+      }
     }
     else {
       return oldModify.call(this, shaderModifier)

src/strands/p5.strands.js

@@ -205,8 +205,18 @@ export function initGlobalStrandsAPI(p5, fn, strandsContext) {
     const originalp5Fn = fn[typeInfo.fnName];
     fn[typeInfo.fnName] = function(...args) {
       if (strandsContext.active) {
-        const { id, dimension } = build.primitiveConstructorNode(strandsContext, typeInfo, args);
-        return createStrandsNode(id, dimension, strandsContext);
+        if (args.length === 1 && args[0].dimension && args[0].dimension === typeInfo.dimension) {
+          const { id, dimension } = build.functionCallNode(strandsContext, typeInfo.fnName, args, {
+            overloads: [{
+              params: [args[0].typeInfo()],
+              returnType: typeInfo,
+            }]
+          });
+          return createStrandsNode(id, dimension, strandsContext);
+        } else {
+          const { id, dimension } = build.primitiveConstructorNode(strandsContext, typeInfo, args);
+          return createStrandsNode(id, dimension, strandsContext);
+        }
       } else if (originalp5Fn) {
         return originalp5Fn.apply(this, args);
       } else {

src/strands/strands_api.js

@@ -13,13 +13,21 @@ export class StrandsNode {
     const nodeData = getNodeDataFromID(dag, this.id);
     if (nodeData && nodeData.identifier) {
       this._originalIdentifier = nodeData.identifier;
+    }
+    if (nodeData) {
       this._originalBaseType = nodeData.baseType;
       this._originalDimension = nodeData.dimension;
     }
   }
   copy() {
     return createStrandsNode(this.id, this.dimension, this.strandsContext);
   }
+  typeInfo() {
+    return {
+      baseType: this._originalBaseType || BaseType.FLOAT,
+      dimension: this.dimension
+    };
+  }
   bridge(value) {
     const { dag, cfg } = this.strandsContext;
     const orig = getNodeDataFromID(dag, this.id);
@@ -30,8 +38,8 @@ export class StrandsNode {
       newValueID = value.id;
     } else {
       const newVal = primitiveConstructorNode(
-        this.strandsContext, 
-        { baseType, dimension: this.dimension }, 
+        this.strandsContext,
+        { baseType, dimension: this.dimension },
         value
       );
       newValueID = newVal.id;
@@ -85,8 +93,8 @@ export class StrandsNode {
       newValueID = value.id;
     } else {
       const newVal = primitiveConstructorNode(
-        this.strandsContext, 
-        { baseType, dimension: this.dimension }, 
+        this.strandsContext,
+        { baseType, dimension: this.dimension },
         value
       );
       newValueID = newVal.id;
@@ -159,4 +167,4 @@ export function createStrandsNode(id, dimension, strandsContext, onRebind) {
     new StrandsNode(id, dimension, strandsContext),
     swizzleTrap(id, dimension, strandsContext, onRebind)
   );
-}
+}

src/strands/strands_node.js

@@ -737,25 +737,14 @@ export class Font {
 
   /////////////////////////////// HELPERS ////////////////////////////////
 
-  _verticalAlign(size) {
-    const { sCapHeight } = this.data?.['OS/2'] || {};
-    const { unitsPerEm = 1000 } = this.data?.head || {};
-    const { ascender = 0, descender = 0 } = this.data?.hhea || {};
-    const current = ascender / 2;
-    const target = (sCapHeight || (ascender + descender)) / 2;
-    const offset = target - current;
-    return offset * size / unitsPerEm;
-  }
-
   /*
     Returns an array of line objects, each containing { text, x, y, glyphs: [ {g, path} ] }
   */
   _lineateAndPathify(str, x, y, width, height, options = {}) {
 
     let renderer = options?.graphics?._renderer || this._pInst._renderer;
-
-    // save the baseline
-    let setBaseline = renderer.drawingContext.textBaseline;
+    renderer.push();
+    renderer.textFont(this);
 
     // lineate and compute bounds for the text
     let { lines, bounds } = renderer._computeBounds
@@ -772,8 +761,7 @@ export class Font {
     const axs = this._currentAxes(renderer);
     let pathsForLine = lines.map(l => this._lineToGlyphs(l, { scale, axs }));
 
-    // restore the baseline
-    renderer.drawingContext.textBaseline = setBaseline;
+    renderer.pop();
 
     return pathsForLine;
   }
@@ -857,7 +845,7 @@ export class Font {
 
   _position(renderer, lines, bounds, width, height) {
 
-    let { textAlign, textLeading } = renderer.states;
+    let { textAlign, textLeading, textSize } = renderer.states;
     let metrics = this._measureTextDefault(renderer, 'X');
     let ascent = metrics.fontBoundingBoxAscent;