fbparis / mokole.com Goto Github PK

import chroma from "chroma-js";

const x11Colors = {
  aliceblue: "#f0f8ff",
  antiquewhite: "#faebd7",
  aqua: "#00ffff",
  aquamarine: "#7fffd4",
  azure: "#f0ffff",
  beige: "#f5f5dc",
  bisque: "#ffe4c4",
  black: "#000000",
  blanchedalmond: "#ffebcd",
  blue: "#0000ff",
  blueviolet: "#8a2be2",
  brown: "#a52a2a",
  burlywood: "#deb887",
  cadetblue: "#5f9ea0",
  chartreuse: "#7fff00",
  chocolate: "#d2691e",
  coral: "#ff7f50",
  cornflower: "#6495ed",
  cornflowerblue: "#6495ed",
  cornsilk: "#fff8dc",
  crimson: "#dc143c",
  cyan: "#00ffff",
  darkblue: "#00008b",
  darkcyan: "#008b8b",
  darkgoldenrod: "#b8860b",
  darkgray: "#a9a9a9",
  darkgreen: "#006400",
  darkgrey: "#a9a9a9",
  darkkhaki: "#bdb76b",
  darkmagenta: "#8b008b",
  darkolivegreen: "#556b2f",
  darkorange: "#ff8c00",
  darkorchid: "#9932cc",
  darkred: "#8b0000",
  darksalmon: "#e9967a",
  darkseagreen: "#8fbc8f",
  darkslateblue: "#483d8b",
  darkslategray: "#2f4f4f",
  darkslategrey: "#2f4f4f",
  darkturquoise: "#00ced1",
  darkviolet: "#9400d3",
  deeppink: "#ff1493",
  deepskyblue: "#00bfff",
  dimgray: "#696969",
  dimgrey: "#696969",
  dodgerblue: "#1e90ff",
  firebrick: "#b22222",
  floralwhite: "#fffaf0",
  forestgreen: "#228b22",
  fuchsia: "#ff00ff",
  gainsboro: "#dcdcdc",
  ghostwhite: "#f8f8ff",
  gold: "#ffd700",
  goldenrod: "#daa520",
  gray: "#808080",
  green: "#008000",
  greenyellow: "#adff2f",
  grey: "#808080",
  honeydew: "#f0fff0",
  hotpink: "#ff69b4",
  indianred: "#cd5c5c",
  indigo: "#4b0082",
  ivory: "#fffff0",
  khaki: "#f0e68c",
  laserlemon: "#ffff54",
  lavender: "#e6e6fa",
  lavenderblush: "#fff0f5",
  lawngreen: "#7cfc00",
  lemonchiffon: "#fffacd",
  lightblue: "#add8e6",
  lightcoral: "#f08080",
  lightcyan: "#e0ffff",
  lightgoldenrod: "#fafad2",
  lightgoldenrodyellow: "#fafad2",
  lightgray: "#d3d3d3",
  lightgreen: "#90ee90",
  lightgrey: "#d3d3d3",
  lightpink: "#ffb6c1",
  lightsalmon: "#ffa07a",
  lightseagreen: "#20b2aa",
  lightskyblue: "#87cefa",
  lightslategray: "#778899",
  lightslategrey: "#778899",
  lightsteelblue: "#b0c4de",
  lightyellow: "#ffffe0",
  lime: "#00ff00",
  limegreen: "#32cd32",
  linen: "#faf0e6",
  magenta: "#ff00ff",
  maroon: "#800000",
  maroon2: "#7f0000",
  maroon3: "#b03060",
  mediumaquamarine: "#66cdaa",
  mediumblue: "#0000cd",
  mediumorchid: "#ba55d3",
  mediumpurple: "#9370db",
  mediumseagreen: "#3cb371",
  mediumslateblue: "#7b68ee",
  mediumspringgreen: "#00fa9a",
  mediumturquoise: "#48d1cc",
  mediumvioletred: "#c71585",
  midnightblue: "#191970",
  mintcream: "#f5fffa",
  mistyrose: "#ffe4e1",
  moccasin: "#ffe4b5",
  navajowhite: "#ffdead",
  navy: "#000080",
  oldlace: "#fdf5e6",
  olive: "#808000",
  olivedrab: "#6b8e23",
  orange: "#ffa500",
  orangered: "#ff4500",
  orchid: "#da70d6",
  palegoldenrod: "#eee8aa",
  palegreen: "#98fb98",
  paleturquoise: "#afeeee",
  palevioletred: "#db7093",
  papayawhip: "#ffefd5",
  peachpuff: "#ffdab9",
  peru: "#cd853f",
  pink: "#ffc0cb",
  plum: "#dda0dd",
  powderblue: "#b0e0e6",
  purple: "#800080",
  purple2: "#7f007f",
  purple3: "#a020f0",
  rebeccapurple: "#663399",
  red: "#ff0000",
  rosybrown: "#bc8f8f",
  royalblue: "#4169e1",
  saddlebrown: "#8b4513",
  salmon: "#fa8072",
  sandybrown: "#f4a460",
  seagreen: "#2e8b57",
  seashell: "#fff5ee",
  sienna: "#a0522d",
  silver: "#c0c0c0",
  skyblue: "#87ceeb",
  slateblue: "#6a5acd",
  slategray: "#708090",
  slategrey: "#708090",
  snow: "#fffafa",
  springgreen: "#00ff7f",
  steelblue: "#4682b4",
  tan: "#d2b48c",
  teal: "#008080",
  thistle: "#d8bfd8",
  tomato: "#ff6347",
  turquoise: "#40e0d0",
  violet: "#ee82ee",
  wheat: "#f5deb3",
  white: "#ffffff",
  whitesmoke: "#f5f5f5",
  yellow: "#ffff00",
  yellowgreen: "#9acd32",
};

