Merge branch 'dev-2.0' into patch-2

Author: ksen0

src/strands/p5.strands.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/strands_api.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_node.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/type/p5.Font.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;
 

src/type/textCore.js

@@ -2688,6 +2688,13 @@ function textCore(p5, fn) {
       return this._yAlignOffset(lineData, adjustedH);
     };
 
+    p5.RendererGL.prototype._verticalAlignFont = function() {
+      const ctx = this.textDrawingContext();
+      const metrics = ctx.measureText('X');
+      return -metrics.alphabeticBaseline ||
+        (-metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent);
+    }
+
     p5.RendererGL.prototype._yAlignOffset = function (dataArr, height) {
 
       if (typeof height === 'undefined') {
@@ -2700,12 +2707,12 @@ function textCore(p5, fn) {
         ((textLeading - textSize) * (numLines - 1));
       switch (textBaseline) { // drawingContext ?
         case fn.TOP:
-          yOff = textSize;
+          yOff = this._verticalAlignFont();
           break;
         case fn.BASELINE:
           break;
         case textCoreConstants._CTX_MIDDLE:
-          yOff = -totalHeight / 2 + textSize + (height || 0) / 2;
+          yOff = (-totalHeight + textSize + (height || 0)) / 2 + this._verticalAlignFont();
           break;
         case fn.BOTTOM:
           yOff = -(totalHeight - textSize) + (height || 0);
@@ -2714,7 +2721,6 @@ function textCore(p5, fn) {
           console.warn(`${textBaseline} is not supported in WebGL mode.`); // FES?
           break;
       }
-      yOff += this.states.textFont.font?._verticalAlign(textSize) || 0; // Does this function exist?
       dataArr.forEach(ele => ele.y += yOff);
       return dataArr;
     };

src/webgl/p5.Shader.js

@@ -533,7 +533,7 @@ class Shader {
       // if our vertex shader failed compilation?
       if (!gl.getShaderParameter(this._vertShader, gl.COMPILE_STATUS)) {
         const glError = gl.getShaderInfoLog(this._vertShader);
-        if (typeof IS_MINIFIED !== 'undefined') {
+        if (typeof IS_MINIFIED !== 'undefined' || typeof p5 === 'undefined') {
           console.error(glError);
         } else {
           p5._friendlyError(
@@ -551,7 +551,7 @@ class Shader {
       // if our frag shader failed compilation?
       if (!gl.getShaderParameter(this._fragShader, gl.COMPILE_STATUS)) {
         const glError = gl.getShaderInfoLog(this._fragShader);
-        if (typeof IS_MINIFIED !== 'undefined') {
+        if (typeof IS_MINIFIED !== 'undefined' || typeof p5 === 'undefined') {
           console.error(glError);
         } else {
           p5._friendlyError(

test/unit/visual/cases/webgl.js

@@ -692,7 +692,7 @@ visualSuite('WebGL', function() {
     });
   });
 
-  visualSuite('textures in p5.strands', async () => {
+  visualSuite('textures in p5.strands', () => {
     visualTest('uniformTexture() works', async (p5, screenshot) => {
       p5.createCanvas(50, 50, p5.WEBGL);
       const tex = await p5.loadImage('/unit/assets/cat.jpg');
@@ -708,4 +708,68 @@ visualSuite('WebGL', function() {
       screenshot();
     });
   });
+
+  visualSuite('instanced randering', async () => {
+    visualTest('can draw in a grid with floor()', (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      const shader = p5.baseMaterialShader().modify(() => {
+        p5.getWorldInputs((inputs) => {
+          const id = p5.instanceID();
+          const gridSize = 5;
+          const row = p5.floor(id / gridSize);
+          const col = id - row * gridSize;
+          const blockInnerSize = 10;
+          const x = (col - gridSize / 2.0) * blockInnerSize + blockInnerSize/2;
+          const y = (gridSize / 2.0 - row) *  blockInnerSize - blockInnerSize/2;
+          inputs.position += [x, y, 0];
+          return inputs;
+        });
+      }, { p5 });
+      p5.shader(shader);
+      const obj = p5.buildGeometry(() => p5.circle(0, 0, 6))
+      p5.noStroke();
+      p5.fill(0);
+      p5.shader(shader);
+      p5.model(obj, 25);
+      screenshot();
+    });
+
+    visualTest('can draw in a grid with int()', (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      const shader = p5.baseMaterialShader().modify(() => {
+        p5.getWorldInputs((inputs) => {
+          const id = p5.instanceID();
+          const gridSize = 5;
+          const row = p5.int(id / gridSize);
+          const col = id - row * gridSize;
+          const blockInnerSize = 10;
+          const x = (col - gridSize / 2.0) * blockInnerSize + blockInnerSize/2;
+          const y = (gridSize / 2.0 - row) *  blockInnerSize - blockInnerSize/2;
+          inputs.position += [x, y, 0];
+          return inputs;
+        });
+      }, { p5 });
+      p5.shader(shader);
+      const obj = p5.buildGeometry(() => p5.circle(0, 0, 6))
+      p5.noStroke();
+      p5.fill(0);
+      p5.shader(shader);
+      p5.model(obj, 25);
+      screenshot();
+    });
+  });
+  
+  visualSuite('p5.strands', () => {
+    visualTest('it recovers from p5.strands errors', (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      try {
+        p5.baseMaterialShader().modify(() => {
+          undefined.someMethod(); // This will throw an error
+        });
+      } catch (e) {}
+      p5.background('red');
+      p5.circle(p5.noise(0), p5.noise(0), 20);
+      screenshot();
+    });
+  });
 });