@texel/color 1.1.2 → 1.1.4

package/test/check-gamut-epsilon.js

@@ -1,136 +0,0 @@
-// When gamut mapping with OKLCH approximation,
-// the resulting points do not always lie exactly in gamut.
-// The same may be true of OKHSL to RGB spaces.
-// Let's figure out how far away they are:
-// if a given point is under this threshold, gamut mapping
-// will be redundant as it will just produce the same epsilon.
-// This value is used in gamut.js as the RGB_CLIP_EPSILON
-
-import {
-  clampedRGB,
-  convert,
-  degToRad,
-  findCuspOKLCH,
-  findGamutIntersectionOKLCH,
-  gamutMapOKLCH,
-  isRGBInGamut,
-  lerp,
-  MapToCuspL,
-  OKLCH,
-  sRGB,
-  sRGBGamut,
-  sRGBLinear,
-} from "../src/index.js";
-
-const gamut = sRGBGamut;
-const target = gamut.space.base; // linear form
-
-// slice the plane into a square
-const slices = 100;
-let avgDelta = 0;
-let avgCount = 0;
-let minDelta = Infinity;
-let maxDelta = -Infinity;
-
-// a very small number which still catches many gamut-mapped points
-// but produces very little difference in practical and visual results
-const RGB_CLIP_EPSILON = 0.0000001;
-let totalPointsOutOfGamut = 0;
-let totalPointsUnderEpsilon = 0;
-let totalPointsUnderEpsilonBeforeMapping = 0;
-
-// this particular hue is a little funky
-// https://github.com/color-js/color.js/issues/81
-// it produces out of gamut sRGB, however, the oklab gamut approximation seems to handle it fine
-const hue = 264.1;
-const lightness = 0.4;
-for (let chroma = 0.22; chroma < 0.285; chroma += 0.001) {
-  const oklch = [lightness, chroma, hue];
-  const rgb = convert(oklch, OKLCH, sRGBLinear);
-  if (!isRGBInGamut(rgb, 0)) {
-    const mappedOKLCH = gamutMapWithoutClipOKLCH(oklch);
-    const mappedRGB = convert(mappedOKLCH, OKLCH, sRGBLinear);
-    const delta = clipDelta(mappedRGB);
-    if (!delta.every((n) => n == 0)) console.log("hue", hue, "delta", delta);
-  }
-}
-
-// test all hue planes Nº difference apart
-// we will see some gamut mapped points still do not lie exactly in gamut
-for (let H = 0; H < 360; H += 0.5) {
-  for (let y = 0; y < slices; y++) {
-    for (let x = 0; x < slices; x++) {
-      const u = x / (slices - 1);
-      const v = y / (slices - 1);
-      const L = 1 - v;
-      const C = u * 0.4;
-
-      // try conversion
-      let rgbl = convert([L, C, H], OKLCH, target);
-
-      // not exactly in space
-      if (!isRGBInGamut(rgbl, 0)) {
-        // check epsilons
-        if (isRGBInGamut(rgbl, RGB_CLIP_EPSILON)) {
-          totalPointsUnderEpsilonBeforeMapping++;
-        }
-
-        const oklch = gamutMapWithoutClipOKLCH([L, C, H]);
-        rgbl = convert(oklch, OKLCH, target);
-
-        const [dr, dg, db] = clipDelta(rgbl);
-        const avg = (dr + dg + db) / 3;
-        const min = Math.min(dr, dg, db);
-        const max = Math.max(dr, dg, db);
-        avgDelta += avg;
-        avgCount++;
-        minDelta = Math.min(min, minDelta);
-        maxDelta = Math.max(max, maxDelta);
-
-        totalPointsOutOfGamut++;
-        if (isRGBInGamut(rgbl, RGB_CLIP_EPSILON)) {
-          totalPointsUnderEpsilon++;
-        }
-      }
-    }
-  }
-}
-
-function clipDelta(rgb) {
-  const clipped = clampedRGB(rgb);
-  const dr = Math.abs(rgb[0] - clipped[0]);
-  const dg = Math.abs(rgb[1] - clipped[1]);
-  const db = Math.abs(rgb[2] - clipped[2]);
-  return [dr, dg, db];
-}
-
-function gamutMapWithoutClipOKLCH(oklch) {
-  const [L, C, H] = oklch;
-  // we aren't in gamut, so let's map toward it
-  const hueAngle = degToRad(H);
-  const aNorm = Math.cos(hueAngle);
-  const bNorm = Math.sin(hueAngle);
-
-  const out = [L, C, H];
-  // choose our strategy
-  const cusp = findCuspOKLCH(aNorm, bNorm, gamut);
-  const LTarget = MapToCuspL(out, cusp);
-
-  let t = findGamutIntersectionOKLCH(aNorm, bNorm, L, C, LTarget, cusp, gamut);
-  out[0] = lerp(LTarget, L, t);
-  out[1] *= t;
-  return out;
-}
-
-avgDelta /= avgCount;
-
-console.log("Min Epsilon:", minDelta);
-console.log("Max Epsilon:", maxDelta);
-console.log("Average Epsilon:", avgDelta);
-console.log("Compare against epsilon:", RGB_CLIP_EPSILON);
-console.log("Total points out of gamut:", totalPointsOutOfGamut);
-console.log(
-  "Total points under epsilon (before map):",
-  totalPointsUnderEpsilonBeforeMapping
-);
-console.log("Total points under epsilon (after map):", totalPointsUnderEpsilon);

