Merge branch 'dev-2.0' into fix/buildgeom-no-faces

Author: davepagurek

package-lock.json

@@ -19,7 +19,7 @@
     "test/**/*.js": "eslint",
     "utils/**/*.{js,mjs}": "eslint"
   },
-  "version": "2.1.0-rc.0",
+  "version": "2.1.0-rc.1",
   "dependencies": {
     "@davepagurek/bezier-path": "^0.0.2",
     "@japont/unicode-range": "^1.0.0",

package.json

@@ -8,6 +8,7 @@
 
 import { RGB, RGBHDR, HSL, HSB, HWB, LAB, LCH, OKLAB, OKLCH } from './creating_reading';
 
+
 import {
   ColorSpace,
   to,
@@ -25,7 +26,8 @@ import {
 
   OKLab,
   OKLCH as OKLCHSpace,
-
+  contrastWCAG21,
+  contrastAPCA,
   P3
 } from 'colorjs.io/fn';
 import HSBSpace from './color_spaces/hsb.js';
@@ -41,6 +43,9 @@ const map = (n, start1, stop1, start2, stop2, clamp) => {
 
 const serializationMap = {};
 
+
+
+
 class Color {
   // Reference to underlying color object depending on implementation
   // Not meant to be used publicly unless the implementation is known for sure
@@ -326,6 +331,125 @@ class Color {
     return colorString;
   }
 
+  /**
+   * Checks the contrast between two colors. This method returns a boolean
+   * value to indicate if the two color has enough contrast. `true` means that
+   * the colors has enough contrast to be used as background color and body
+   * text color. `false` means there is not enough contrast.
+   *
+   * A second argument can be passed to the method, `options` , which defines
+   * the algorithm to be used. The algorithms currently supported are
+   * WCAG 2.1 (`'WCAG21'`) or APCA (`'APCA'`). The default is WCAG 2.1. If a
+   * value of `'all'` is passed to the `options` argument, an object containing
+   * more details is returned. The details object will include the calculated
+   * contrast value of the colors and different passing criteria.
+   *
+   * For more details about color contrast, you can check out
+   * <a href="https://colorjs.io/docs/contrast">this page from color.js</a>, and the
+   * <a href="https://webaim.org/resources/contrastchecker/">WebAIM color contrast checker.</a>
+   *
+   * @param {Color} other
+   * @returns {boolean|object}
+   * @example
+   * <div>
+   * <code>
+   * let bgColor, fg1Color, fg2Color, msg1, msg2;
+   * function setup() {
+   *   createCanvas(100, 100);
+   *   bgColor = color(0);
+   *   fg1Color = color(100);
+   *   fg2Color = color(220);
+   *
+   *   if(bgColor.contrast(fg1Color)){
+   *     msg1 = 'good';
+   *   }else{
+   *     msg1 = 'bad';
+   *   }
+   *
+   *   if(bgColor.contrast(fg2Color)){
+   *     msg2 = 'good';
+   *   }else{
+   *     msg2 = 'bad';
+   *   }
+   *
+   *   describe('A black canvas with a faint grey word saying "bad" at the top left and a brighter light grey word saying "good" in the middle of the canvas.');
+   * }
+   *
+   * function draw(){
+   *   background(bgColor);
+   *
+   *   textSize(18);
+   *
+   *   fill(fg1Color);
+   *   text(msg1, 10, 30);
+   *
+   *   fill(fg2Color);
+   *   text(msg2, 10, 60);
+   * }
+   * </code>
+   * </div>
+   *
+   * <div>
+   * <code>
+   * let bgColor, fgColor, contrast;
+   * function setup() {
+   *   createCanvas(100, 100);
+   *   bgColor = color(0);
+   *   fgColor = color(200);
+   *   contrast = bgColor.contrast(fgColor, 'all');
+   *
+   *   describe('A black canvas with four short lines of grey text that respectively says: "WCAG 2.1", "12.55", "APCA", and "-73.30".');
+   * }
+   *
+   * function draw(){
+   *   background(bgColor);
+   *
+   *   textSize(14);
+   *
+   *   fill(fgColor);
+   *   text('WCAG 2.1', 10, 25);
+   *   text(nf(contrast.WCAG21.value, 0, 2), 10, 40);
+   *
+   *   text('APCA', 10, 70);
+   *   text(nf(contrast.APCA.value, 0, 2), 10, 85);
+   * }
+   * </code>
+   * </div>
+   */
+  contrast(other_color, options='WCAG21') {
+    if(options !== 'all'){
+      let contrastVal, minimum;
+      switch(options){
+        case 'WCAG21':
+          contrastVal = contrastWCAG21(this._color, other_color._color);
+          minimum = 4.5;
+          break;
+        case 'APCA':
+          contrastVal = Math.abs(contrastAPCA(this._color, other_color._color));
+          minimum = 75;
+          break;
+        default:
+          return null;
+      }
+
+      return contrastVal >= minimum;
+    }else{
+      const wcag21Value = contrastWCAG21(this._color, other_color._color);
+      const apcaValue = contrastAPCA(this._color, other_color._color);
+      return {
+        WCAG21: {
+          value: wcag21Value,
+          passedMinimum: wcag21Value >= 4.5,
+          passedAAA: wcag21Value >= 7
+        },
+        APCA: {
+          value: apcaValue,
+          passedMinimum: Math.abs(apcaValue) >= 75
+        }
+      };
+    }
+  };
+
   /**
    * Sets the red component of a color.
    *

src/color/p5.Color.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/core/friendly_errors/fes_core.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/dom/p5.MediaElement.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/type/p5.Font.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/3d_primitives.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;
   }

src/webgl/p5.RendererGL.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);
+    });
   });
 });