@texel/color 1.0.0

package/test/bench-colorjs.js

@@ -0,0 +1,138 @@
+import Color from "colorjs.io";
+import {
+  convert,
+  OKLCH,
+  sRGB,
+  sRGBGamut,
+  listColorSpaces,
+  DisplayP3Gamut,
+  DisplayP3,
+  gamutMapOKLCH,
+  constrainAngle,
+  findCuspOKLCH,
+  degToRad,
+  MapToCuspL,
+} from "../src/index.js";
+
+const fixName = (name) => {
+  return name
+    .replace("display-", "")
+    .replace("a98-rgb", "a98rgb")
+    .replace("prophoto-rgb", "prophoto");
+};
+
+// TODO: test okhsl with latest version of colorjs
+const spaces = listColorSpaces().filter((f) => !/ok(hsv|hsl)/i.test(f.id));
+const spacesForColorjs = spaces.map((s) => fixName(s.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];
+
+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];
+  });
+
+now = performance.now();
+for (let vec of oklchVecs) {
+  new Color("oklch", vec).to("srgb").toGamut({ space: "srgb", method: "css" });
+}
+elapsedColorjs = performance.now() - now;
+
+now = performance.now();
+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 (e.g. ~100x faster rather than ~120x)
+  const cusp = hueCusps[vec[2]];
+  gamutMapOKLCH(vec, sRGBGamut, sRGB, tmp, MapToCuspL, cusp);
+}
+elapsedOurs = performance.now() - now;
+
+console.log("OKLCH to sRGB with gamut mapping --");
+console.log("Colorjs: %s ms", elapsedColorjs.toFixed(2));
+console.log("Ours: %s ms", elapsedOurs.toFixed(2));
+console.log("Speedup: %sx faster", (elapsedColorjs / elapsedOurs).toFixed(1));
+
+//// conversions
+
+now = performance.now();
+for (let vec of vecs) {
+  for (let i = 0; i < spacesForColorjs.length; i++) {
+    for (let j = 0; j < spacesForColorjs.length; j++) {
+      const a = spacesForColorjs[i];
+      const b = spacesForColorjs[j];
+      new Color(a, vec).to(b);
+    }
+  }
+}
+elapsedColorjs = performance.now() - now;
+
+now = performance.now();
+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);
+    }
+  }
+}
+elapsedOurs = performance.now() - now;
+console.log();
+console.log("All Conversions --");
+console.log("Colorjs: %s ms", elapsedColorjs.toFixed(2));
+console.log("Ours: %s ms", elapsedOurs.toFixed(2));
+console.log("Speedup: %sx faster", (elapsedColorjs / elapsedOurs).toFixed(1));
+
+//// gamut mapping
+
+now = performance.now();
+for (let vec of vecs) {
+  for (let i = 0; i < spacesForColorjs.length; i++) {
+    const a = spacesForColorjs[i];
+    new Color(a, vec).to("p3").toGamut({ space: "p3", method: "css" });
+  }
+}
+elapsedColorjs = performance.now() - now;
+
+now = performance.now();
+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);
+  }
+}
+elapsedOurs = performance.now() - now;
+
+console.log();
+console.log("Conversion + Gamut Mapping --");
+console.log("Colorjs: %s ms", elapsedColorjs.toFixed(2));
+console.log("Ours: %s ms", elapsedOurs.toFixed(2));
+console.log("Speedup: %sx faster", (elapsedColorjs / elapsedOurs).toFixed(1));

package/test/bench-node.js

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,3 @@
+import * as colors from "../";
+const rgb = colors.convert([0.5, 0.15, 30], colors.OKLCH, colors.sRGB);
+console.log(rgb);

package/test/canvas-graph.js

@@ -0,0 +1,210 @@
+import canvasSketch from "canvas-sketch";
+import {
+  findCuspOKLCH,
+  gamutMapOKLCH,
+  MapToAdaptiveCuspL,
+  A98RGBGamut,
+  convert,
+  DisplayP3Gamut,
+  OKLCH,
+  Rec2020Gamut,
+  sRGBGamut,
+  degToRad,
+  constrainAngle,
+  floatToByte,
+  isRGBInGamut,
+} from "../src/index.js";
+import arrayAlmostEqual from "./almost-equal.js";
+
+const settings = {
+  dimensions: [768, 768],
+  animate: true,
+  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 = 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, "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);

package/test/logo.js

@@ -0,0 +1,112 @@
+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/test-colorjs.js

@@ -0,0 +1,87 @@
+import test from "tape";
+import Color from "colorjs.io";
+import arrayAlmostEqual from "./almost-equal.js";
+import { listColorSpaces, convert } from "../src/index.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 = listColorSpaces().filter((f) => !/ok(hsl|hsv)/i.test(f.id));
+  const vecs = [
+    [0.12341, 0.12001, 0.05212],
+    [1, 1, 1],
+    [1, 0, 0],
+    [0, 0, 0],
+    // 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,
+  //   ]);
+
+  const fixName = (name) => {
+    return name
+      .replace("display-", "")
+      .replace("a98-rgb", "a98rgb")
+      .replace("prophoto-rgb", "prophoto");
+  };
+
+  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];
+        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 = fixName(a.id);
+        const colorjsid_b = fixName(b.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
+        );
+      }
+    }
+  }
+});