package/test/colorjs-fn.js

@@ -1,34 +0,0 @@
-import * as ColorJSFn from "colorjs.io/fn";
-import { listColorSpaces } from "../src/index.js";
-
-// Colorjs.io uses some different naming conventions than @texel/color
-const getColorJSID = (name) => {
-  return name
-    .replace("display-", "")
-    .replace(/^xyz$/, "xyz-d65")
-    .replace("a98-rgb", "a98rgb")
-    .replace("prophoto-rgb", "prophoto");
-};
-
-// returns a list of ColorJS.io space IDs that are supported by @texel/color
-// okhsl/okhsv is skipped due to it not being included in this npm version of colorjs.io
-export function getSupportedColorJSSpaces() {
-  const spaceFns = Object.values(ColorJSFn);
-  const spaces = listColorSpaces().filter((s) => !/ok(hsv|hsl)/i.test(s.id));
-  return spaces.map((space) => {
-    const cjsID = getColorJSID(space.id);
-    const colorJSSpace = spaceFns.find((f) => f.id === cjsID);
-    if (!colorJSSpace)
-      throw new Error(`expected ${cjsID} to exist in colorjs.io/fn`);
-    return {
-      space,
-      colorJSSpace,
-    };
-  });
-}
-
-// Register all spaces
-const spaces = getSupportedColorJSSpaces().map((s) => s.colorJSSpace);
-for (let space of spaces) {
-  ColorJSFn.ColorSpace.register(space);
-}

package/test/example-interpolation.js

@@ -1,107 +0,0 @@
-import canvasSketch from "canvas-sketch";
-import {
-  convert,
-  DisplayP3Gamut,
-  gamutMapOKLCH,
-  lerp,
-  lerpAngle,
-  OKLab,
-  OKLCH,
-  serialize,
-  sRGB,
-  sRGBGamut,
-} from "../src/index.js";
-
-const settings = {
-  dimensions: [2048, 512],
-  attributes: {
-    // comment this out if you want sRGB output
-    colorSpace: "display-p3",
-  },
-};
-
-const mix = (() => {
-  const tmpA = [0, 0, 0];
-  const tmpB = [0, 0, 0];
-
-  // you can decide whether you'd like to interpolate in
-  // OKLab, OKLCH or another space (you may need to adjust interpolation
-  // if you use a custom space)
-  const interpolationSpace = OKLCH;
-
-  // e.g. mix({ space, coords }, { space, coords }, 0.5, sRGB)
-  return (a, b, t, outputSpace = sRGB, out = [0, 0, 0]) => {
-    // bring both spaces into the shared interpolation space
-    convert(a.coords, a.space, interpolationSpace, tmpA);
-    convert(b.coords, b.space, interpolationSpace, tmpB);
-
-    // now do interpolation
-    out[0] = lerp(tmpA[0], tmpB[0], t);
-    out[1] = lerp(tmpA[1], tmpB[1], t);
-    if (interpolationSpace.id === "oklch") {
-      // for cylindrical spaces, use a circular interpolation for Hue parameter
-      // note if you decide to use a custom space like HSL as your interpolation space,
-      // you'll have to use the first parameter instead...
-      out[2] = lerpAngle(tmpA[2], tmpB[2], t);
-    } else {
-      // otherwise can use a regular linear interpolation
-      out[2] = lerp(tmpA[2], tmpB[2], t);
-    }
-
-    // make sure we convert from interpolation space to the target output space
-    convert(out, interpolationSpace, outputSpace, out);
-    return out;
-  };
-})();
-
-// utility to create a ramp between two 'colors' as { space, coords }
-function ramp(a, b, steps = 4, outputSpace = sRGB) {
-  return Array(steps)
-    .fill()
-    .map((_, i, lst) => {
-      const t = lst.length <= 1 ? 0 : i / (lst.length - 1);
-      return mix(a, b, t, outputSpace);
-    });
-}
-
-const sketch = ({ context }) => {
-  const { colorSpace = "srgb" } = context.getContextAttributes();
-  const gamut = colorSpace === "srgb" ? sRGBGamut : DisplayP3Gamut;
-
-  return ({ context, width, height }) => {
-    context.fillStyle = "white";
-    context.fillRect(0, 0, width, height);
-
-    const A = {
-      space: sRGB,
-      coords: [0, 0, 1],
-    };
-
-    const B = {
-      space: OKLCH,
-      coords: [0.55, 0.4, 30],
-    };
-
-    const slices = 16;
-    const sliceWidth = width / slices;
-
-    // the output space is whatever the canvas expects (sRGB or DisplayP3)
-    const outputSpace = gamut.space;
-
-    // create a ramp of colors in OKLCH
-    // then gamut map them to the outputSpace
-    const colors = ramp(A, B, slices, OKLCH).map((oklch) =>
-      gamutMapOKLCH(oklch, gamut, outputSpace)
-    );
-
-    for (let i = 0; i < slices; i++) {
-      const color = colors[i];
-
-      // turn the color (now in outputSpace) into a context string
-      context.fillStyle = serialize(color, outputSpace);
-      context.fillRect(i * sliceWidth, 0, sliceWidth, height);
-    }
-  };
-};
-
-canvasSketch(sketch, settings);

