Merge branch 'dev-2.0' into fix-unmatched-push-popwarning

Author: Homaid

src/core/friendly_errors/fes_core.js

@@ -593,7 +593,7 @@ function fesCore(p5, fn){
 
         // get the function just above the topmost frame in the friendlyStack.
         // i.e the name of the library function called from user's code
-        const func = stacktrace[friendlyStack[0].frameIndex - 2].functionName
+        const func = stacktrace[friendlyStack[0].frameIndex - 1].functionName
           .split('.')
           .slice(-1)[0];
 

src/dom/p5.MediaElement.js

@@ -935,6 +935,13 @@ class MediaElement extends Element {
 
   /*** CONNECT TO WEB AUDIO API / p5.sound.js ***/
 
+  _getAudioContext() {
+    return undefined;
+  }
+  _getSoundOut() {
+    return undefined;
+  }
+
   /**
    * Sends the element's audio to an output.
    *
@@ -954,9 +961,9 @@ class MediaElement extends Element {
     let audioContext, mainOutput;
 
     // if p5.sound exists, same audio context
-    if (typeof fn.getAudioContext === 'function') {
-      audioContext = fn.getAudioContext();
-      mainOutput = p5.soundOut.input;
+    if (this._getAudioContext() && this._getSoundOut()) {
+      audioContext = this._getAudioContext();
+      mainOutput = this._getSoundOut().input;
     } else {
       try {
         audioContext = obj.context;
@@ -1792,6 +1799,19 @@ function media(p5, fn){
    */
   p5.MediaElement = MediaElement;
 
+  // Patch MediaElement to give it access to fn, which p5.sound may attach things to
+  // if present in a sketch
+  MediaElement.prototype._getSoundOut = function() {
+    return p5.soundOut;
+  }
+  MediaElement.prototype._getAudioContext = function() {
+    if (typeof fn.getAudioContext === 'function') {
+      return fn.getAudioContext();
+    } else {
+      return undefined;
+    }
+  }
+
   /**
    * Path to the media element's source as a string.
    *

src/type/p5.Font.js

@@ -234,15 +234,15 @@ export class Font {
    * path and are more precise.
    *
    * `simplifyThreshold` removes collinear points if it's set to a number other
-   * than 0. The value represents the threshold angle to use when determining
+   * than 0. The value represents the threshold angle in radians to use when determining
    * whether two edges are collinear.
    *
    * @param  {String} str        string of text.
    * @param  {Number} x          x-coordinate of the text.
    * @param  {Number} y          y-coordinate of the text.
    * @param  {Object} [options]  Configuration:
    * @param  {Number} [options.sampleFactor=0.1] The ratio of the text's path length to the number of samples.
-   * @param  {Number} [options.simplifyThreshold=0] A minmum angle between two segments. Segments with a shallower angle will be merged.
+   * @param  {Number} [options.simplifyThreshold=0] A minmum angle in radian sbetween two segments. Segments with a shallower angle will be merged.
    * @return {Array<Object>} array of point objects, each with `x`, `y`, and `alpha` (path angle) properties.
    *
    * @example
@@ -306,15 +306,15 @@ export class Font {
    * path and are more precise.
    *
    * `simplifyThreshold` removes collinear points if it's set to a number other
-   * than 0. The value represents the threshold angle to use when determining
+   * than 0. The value represents the threshold angle in radians to use when determining
    * whether two edges are collinear.
    *
    * @param  {String} str        string of text.
    * @param  {Number} x          x-coordinate of the text.
    * @param  {Number} y          y-coordinate of the text.
    * @param  {Object} [options]  Configuration options:
    * @param  {Number} [options.sampleFactor=0.1] The ratio of the text's path length to the number of samples.
-   * @param  {Number} [options.simplifyThreshold=0] A minmum angle between two segments. Segments with a shallower angle will be merged.
+   * @param  {Number} [options.simplifyThreshold=0] A minmum angle in radians between two segments. Segments with a shallower angle will be merged.
    * @return {Array<Array<Object>>} array of point objects, each with `x`, `y`, and `alpha` (path angle) properties.
    *
    * @example
@@ -1092,6 +1092,35 @@ function pathToPoints(cmds, options, font) {
     return num;
   };
 
+  const collinear = (a, b, c, thresholdAngle) => {
+    if (!thresholdAngle) {
+      return areaTriangle(a, b, c) === 0;
+    }
+
+    if (typeof collinear.tmpPoint1 === 'undefined') {
+      collinear.tmpPoint1 = [];
+      collinear.tmpPoint2 = [];
+    }
+
+    const ab = collinear.tmpPoint1,
+      bc = collinear.tmpPoint2;
+    ab.x = b.x - a.x;
+    ab.y = b.y - a.y;
+    bc.x = c.x - b.x;
+    bc.y = c.y - b.y;
+
+    const dot = ab.x * bc.x + ab.y * bc.y,
+      magA = Math.sqrt(ab.x * ab.x + ab.y * ab.y),
+      magB = Math.sqrt(bc.x * bc.x + bc.y * bc.y),
+      angle = Math.acos(dot / (magA * magB));
+
+    return angle < thresholdAngle;
+  };
+
+  const areaTriangle = (a, b, c) => {
+    return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
+  };
+
   const path = createFromCommands(arrayCommandsToObjects(cmds));
   let opts = parseOpts(options, {
     sampleFactor: 0.1,

src/webgl/3d_primitives.js

@@ -1726,7 +1726,7 @@ function primitives3D(p5, fn){
 
       this.states.setValue('uModelMatrix', mult);
 
-      this._drawGeometry(this.geometryBufferCache.getGeometryByID(gid));
+      this.model(this.geometryBufferCache.getGeometryByID(gid));
     } finally {
       this.states.setValue('uModelMatrix', uModelMatrix);
     }
@@ -1858,7 +1858,7 @@ function primitives3D(p5, fn){
       this.states.uModelMatrix.translate([x, y, 0]);
       this.states.uModelMatrix.scale(width, height, 1);
 
-      this._drawGeometry(this.geometryBufferCache.getGeometryByID(gid));
+      this.model(this.geometryBufferCache.getGeometryByID(gid));
     } finally {
       this.states.setValue('uModelMatrix', uModelMatrix);
     }
@@ -1919,7 +1919,7 @@ function primitives3D(p5, fn){
         this.states.uModelMatrix.translate([x, y, 0]);
         this.states.uModelMatrix.scale(width, height, 1);
 
-        this._drawGeometry(this.geometryBufferCache.getGeometryByID(gid));
+        this.model(this.geometryBufferCache.getGeometryByID(gid));
       } finally {
         this.states.setValue('uModelMatrix', uModelMatrix);
       }
@@ -1967,7 +1967,7 @@ function primitives3D(p5, fn){
       const prevOrder = this.bezierOrder();
       this.bezierOrder(2);
       this.beginShape();
-      const addUVs = (x, y) => [x, y, (x - x1)/width, (y - y1)/height];
+      const addUVs = (x, y) => [x, y, 0, (x - x1)/width, (y - y1)/height];
       if (tr !== 0) {
         this.vertex(...addUVs(x2 - tr, y1));
         this.bezierVertex(...addUVs(x2, y1));
@@ -2069,7 +2069,7 @@ function primitives3D(p5, fn){
       quadGeom.gid = gid;
       this.geometryBufferCache.ensureCached(quadGeom);
     }
-    this._drawGeometry(this.geometryBufferCache.getGeometryByID(gid));
+    this.model(this.geometryBufferCache.getGeometryByID(gid));
     return this;
   };
 

src/webgl/GeometryBuilder.js

@@ -137,7 +137,7 @@ class GeometryBuilder {
         for (let i = 2; i < geometry.vertices.length; i++) {
           faces.push([0, i - 1, i]);
         }
-      } else {
+      } else if (shapeMode === constants.TRIANGLES) {
         for (let i = 0; i < geometry.vertices.length; i += 3) {
           if (
             !validateFaces ||

src/webgl/ShapeBuilder.js

@@ -280,8 +280,6 @@ export class ShapeBuilder {
    * @private
    */
   _tesselateShape() {
-    // TODO: handle non-PATH shape modes that have contours
-    this.shapeMode = constants.TRIANGLES;
     // const contours = [[]];
     const contours = [];
     for (let i = 0; i < this.geometry.vertices.length; i++) {
@@ -316,6 +314,15 @@ export class ShapeBuilder {
     }
 
     const polyTriangles = this._triangulate(contours);
+
+    // If there were no valid faces, we still want to use the original vertices
+    // for strokes, so we'll stop here.
+    if (polyTriangles.length === 0) {
+      return;
+    }
+
+    // TODO: handle non-PATH shape modes that have contours
+    this.shapeMode = constants.TRIANGLES;
     const originalVertices = this.geometry.vertices;
     this.geometry.vertices = [];
     this.geometry.vertexNormals = [];

src/webgl/p5.RendererGL.js

@@ -511,7 +511,11 @@ class RendererGL extends Renderer {
       );
     }
     const geometry = this.geometryBuilder.finish();
-    this.fill(this.geometryBuilder.prevFillColor);
+    if (this.geometryBuilder.prevFillColor) {
+      this.fill(this.geometryBuilder.prevFillColor);
+    } else {
+      this.noFill();
+    }
     this.geometryBuilder = undefined;
     return geometry;
   }

test/unit/type/p5.Font.js

@@ -60,6 +60,14 @@ suite('p5.Font', function () {
         expect(pt.y).not.toBeNaN();
       }
     });
+
+    test('simplifies collinear points', async () => {
+      const font = await myp5.loadFont(fontFile);
+      myp5.textSize(50);
+      const pts = font.textToPoints('T', 0, 0);
+      const simplifiedPts = font.textToPoints('T', 0, 0, { simplifyThreshold: Math.PI * 0.01 });
+      expect(pts.length).toBeGreaterThan(simplifiedPts.length);
+    });
   });
 });
 

test/unit/visual/cases/webgl.js

@@ -673,4 +673,24 @@ visualSuite('WebGL', function() {
       screenshot();
     });
   });
+
+  visualSuite('texture()', () => {
+    visualTest('on a rect', async (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      const tex = await p5.loadImage('/unit/assets/cat.jpg');
+      p5.texture(tex);
+      p5.texture(tex);
+      p5.rect(-20, -20, 40, 40);
+      screenshot();
+    });
+
+    visualTest('on a rect with rounded corners', async (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      const tex = await p5.loadImage('/unit/assets/cat.jpg');
+      p5.texture(tex);
+      p5.texture(tex);
+      p5.rect(-20, -20, 40, 40, 10);
+      screenshot();
+    });
+  });
 });