@texel/color 1.1.2 → 1.1.4

package/README.md

@@ -85,7 +85,7 @@ The return value is the new coordinates in the destination space; such as `[r,g,
 
 #### `output = gamutMapOKLCH(oklch, gamut = sRGBGamut, targetSpace = gamut.space, out = [0, 0, 0], mapping = MapToCuspL, [cusp])`
 
-Performs fast gamut mapping in OKLCH as [described by Björn Ottoson](https://bottosson.github.io/posts/gamutclipping/) (2021). This takes an input `[l,c,h]` coords in OKLCH space, and ensures the final result will lie within the specified color `gamut` (default `sRGBGamut`). You can further specify a different target space (which default's to the gamut's space), for example to get a linear-light sRGB and avoid the transfer function, or to keep the result in OKLCH:
+Performs fast gamut mapping in OKLCH as [described by Björn Ottosson](https://bottosson.github.io/posts/gamutclipping/) (2021). This takes an input `[l,c,h]` coords in OKLCH space, and ensures the final result will lie within the specified color `gamut` (default `sRGBGamut`). You can further specify a different target space (which default's to the gamut's space), for example to get a linear-light sRGB and avoid the transfer function, or to keep the result in OKLCH:
 
 ```js
 import { gamutMapOKLCH, sRGBGamut, sRGBLinear, OKLCH } from "@texel/color";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texel/color",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "a minimal and modern color library",
   "type": "module",
   "main": "./src/index.js",

package/src/gamut.js