package/test/logo.js

@@ -1,112 +0,0 @@
-import fs from "node:fs/promises";
-import {
-  ChunkType,
-  ColorType,
-  colorTypeToChannels,
-  encode,
-  encode_iCCP,
-} from "png-tools";
-import { deflate } from "pako";
-import {
-  convert,
-  DisplayP3Gamut,
-  floatToByte,
-  hexToRGB,
-  OKHSLToOKLab,
-  OKLab,
-  radToDeg,
-} from "../src/index.js";
-
-const gamut = DisplayP3Gamut;
-
-// or regular sRGB...
-// const gamut = sRGBGamut;
-
-const isLogo = process.argv.includes("--logo");
-
-const colorType = ColorType.RGB;
-const channels = colorTypeToChannels(colorType);
-const depth = 8;
-const width = isLogo ? 512 : 1024;
-const height = isLogo ? 512 : 512;
-const uint8 = new Uint8ClampedArray(width * height * channels);
-
-let rgb = [0, 0, 0];
-for (let y = 0; y < height; y++) {
-  for (let x = 0; x < width; x++) {
-    const u = x / width;
-    const v = y / height;
-
-    if (isLogo) {
-      const u2 = u * 2 - 1;
-      const v2 = v * 2 - 1;
-      const hueAngle = Math.atan2(v2, u2);
-      let H = radToDeg(hueAngle);
-      const hueSteps = 45 / 2;
-      H = Math.round(H / hueSteps) * hueSteps;
-
-      const S = 1;
-      const L = 0.7;
-
-      const oklab = OKHSLToOKLab([H, S, L], gamut);
-      convert(oklab, OKLab, gamut.space, rgb);
-    } else {
-      const margin = 0.1 * Math.min(width, height);
-      if (
-        x >= margin &&
-        y >= margin &&
-        x < width - margin &&
-        y < height - margin
-      ) {
-        const u2 = inverseLerp(margin, width - margin, x);
-        const v2 = inverseLerp(margin, height - margin, y);
-        const hueSteps = 8;
-        const H = (Math.floor(u2 * hueSteps) / hueSteps) * 360;
-        const satSteps = 4;
-        const S = 1 - Math.floor(v2 * satSteps) / satSteps;
-        const L = 0.75;
-        const oklab = OKHSLToOKLab([H, S, L], gamut);
-        convert(oklab, OKLab, gamut.space, rgb);
-      } else {
-        hexToRGB("#e9e3d5", rgb);
-      }
-    }
-
-    const idx = x + y * width;
-    const [r, g, b] = rgb.map((f) => floatToByte(f));
-    uint8[idx * channels + 0] = r;
-    uint8[idx * channels + 1] = g;
-    uint8[idx * channels + 2] = b;
-  }
-}
-
-// optional color profile chunk
-let iCCP = null;
-if (gamut == DisplayP3Gamut) {
-  const iccFile = await fs.readFile("test/profiles/DisplayP3.icc");
-  const name = "Display P3";
-  const data = deflate(iccFile);
-  iCCP = {
-    type: ChunkType.iCCP,
-    data: encode_iCCP({ name, data }),
-  };
-}
-
-const png = encode(
-  {
-    width,
-    height,
-    data: uint8,
-    colorType,
-    depth,
-    ancillary: [iCCP].filter(Boolean),
-  },
-  deflate
-);
-
-fs.writeFile(`test/${isLogo ? "logo" : "banner"}.png`, png);
-
-function inverseLerp(min, max, t) {
-  if (Math.abs(min - max) < Number.EPSILON) return 0;
-  else return (t - min) / (max - min);
-}

