Catppuccin Colors by Cosine Similarity

catppuccin-colors-by-cosine-similarity.js

// Map of the world famous catppuccin color schema as vectors
// https://catppuccin.com
const catppuccinMocha = new Map([
  ['rosewater', [245, 224, 220]],
  ['flamingo', [242, 205, 205]],
  ['pink', [245, 194, 231]],
  ['mauve', [203, 166, 247]],
  ['red', [243, 139, 168]],
  ['maroon', [235, 160, 172]],
  ['peach', [250, 179, 135]],
  ['yellow', [249, 226, 175]],
  ['green', [166, 227, 161]],
  ['teal', [148, 226, 213]],
  ['sky', [137, 220, 235]],
  ['sapphire', [116, 199, 236]],
  ['blue', [137, 180, 250]],
  ['lavender', [180, 190, 254]],
  ['text', [205, 214, 244]],
  ['subtext1', [186, 194, 222]],
  ['subtext0', [166, 173, 200]],
  ['overlay2', [147, 153, 178]],
  ['overlay1', [127, 132, 156]],
  ['overlay0', [108, 112, 134]],
  ['surface2', [88, 91, 112]],
  ['surface1', [69, 71, 90]],
  ['surface0', [49, 50, 68]],
  ['base', [30, 30, 46]],
  ['mantle', [24, 24, 37]],
  ['crust', [17, 17, 27]],

  // Just for fun... to see the contrast
  ['white', [255, 255, 255 ]],
  ['black', [0, 0, 0 ]]
]);

// Calculate cosine similarity
function cosineSimilarity(vectorA, vectorB) {
  if (vectorA.length !== vectorB.length) {
    throw new Error('Length of vectorA is not equal to length of vectorB!')
  }

  let dotProduct = 0;
  let magnitudeA = 0;
  let magnitudeB = 0;

  for (let i = 0; i < vectorA.length; i++) {
    dotProduct += vectorA[i] * vectorB[i];
    magnitudeA += vectorA[i] * vectorA[i];
    magnitudeB += vectorB[i] * vectorB[i];
  }

  magnitudeA = Math.sqrt(magnitudeA);
  magnitudeB = Math.sqrt(magnitudeB);

  if (magnitudeA === 0 || magnitudeB === 0) {
    return 0;
  }

  return dotProduct / (magnitudeA * magnitudeB);
}


// Simple comparison function that returns a struct with a title and a result.
function similarity(a, b) {
  return {
    msg: `Cosine similarity of ${a} and ${b}`,
    score: cosineSimilarity(catppuccinMocha.get(a), catppuccinMocha.get(b))
  }
}

const results = [
  similarity('crust', 'mantle'),
  similarity('teal', 'mauve'),
  similarity('mauve', 'flamingo'),
  similarity('crust', 'crust'),
  similarity('flamingo', 'flamingo'),
  similarity('text', 'rosewater'),
  similarity('text', 'crust'),
  similarity('surface0', 'surface1'),
  similarity('surface1', 'surface2'),
  similarity('crust', 'rosewater'),
  similarity('white', 'black'),
]

// Sorty comparisons and print results...
results.sort((a, b) => {
  return b.score - a.score;
}).forEach(item => {
  console.log(`${item.msg}: ${item.score}`)
})