@@ -182,13 +182,15 @@ export const findGamutIntersectionOKLCH = (a, b, l1, c1, l0, cusp, gamut) => {
 
   // Find the intersection for upper and lower half separately
   if ((l1 - l0) * cusp[1] - (cusp[0] - l0) * c1 <= 0.0) {
+    const denom = (c1 * cusp[0] + cusp[1] * (l0 - l1));
     // Lower half
-    t = (cusp[1] * l0) / (c1 * cusp[0] + cusp[1] * (l0 - l1));
+    t = denom === 0 ? 0 : (cusp[1] * l0) / denom;
   } else {
     // Upper half
 
     // First intersect with triangle
-    t = (cusp[1] * (l0 - 1.0)) / (c1 * (cusp[0] - 1.0) + cusp[1] * (l0 - l1));
+    const denom = (c1 * (cusp[0] - 1.0) + cusp[1] * (l0 - l1));
+    t = denom === 0 ? 0 : (cusp[1] * (l0 - 1.0)) / denom;
 
     // Then one step Halley's method
     let dl = l1 - l0;

package/test/almost-equal.js

@@ -1,15 +0,0 @@
-const EPSILON = Math.pow(2, -33); // ~= 0.0000000001
-
-export default function arrayAlmostEqual(a, b, tolerance = EPSILON) {
-  if (!a || !b) return false;
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    const p0 = a[i];
-    const p1 = b[i];
-    if (p0 !== p1) {
-      const diff = Math.abs(p1 - p0);
-      if (diff > tolerance) return false;
-    }
-  }
-  return true;
-}

package/test/bench-colorjs.js

@@ -1,227 +0,0 @@
-import Color from "colorjs.io";
-import {
-  sRGB as sRGB_ColorJS,
-  OKLCH as OKLCH_ColorJS,
-  P3 as DisplayP3_ColorJS,
-  toGamut,
-} from "colorjs.io/fn";
-import {
-  convert,
-  OKLCH,
-  OKLab,
-  sRGB,
-  sRGBGamut,
-  DisplayP3Gamut,
-  DisplayP3,
-  gamutMapOKLCH,
-  constrainAngle,
-  findCuspOKLCH,
-  degToRad,
-  MapToCuspL,
-} from "../src/index.js";
-
-import { getSupportedColorJSSpaces } from "./colorjs-fn.js";
-
-const supportedSpaces = getSupportedColorJSSpaces();
-
-// @texel/color space interfaces
-const spaces = supportedSpaces.map((s) => s.space);
-
-// Colorjs.io space interfaces & IDs
-const colorJSSpaces = supportedSpaces.map((s) => s.colorJSSpace);
-const colorJSSpaceIDs = supportedSpaces.map((s) => s.colorJSSpace.id);
-
-const N = 128 * 128;
-
-// sampling variables within OKLab and converting to OKLCH
-const vecs = Array(N)
-  .fill()
-  .map((_, i, lst) => {
-    const t = i / (lst.length - 1);
-    return convert([t, t * 2 - 1, t * 2 - 1], OKLab, OKLCH);
-  });
-
-const tmp = [0, 0, 0];
-
-let now, elapsedColorjs, elapsedOurs;
-
-//// OKLCH to sRGB with gamut mapping (direct path)
-
-const hueCusps = Array(360).fill(null);
-const oklchVecs = Array(512 * 256)
-  .fill()
-  .map((_, i, lst) => {
-    const t0 = i / (lst.length - 1);
-    const t1 = i / lst.length;
-    const H = constrainAngle(Math.round(t1 * 360));
-    if (!hueCusps[H]) {
-      const Hr = degToRad(H);
-      const a = Math.cos(Hr);
-      const b = Math.sin(Hr);
-      hueCusps[H] = findCuspOKLCH(a, b, sRGBGamut);
-    }
-    return [t0, t0, H];
-  });
-
-compare(
-  "conversion (Colorjs.io procedural API)",
-  () => {
-    for (let vec of vecs) {
-      for (let i = 0; i < colorJSSpaces.length; i++) {
-        for (let j = 0; j < colorJSSpaces.length; j++) {
-          const a = colorJSSpaces[i];
-          const b = colorJSSpaces[j];
-          const ret = b.from(a, vec);
-        }
-      }
-    }
-  },
-  () => {
-    for (let vec of vecs) {
-      for (let i = 0; i < spaces.length; i++) {
-        for (let j = 0; j < spaces.length; j++) {
-          const a = spaces[i];
-          const b = spaces[j];
-          convert(vec, a, b, tmp);
-        }
-      }
-    }
-  }
-);
-
-compare(
-  "conversion (Colorjs.io main API)",
-  () => {
-    for (let vec of vecs) {
-      for (let i = 0; i < colorJSSpaceIDs.length; i++) {
-        for (let j = 0; j < colorJSSpaceIDs.length; j++) {
-          const a = colorJSSpaceIDs[i];
-          const b = colorJSSpaceIDs[j];
-          new Color(a, vec).to(b);
-        }
-      }
-    }
-  },
-  () => {
-    for (let vec of vecs) {
-      for (let i = 0; i < spaces.length; i++) {
-        for (let j = 0; j < spaces.length; j++) {
-          const a = spaces[i];
-          const b = spaces[j];
-          convert(vec, a, b, tmp);
-        }
-      }
-    }
-  }
-);
-
-compare(
-  "gamut mapping OKLCH - sRGB (Colorjs.io procedural API)",
-  () => {
-    let tmpColor = { space: sRGB_ColorJS, coords: [0, 0, 0], alpha: 1 };
-    for (let vec of oklchVecs) {
-      tmpColor.coords = sRGB_ColorJS.from(OKLCH_ColorJS, vec);
-      toGamut(tmpColor);
-    }
-  },
-  () => {
-    for (let vec of oklchVecs) {
-      // you can omit the cusp and it will be found on the fly,
-      // however the test will run slightly slower
-      const cusp = hueCusps[vec[2]];
-      gamutMapOKLCH(vec, sRGBGamut, sRGB, tmp, MapToCuspL, cusp);
-    }
-  }
-);
-
-compare(
-  "gamut mapping OKLCH - sRGB (Colorjs.io main API)",
-  () => {
-    for (let vec of oklchVecs) {
-      new Color("oklch", vec)
-        .to("srgb")
-        .toGamut({ space: "srgb", method: "css" });
-    }
-  },
-  () => {
-    for (let vec of oklchVecs) {
-      // you can omit the cusp and it will be found on the fly,
-      // however the test will run slightly slower
-      const cusp = hueCusps[vec[2]];
-      gamutMapOKLCH(vec, sRGBGamut, sRGB, tmp, MapToCuspL, cusp);
-    }
-  }
-);
-
-compare(
-  "gamut mapping all spaces to P3 (Colorjs.io procedural API)",
-  () => {
-    let tmpColor = { space: DisplayP3_ColorJS, coords: [0, 0, 0], alpha: 1 };
-    for (let vec of vecs) {
-      for (let i = 0; i < colorJSSpaces.length; i++) {
-        const a = colorJSSpaces[i];
-        tmpColor.coords = DisplayP3_ColorJS.from(a, vec);
-        toGamut(tmpColor);
-      }
-    }
-  },
-  () => {
-    for (let vec of vecs) {
-      for (let i = 0; i < spaces.length; i++) {
-        const a = spaces[i];
-        convert(vec, a, OKLCH, tmp);
-        gamutMapOKLCH(tmp, DisplayP3Gamut, DisplayP3, tmp);
-      }
-    }
-  }
-);
-
-compare(
-  "gamut mapping all spaces to P3 (Colorjs.io main API)",
-  () => {
-    for (let vec of vecs) {
-      for (let i = 0; i < colorJSSpaceIDs.length; i++) {
-        const a = colorJSSpaceIDs[i];
-        new Color(a, vec).to("p3").toGamut({ space: "p3", method: "css" });
-      }
-    }
-  },
-  () => {
-    for (let vec of vecs) {
-      for (let i = 0; i < spaces.length; i++) {
-        const a = spaces[i];
-        convert(vec, a, OKLCH, tmp);
-        gamutMapOKLCH(tmp, DisplayP3Gamut, DisplayP3, tmp);
-      }
-    }
-  }
-);
-
-function print(label) {
-  console.log("%s --", label);
-  console.log("Colorjs.io: %s ms", elapsedColorjs.toFixed(2));
-  console.log("Ours: %s ms", elapsedOurs.toFixed(2));
-  if (elapsedColorjs > elapsedOurs)
-    console.log(
-      "Speedup: %sx faster",
-      (elapsedColorjs / elapsedOurs).toFixed(1)
-    );
-  else
-    console.log(
-      "Slowdown: %sx slower",
-      (elapsedOurs / elapsedColorjs).toFixed(1)
-    );
-  console.log();
-}
-
-function compare(label, colorJSFn, ourFn) {
-  now = performance.now();
-  colorJSFn();
-  elapsedColorjs = performance.now() - now;
-
-  now = performance.now();
-  ourFn();
-  elapsedOurs = performance.now() - now;
-
-  print(label);
-}

package/test/bench-culori.js

@@ -1,148 +0,0 @@
-import {
-  convert,
-  OKLCH,
-  sRGB,
-  sRGBGamut,
-  listColorSpaces,
-  DisplayP3Gamut,
-  DisplayP3,
-  gamutMapOKLCH,
-  constrainAngle,
-  findCuspOKLCH,
-  degToRad,
-  MapToCuspL,
-  OKHSL,
-  OKLab,
-  OKHSLToOKLab,
-} from "../src/index.js";
-
-import { p3, toGamut, oklch, okhsl, converter } from "culori";
-
-const N = 256 * 256;
-const gamut = DisplayP3Gamut;
-const target = gamut.space;
-
-// get N OKLCH in-gamut pixels by sampling uniformly from OKHSL cube
-const oklchPixelsInGamut = Array(N)
-  .fill()
-  .map((_, i, lst) => {
-    const t = i / (lst.length - 1);
-    // note if we use the standard OKHSL space, it is bound to sRGB gamut...
-    // so instead we use the OKHSLToOKLab function and pass P3 gamut
-    const okhsl = [t * 360, t, t];
-    const oklab = OKHSLToOKLab(okhsl, gamut);
-    return convert(oklab, OKLab, OKLCH);
-  });
-
-// get N OKLCH pixels by sampling OKLab, many will be out of srgb gamut
-const oklchPixelsRandom = Array(N)
-  .fill()
-  .map((_, i, lst) => {
-    const t = i / (lst.length - 1);
-    return convert([t, t * 2 - 1, t * 2 - 1], OKLab, OKLCH);
-  });
-
-const toP3Gamut = toGamut("p3", "oklch");
-// same perf as p3() it seems
-// const p3Converter = converter("p3");
-
-test(oklchPixelsInGamut, "Random Sampling in P3 Gamut");
-test(oklchPixelsRandom, "Random Sampling in OKLab L Planes");
-test(oklchPixelsRandom, "Random Sampling in OKLab L Planes", true);
-
-function test(inputPixelsOKLCH, label, fixedCusp) {
-  let cuspMap;
-  if (fixedCusp) {
-    cuspMap = new Array(360).fill(null);
-    inputPixelsOKLCH = inputPixelsOKLCH.map((oklch) => {
-      const H = constrainAngle(Math.round(oklch[2]));
-      oklch = oklch.slice();
-      oklch[2] = H;
-      if (!cuspMap[H]) {
-        const Hr = degToRad(H);
-        const a = Math.cos(Hr);
-        const b = Math.sin(Hr);
-        cuspMap[H] = findCuspOKLCH(a, b, gamut);
-      }
-      return oklch;
-    });
-  }
-
-  console.log(
-    "Testing with input type: %s%s",
-    label,
-    fixedCusp ? " (Fixed Cusp)" : ""
-  );
-  const culoriInputsOKLCH = inputPixelsOKLCH.map(([l, c, h]) => {
-    return {
-      mode: "oklch",
-      l,
-      c,
-      h,
-    };
-  });
-
-  let now, elapsedCulori, elapsedOurs;
-  let tmp = [0, 0, 0];
-
-  //// conversion
-
-  tmp = [0, 0, 0];
-  now = performance.now();
-  for (let oklch of inputPixelsOKLCH) {
-    convert(oklch, OKLCH, target, tmp);
-  }
-  elapsedOurs = performance.now() - now;
-
-  now = performance.now();
-  for (let oklchColor of culoriInputsOKLCH) {
-    p3(oklchColor);
-
-    // same perf ?
-    // p3Converter(oklchColor);
-  }
-  elapsedCulori = performance.now() - now;
-  print("Conversion OKLCH to P3");
-
-  //// gamut
-
-  tmp = [0, 0, 0];
-  if (fixedCusp && cuspMap) {
-    now = performance.now();
-    for (let oklch of inputPixelsOKLCH) {
-      const cusp = cuspMap[oklch[2]];
-      gamutMapOKLCH(oklch, gamut, target, tmp, undefined, cusp);
-    }
-    elapsedOurs = performance.now() - now;
-  } else {
-    now = performance.now();
-    for (let oklch of inputPixelsOKLCH) {
-      gamutMapOKLCH(oklch, gamut, target, tmp);
-    }
-    elapsedOurs = performance.now() - now;
-  }
-
-  now = performance.now();
-  for (let oklchColor of culoriInputsOKLCH) {
-    toP3Gamut(oklchColor);
-  }
-  elapsedCulori = performance.now() - now;
-  print("Gamut Mapping OKLCH to P3 Gamut");
-
-  function print(label) {
-    console.log("%s --", label);
-    console.log("Culori: %s ms", elapsedCulori.toFixed(2));
-    console.log("Ours: %s ms", elapsedOurs.toFixed(2));
-    if (elapsedCulori > elapsedOurs)
-      console.log(
-        "Speedup: %sx faster",
-        (elapsedCulori / elapsedOurs).toFixed(1)
-      );
-    else
-      console.log(
-        "Slowdown: %sx slower",
-        (elapsedOurs / elapsedCulori).toFixed(1)
-      );
-    console.log();
-  }
-}

package/test/bench-node.js

@@ -1,51 +0,0 @@
-import {
-  convert,
-  OKLCH,
-  sRGB,
-  sRGBGamut,
-  listColorSpaces,
-  gamutMapOKLCH,
-} from "../src/index.js";
-
-const spaces = listColorSpaces().filter((f) => !/ok(hsv|hsl)/i.test(f.id));
-
-const vecs = Array(128 * 128)
-  .fill()
-  .map((_, i, lst) => {
-    const t = i / (lst.length - 1);
-    return (
-      Array(3)
-        .fill()
-        // -0.5 .. 1.5
-        .map(() => t + (t * 2 - 1) * 0.5)
-    );
-  });
-
-const tmp = [0, 0, 0];
-
-// console.time("bench");
-
-for (let vec of vecs) {
-  for (let i = 0; i < spaces.length; i++) {
-    for (let j = 0; j < spaces.length; j++) {
-      const a = spaces[i];
-      const b = spaces[j];
-
-      // convert A to B
-      convert(vec, a, b, tmp);
-      // convert B to OKLCH
-      convert(tmp, b, OKLCH, tmp);
-      // gamut map OKLCH
-      gamutMapOKLCH(tmp, sRGBGamut, sRGB, tmp);
-    }
-  }
-}
-
-// benchmark for EOK
-// for (let i = 0; i < 1000; i++) {
-//   for (let vec of vecs) {
-//     deltaEOK(vec, [0, 0.25, 1]);
-//   }
-// }
-
-// console.timeEnd("bench");

package/test/bench-size.js

@@ -1,12 +0,0 @@
-// To test @texel/color (~3.5 kb)
-import * as colors from "../src/index.js";
-const rgb = colors.convert([0.5, 0.15, 30], colors.OKLCH, colors.sRGB);
-console.log(rgb);
-
-// To test colorjs.io (~55.3 kb)
-// import Color from "colorjs.io";
-// console.log(new Color("oklch", [0.5, 0.15, 30]).to("srgb").coords);
-
-// To test Culori (~43.2 kb)
-// import { rgb } from "culori";
-// console.log(rgb({ mode: "oklch", l: 0.5, c: 0.15, h: 30 }));

package/test/canvas-graph.js

@@ -1,212 +0,0 @@
-import canvasSketch from "canvas-sketch";
-import {
-  findCuspOKLCH,
-  gamutMapOKLCH,
-  MapToAdaptiveCuspL,
-  A98RGBGamut,
-  convert,
-  DisplayP3Gamut,
-  OKLCH,
-  Rec2020Gamut,
-  sRGBGamut,
-  degToRad,
-  constrainAngle,
-  floatToByte,
-  isRGBInGamut,
-  clampedRGB,
-} from "../src/index.js";
-import arrayAlmostEqual from "./almost-equal.js";
-
-const settings = {
-  dimensions: [768, 768],
-  animate: false,
-  playbackRate: "throttle",
-  fps: 2,
-  attributes: {
-    colorSpace: "display-p3",
-  },
-};
-
-const sketch = ({ width, height }) => {
-  return ({ context, width, height, frame, playhead }) => {
-    const { colorSpace = "srgb" } = context.getContextAttributes();
-    const gamut = colorSpace === "srgb" ? sRGBGamut : DisplayP3Gamut;
-    const mapping = MapToAdaptiveCuspL;
-
-    context.fillStyle = "gray";
-    context.fillRect(0, 0, width, height);
-    const H = 264.1;
-    // const H = constrainAngle((frame * 45) / 2);
-
-    // console.time("map");
-    // console.profile("map");
-    const tmp = [0, 0, 0];
-    const pixels = new Uint8ClampedArray(width * height * 4).fill(0xff);
-    for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        const u = x / width;
-        const v = y / height;
-
-        const [L, C] = UVtoLC([u, v]);
-
-        let oklch = [L, C, H];
-        let rgb = convert(oklch, OKLCH, gamut.space, tmp);
-        if (!isRGBInGamut(rgb, 0)) {
-          rgb[0] = 0.25;
-          rgb[1] = 0.25;
-          rgb[2] = 0.25;
-          // if we wanted to fill the whole space with mapped colors
-          // rgb = gamutMapOKLCH(oklch, gamut, sRGB, tmp, mapping);
-        }
-
-        const idx = x + y * width;
-        pixels[idx * 4 + 0] = floatToByte(rgb[0]);
-        pixels[idx * 4 + 1] = floatToByte(rgb[1]);
-        pixels[idx * 4 + 2] = floatToByte(rgb[2]);
-      }
-    }
-    context.putImageData(
-      new ImageData(pixels, width, height, { colorSpace }),
-      0,
-      0
-    );
-    // console.profileEnd("map");
-    // console.timeEnd("map");
-
-    const A = [1, 0];
-    const B = [0, 0];
-    const lineWidth = width * 0.003;
-    context.lineWidth = lineWidth;
-
-    const gamuts = [
-      { defaultColor: "yellow", gamut: sRGBGamut },
-      { defaultColor: "palegreen", gamut: DisplayP3Gamut },
-      { defaultColor: "red", gamut: Rec2020Gamut },
-      { defaultColor: "pink", gamut: A98RGBGamut },
-    ];
-
-    const hueAngle = degToRad(H);
-    const a = Math.cos(hueAngle);
-    const b = Math.sin(hueAngle);
-
-    for (let { gamut: dispGamut, defaultColor } of gamuts) {
-      const gamutCusp = findCuspOKLCH(a, b, dispGamut);
-      const gamutTri = [A, gamutCusp, B];
-      drawLCTriangle(
-        context,
-        gamutTri,
-        gamut === dispGamut ? "white" : defaultColor
-      );
-    }
-
-    context.strokeStyle = "white";
-
-    const steps = 64;
-    for (let i = 0; i < steps; i++) {
-      // get some LC point that is very likely to be out of gamut
-      const ox = 0.5;
-      const oy = 0.5;
-      const r = 1;
-      const t = (i / steps) * degToRad(360) + degToRad(-180);
-      const xy = [Math.cos(t) * r + ox, Math.sin(t) * r + oy];
-      const [L, C] = UVtoLC(xy);
-      const oklch = [L, C, H];
-      const lc = oklch.slice(0, 2);
-
-      const mapped = gamutMapOKLCH(oklch, gamut, OKLCH, tmp, mapping);
-
-      const radius = width * 0.01;
-      const didChange = !arrayAlmostEqual(mapped, oklch);
-      if (didChange) {
-        context.globalAlpha = 0.5;
-        drawLCPoint(context, lc, radius / 2, "white");
-        context.beginPath();
-        context.lineTo(...LCtoXY(lc));
-        context.lineTo(...LCtoXY(mapped));
-        context.stroke();
-        context.globalAlpha = 1;
-        drawLCPoint(context, mapped.slice(0, 2), radius / 4, "white");
-      } else {
-        drawLCPoint(context, lc, radius);
-      }
-    }
-
-    const fontSize = width * 0.03;
-    const boxHeight = fontSize * gamuts.length;
-    const pad = width * 0.05;
-    const padleft = width * 0.1;
-    context.fillStyle = "black";
-
-    for (let i = 0; i < gamuts.length; i++) {
-      const { gamut: dispGamut, defaultColor } = gamuts[i];
-      const curColor = dispGamut === gamut ? "white" : defaultColor;
-
-      context.font = `${fontSize}px monospace`;
-      context.textAlign = "right";
-      context.textBaseline = "top";
-      context.fillStyle = curColor;
-      const x = width - pad - padleft;
-      const y = height - boxHeight + i * fontSize - pad;
-      context.fillText(dispGamut.space.id, x, y);
-      context.beginPath();
-      context.lineTo(x + fontSize / 2, y + fontSize * 0.4);
-      context.lineTo(x + padleft, y + fontSize * 0.4);
-      context.strokeStyle = curColor;
-      context.stroke();
-    }
-
-    context.fillStyle = "white";
-    context.fillText(
-      `Hue: ${H.toFixed(0)}º`,
-      width - pad,
-      height - pad - boxHeight - fontSize * 2
-    );
-  };
-
-  function LCtoXY(okLC) {
-    const x = (okLC[1] / 1) * width;
-    const y = (1 - okLC[0]) * height;
-    return [x, y];
-  }
-
-  function XYtoLC(xy) {
-    return UVtoLC([xy[0] / width, xy[1] / height]);
-  }
-
-  function UVtoLC(xy) {
-    const L = 1 - xy[1];
-    const C = xy[0] * 1;
-    return [L, C];
-  }
-
-  function drawLCTriangle(context, triangle, color = "white") {
-    context.beginPath();
-    triangle.forEach((oklch) => {
-      const [x, y] = LCtoXY(oklch);
-      context.lineTo(x, y);
-    });
-    context.closePath();
-    context.strokeStyle = color;
-    context.stroke();
-  }
-
-  function drawLCPoint(
-    context,
-    okLC,
-    radius = width * 0.01,
-    color = "white",
-    fill = true
-  ) {
-    context.beginPath();
-    context.arc(...LCtoXY(okLC), radius, 0, Math.PI * 2);
-    if (fill) {
-      context.fillStyle = color;
-      context.fill();
-    } else {
-      context.strokeStyle = color;
-      context.stroke();
-    }
-  }
-};
-
-canvasSketch(sketch, settings);