const x11ChromaColors = Object.values(x11Colors).map((x11Hex) =>
  chroma(x11Hex)
);

function getColorsInHslLuminosityRange(
  minLuminsoity: number,
  maxLuminosity: number,
  colors: chroma.Color[]
) {
  return colors.filter((color) => {
    const L = 100 * color.hsl()[2];
    return L >= minLuminsoity && L <= maxLuminosity;
  });
}

function removeRandomColor(colors: chroma.Color[]) {
  return colors.splice(Math.floor(Math.random() * colors.length), 1);
}

function cloneColors(colors: chroma.Color[]) {
  return colors.slice(0);
}

function updateSmallestBestScore(smallestBestScore: number, distance: number) {
  if (smallestBestScore === 0 || distance < smallestBestScore) {
    smallestBestScore = distance;
  }
  return smallestBestScore;
}

function getBetterColoursAndSmallestScore(
  colors: chroma.Color[],
  paletteColor: chroma.Color,
  bestScore: number
) {
  let smallestScore = 0;
  const betterColors: chroma.Color[] = [];
  colors.forEach(function (color) {
    const colorPaletteDistance = chroma.distance(color, paletteColor);
    if (colorPaletteDistance > bestScore) {
      smallestScore = updateSmallestBestScore(
        smallestScore,
        colorPaletteDistance
      );
      betterColors.push(color);
    }
  });
  return {
    betterColors,
    smallestScore,
  };
}

function getRandomStartingValues(x11ColorsInRange: chroma.Color[]) {
  const colors = cloneColors(x11ColorsInRange);
  const singleColorPalette = removeRandomColor(colors);
  return {
    colors,
    palette: singleColorPalette,
  };
}

function addRandomAvailableColorToPalette(
  palette: chroma.Color[],
  availableColors: chroma.Color[]
) {
  palette.push(removeRandomColor(availableColors)[0]);
}

function notEnoughColoursToFillPalette(
  availableColors: chroma.Color[],
  palette: chroma.Color[],
  numColors: number
) {
  return availableColors.length < numColors - palette.length;
}

function tryGetPaletteAndBestScore(
  x11ColorsInRange: chroma.Color[],
  numColors: number,
  bestScore: number
) {
  // eslint-disable-next-line prefer-const
  let { colors, palette } = getRandomStartingValues(x11ColorsInRange);
  let smallestBestScore = 0;
  while (palette.length < numColors) {
    const { betterColors, smallestScore } = getBetterColoursAndSmallestScore(
      colors,
      palette[palette.length - 1],
      bestScore
    );
    if (notEnoughColoursToFillPalette(betterColors, palette, numColors)) {
      break;
    }
    smallestBestScore = updateSmallestBestScore(
      smallestBestScore,
      smallestScore
    );
    addRandomAvailableColorToPalette(palette, betterColors);
    colors = betterColors;
  }
  const filledPalette = palette.length == numColors;
  if (filledPalette) {
    return {
      palette,
      smallestBestScore,
    };
  }
}

function getSortScore(color: chroma.Color) {
  const hsl = color.hsl();
  return hsl[0] / 360 + hsl[1] * 2 + hsl[2] * 5;
}

function sortPalette(palette: chroma.Color[]) {
  palette.sort(function (a, b) {
    const score_a = getSortScore(a);
    const score_b = getSortScore(b);
    return score_a - score_b;
  });
}

function get_palette(
  startingColors: chroma.Color[],
  numColors = 8,
  maxLoops = 10000
) {
  let bestScore = 0;
  let palette: chroma.Color[] = [];
  let generation = 0;
  let loop = 0;
  while (loop < maxLoops) {
    loop += 1;
    const paletteAndBestScore = tryGetPaletteAndBestScore(
      startingColors,
      numColors,
      bestScore
    );

    if (paletteAndBestScore) {
      generation += loop;
      loop = 0;
      bestScore = paletteAndBestScore.smallestBestScore;
      palette = paletteAndBestScore.palette;
    }
  }

  generation += loop;
  const score = Math.round(bestScore * 100) / 100;
  return {
    score,
    generation,
    palette,
  };
}

function getX11Palette(
  numColors = 8,
  minLuminosity = 5,
  maxLuminosity = 90,
  maxLoops = 10000
) {
  const x11ColorsInRange = getColorsInHslLuminosityRange(
    minLuminosity,
    maxLuminosity,
    x11ChromaColors
  );
  const result = get_palette(x11ColorsInRange, numColors, maxLoops);
  sortPalette(result.palette);
  return result;
}