@thi.ng/color/transform.js

Array-based color types, CSS parsing, conversions, transformations, declarative theme generation, gradients, presets

import { mix } from "@thi.ng/math/mix";
import { RGB_LUMINANCE_REC709, WHITE } from "./api/constants.js";
import { __mulM45, __mulV45 } from "./internal/matrix-ops.js";
const S0 = 0.072;
const S1 = 0.213;
const S2 = 0.285;
const S3 = 0.715;
const S4 = 0.787;
const S5 = 0.928;
const S6 = 0.14;
const S7 = 0.143;
const S8 = 0.283;
const transform = __mulV45;
const concat = (mat, ...rest) => rest.reduce(__mulM45, mat);
const IDENTITY = [
  1,
  0,
  0,
  0,
  0,
  0,
  1,
  0,
  0,
  0,
  0,
  0,
  1,
  0,
  0,
  0,
  0,
  0,
  1,
  0
];
const subtractMat = (src = WHITE) => [
  -1,
  0,
  0,
  0,
  src[0],
  0,
  -1,
  0,
  0,
  src[1],
  0,
  0,
  -1,
  0,
  src[2],
  0,
  0,
  0,
  1,
  0
];
const brightnessMat = (x) => [
  1,
  0,
  0,
  0,
  x,
  0,
  1,
  0,
  0,
  x,
  0,
  0,
  1,
  0,
  x,
  0,
  0,
  0,
  1,
  0
];
const contrastMat = (x, o = 0.5 * (1 - x)) => [
  x,
  0,
  0,
  0,
  o,
  0,
  x,
  0,
  0,
  o,
  0,
  0,
  x,
  0,
  o,
  0,
  0,
  0,
  1,
  0
];
const exposureMat = (x) => [
  x,
  0,
  0,
  0,
  0,
  0,
  x,
  0,
  0,
  0,
  0,
  0,
  x,
  0,
  0,
  0,
  0,
  0,
  1,
  0
];
const saturationMat = (x) => [
  S1 + S4 * x,
  S3 - S3 * x,
  S0 - S0 * x,
  0,
  0,
  S1 - S1 * x,
  S3 + S2 * x,
  S0 - S0 * x,
  0,
  0,
  S1 - S1 * x,
  S3 - S3 * x,
  S0 + S5 * x,
  0,
  0,
  0,
  0,
  0,
  1,
  0
];
const hueRotateMat = (theta) => {
  const s = Math.sin(theta);
  const c = Math.cos(theta);
  return [
    S1 + c * S4 - s * S1,
    S3 - c * S3 - s * S3,
    S0 - c * S0 + s * S5,
    0,
    0,
    S1 - c * S1 + s * S7,
    S3 + c * S2 + s * S6,
    S0 - c * S0 - s * S8,
    0,
    0,
    S1 - c * S1 - s * S4,
    S3 - c * S3 + s * S3,
    S0 + c * S5 + s * S0,
    0,
    0,
    0,
    0,
    0,
    1,
    0
  ];
};
const temperatureMat = (x, y = 0) => [
  1 + x + y,
  0,
  0,
  0,
  0,
  0,
  1 - y,
  0,
  0,
  0,
  0,
  0,
  1 - x + y,
  0,
  0,
  0,
  0,
  0,
  1,
  0
];
const sepiaMat = (x = 1) => [
  mix(1, 0.393, x),
  0.769 * x,
  0.189 * x,
  0,
  0,
  0.349 * x,
  mix(1, 0.686, x),
  0.168 * x,
  0,
  0,
  0.272 * x,
  0.534 * x,
  mix(1, 0.131, x),
  0,
  0,
  0,
  0,
  0,
  1,
  0
];
const tintMat = (x) => [
  1 + x,
  0,
  0,
  0,
  0,
  0,
  1,
  0,
  0,
  0,
  0,
  0,
  1 + x,
  0,
  0,
  0,
  0,
  0,
  1,
  0
];
const grayscaleMat = ([r, g, b] = RGB_LUMINANCE_REC709, offset = 0) => [
  r,
  g,
  b,
  0,
  offset,
  r,
  g,
  b,
  0,
  offset,
  r,
  g,
  b,
  0,
  offset,
  0,
  0,
  0,
  1,
  0
];
const luminanceAlphaMat = ([r, g, b] = RGB_LUMINANCE_REC709) => [
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  r,
  g,
  b,
  0,
  0
];
export {
  IDENTITY,
  brightnessMat,
  concat,
  contrastMat,
  exposureMat,
  grayscaleMat,
  hueRotateMat,
  luminanceAlphaMat,
  saturationMat,
  sepiaMat,
  subtractMat,
  temperatureMat,
  tintMat,
  transform
};