Merge branch 'dev-2.0' into fix/simplifythreshold

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",
@@ -82,6 +82,7 @@
     "./core": {
       "default": "./dist/core/main.js"
     },
+    "./color": "./dist/color/index.js",
     "./shape": "./dist/shape/index.js",
     "./accessibility": "./dist/accessibility/index.js",
     "./friendlyErrors": "./dist/core/friendlyErrors/index.js",

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

@@ -147,7 +147,7 @@ function storage(p5, fn){
           value = value.toString();
         } else if (value instanceof p5.Vector) {
           type = 'p5.Vector';
-          const coord = [value.x, value.y, value.z];
+          const coord = value.values;
           value = coord;
         }
         value = JSON.stringify(value);

src/data/local_storage.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

@@ -265,14 +265,14 @@ class Vector {
    * function setup() {
    *   let v = createVector(20, 30);
    *
-   *   // Prints 'p5.Vector Object : [20, 30, 0]'.
+   *   // Prints 'vector[20, 30, 0]'.
    *   print(v.toString());
    * }
    * </code>
    * </div>
    */
   toString() {
-    return `[${this._values.join(', ')}]`;
+    return `vector[${this._values.join(', ')}]`;
   }
 
   /**

src/math/p5.Vector.js

@@ -1352,8 +1352,8 @@ class RendererGL extends Renderer {
       fbo,
       0,
       0,
-      this.width,
-      this.height,
+      fbo.width,
+      fbo.height,
       -target.width / 2,
       -target.height / 2,
       target.width,

src/webgl/p5.RendererGL.js

@@ -36,9 +36,8 @@ function getWeather() {
 
   var cityName = userInput.value();
   var URL =
-    'http://api.openweathermap.org/data/2.5/weather?q=' +
-    cityName +
-    '&units=metric';
+    'https://wttr.in/' + encodeURIComponent(cityName) + '?format=j1';
+
   result = loadJSON(URL, displayWeather); // displayWeather is the callback
 }
 
@@ -47,9 +46,9 @@ function displayWeather() {
   print(result); // result is ready!
 
   var location = result.name;
-  var currentTemp = result.main.temp;
+  var avgTemp = result.weather[0].avgtempC;
   text(
-    'Current temperature in ' + location + ' is ' + currentTemp + ' celsius',
+    'Today\'s average temperature in ' + location + ' is ' + avgTemp + ' celsius',
     width / 2,
     height / 2
   );

test/manual-test-examples/async/loadJSON_callback/sketch.js

@@ -1,7 +1,7 @@
 function setup() {
   noCanvas();
   loadJSON(
-    'http://api.openweathermap.org/data/2.5/station?id=5091',
+    'https://wttr.in/Berlin?format=j1',
     parseStuff,
     'json'
   );