package/test/spaces/hsl.js

@@ -1,87 +0,0 @@
-// HSL space (hue, saturation, lightness within sRGB gamut)
-
-// Reference:
-// https://github.com/color-js/color.js/blob/cfe55d358adb6c2e23c8a897282adf42904fd32d/src/spaces/hsl.js
-
-import { sRGB, sRGBLinear } from "../../src/index.js";
-
-export const HSL = {
-  id: "hsl",
-  // Note: @texel/color currently only supports 1-level depth for color spaces
-  // (for performance & memory reasons) - so our base must be one without another base space
-  base: sRGBLinear,
-  // Adapted from https://drafts.csswg.org/css-color-4/better-rgbToHsl.js
-  fromBase: (rgb, out = [0, 0, 0]) => {
-    // from sRGBLinear (this space's base) to sRGB (for HSL conversion)
-    sRGB.fromBase(rgb, out);
-    const r = out[0];
-    const g = out[1];
-    const b = out[2];
-    let max = Math.max(r, g, b);
-    let min = Math.min(r, g, b);
-    let h = 0,
-      s = 0,
-      l = (min + max) / 2;
-    let d = max - min;
-
-    if (d !== 0) {
-      s = l === 0 || l === 1 ? 0 : (max - l) / Math.min(l, 1 - l);
-
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-        case g:
-          h = (b - r) / d + 2;
-          break;
-        case b:
-          h = (r - g) / d + 4;
-      }
-
-      h = h * 60;
-    }
-
-    // Very out of gamut colors can produce negative saturation
-    // If so, just rotate the hue by 180 and use a positive saturation
-    // see https://github.com/w3c/csswg-drafts/issues/9222
-    if (s < 0) {
-      h += 180;
-      s = Math.abs(s);
-    }
-
-    if (h >= 360) {
-      h -= 360;
-    }
-
-    out[0] = h;
-    out[1] = s * 100;
-    out[2] = l * 100;
-    return out;
-  },
-  // Adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
-  toBase: (hsl, out = [0, 0, 0]) => {
-    let h = hsl[0];
-    let s = hsl[1];
-    let l = hsl[2];
-    h = h % 360;
-    if (h < 0) {
-      h += 360;
-    }
-
-    s /= 100;
-    l /= 100;
-
-    const a = s * Math.min(l, 1 - l);
-    out[0] = f(h, l, a, 0);
-    out[1] = f(h, l, a, 8);
-    out[2] = f(h, l, a, 4);
-    // from sRGB to sRGBLinear (this space's base)
-    sRGB.toBase(out, out);
-    return out;
-  },
-};
-
-function f(h, l, a, n) {
-  let k = (n + h / 30) % 12;
-  return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
-}

package/test/spaces/lab.js

@@ -1,60 +0,0 @@
-// Lab aka CIELAB aka L*a*b* (uses a D50 WHITE_D50 point and has to be adapted)
-// refer to CSS Color Module Level 4 Spec for more details
-
-// Reference:
-// https://github.com/color-js/color.js/blob/cfe55d358adb6c2e23c8a897282adf42904fd32d/src/spaces/lab.js
-import { D50_to_D65_M, D65_to_D50_M } from "../../src/index.js";
-
-// K * e  = 2^3 = 8
-const e = 216 / 24389; // 6^3/29^3 == (24/116)^3
-const e3 = 24 / 116;
-const K = 24389 / 27; // 29^3/3^3
-const WHITE_D50 = [0.3457 / 0.3585, 1.0, (1.0 - 0.3457 - 0.3585) / 0.3585];
-
-const fterm = (value) =>
-  value > e ? Math.cbrt(value) : (K * value + 16) / 116;
-
-const inv = (value) =>
-  value > e3 ? Math.pow(value, 3) : (116 * value - 16) / K;
-
-export const Lab = {
-  id: "lab",
-  adapt: {
-    // chromatic adaptation to and from D65
-    to: D50_to_D65_M,
-    from: D65_to_D50_M,
-  },
-  // Convert D50-adapted XYX to Lab
-  // CIE 15.3:2004 section 8.2.1.1
-  fromXYZ(xyz, out = [0, 0, 0]) {
-    // XYZ scaled relative to reference WHITE_D50, then modified
-    out[0] = fterm(xyz[0] / WHITE_D50[0]);
-    out[1] = fterm(xyz[1] / WHITE_D50[1]);
-    out[2] = fterm(xyz[2] / WHITE_D50[2]);
-    let L = 116 * out[1] - 16;
-    let a = 500 * (out[0] - out[1]);
-    let b = 200 * (out[1] - out[2]);
-    out[0] = L;
-    out[1] = a;
-    out[2] = b;
-    return out;
-  },
-  // Convert Lab to D50-adapted XYZ
-  // Same result as CIE 15.3:2004 Appendix D although the derivation is different
-  // http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
-  toXYZ(Lab, out = [0, 0, 0]) {
-    // compute f, starting with the luminance-related term
-    const L = Lab[0];
-    const a = Lab[1];
-    const b = Lab[2];
-    out[1] = (L + 16) / 116;
-    out[0] = a / 500 + out[1];
-    out[2] = out[1] - b / 200;
-
-    // compute xyz and scale by WHITE_D50
-    out[0] = inv(out[0]) * WHITE_D50[0];
-    out[1] = (L > 8 ? Math.pow((L + 16) / 116, 3) : L / K) * WHITE_D50[1];
-    out[2] = inv(out[2]) * WHITE_D50[2];
-    return out;
-  },
-};

package/test/test-colorjs.js

@@ -1,86 +0,0 @@
-import test from "tape";
-import Color from "colorjs.io";
-import arrayAlmostEqual from "./almost-equal.js";
-import { convert } from "../src/index.js";
-import { getSupportedColorJSSpaces } from "./colorjs-fn.js";
-
-test("should approximately match colorjs.io conversions", async (t) => {
-  // note: we skip okhsv/hsl as colorjs.io doesn't support in the current npm version
-  const spaces = getSupportedColorJSSpaces();
-  const vecs = [
-    [0.12341, 0.12001, 0.05212],
-    [1, 1, 1],
-    [1, 0, 0],
-    [0, 0, 0],
-    [-0.5, -0.5, -0.5],
-    // some other inputs
-    [0.95, 1, 1.089],
-    [0.45, 1.236, -0.019],
-    [0, 1, 0],
-    [0.922, -0.671, 0.263],
-    [0, 0, 1],
-    [0.153, -1.415, -0.449],
-  ];
-
-  // just a further sanity check, uncomment to go wild
-  // for (let i = 0; i < 100; i++)
-  //   vecs.push([
-  //     Math.random() * 2 - 1,
-  //     Math.random() * 2 - 1,
-  //     Math.random() * 2 - 1,
-  //   ]);
-
-  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];
-
-        // @texel/color spaces
-        const a = A.space;
-        const b = B.space;
-        const suffix = `${a.id}-to-${b.id}`;
-
-        console.log(suffix);
-        const expected0 = convert(vec, a, b);
-        const tmp = vec.slice();
-        const expected1 = convert(vec, a, b, tmp);
-
-        const colorjsid_a = A.colorJSSpace.id;
-        const colorjsid_b = B.colorJSSpace.id;
-        t.deepEqual(expected0, tmp, `${suffix} copies into`);
-        t.deepEqual(expected0, expected1, `${suffix} copies into`);
-        t.equal(expected1, tmp, `${suffix} copies into and returns`);
-
-        // ColorJS returns NaN for display-p3 0 0 0 --> OKLCH
-        const outCoords = new Color(colorjsid_a, vec)
-          .to(colorjsid_b)
-          .coords.map((n) => n || 0);
-
-        // Colorjs does not appear to have as high precision as the latest
-        // CSS working draft spec which uses rational numbers
-        // so I have lowered tolerance for A98RGB, and consider it an upstream bug.
-        // please open a PR/issue if you feel otherwise!
-        const tolerance =
-          colorjsid_a.includes("a98") || colorjsid_b.includes("a98")
-            ? 0.0000001
-            : undefined;
-
-        if (!arrayAlmostEqual(expected0, outCoords, tolerance)) {
-          console.error(
-            `\nError: %s - In (%s) Out (%s) Expected (%s)`,
-            suffix,
-            vec,
-            expected0,
-            outCoords
-          );
-        }
-        t.equal(
-          arrayAlmostEqual(expected0, outCoords, tolerance),
-          true,
-          suffix
-        );
-      }
-    }
-  }
-});