JavaScript 文字列からHEX

Question

ランダムに色を設定したい場合

var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);

上記でできます
文字列から変動しないHEXを割り当てるロジックを考えたいです
たとえば
str="aaa";
aaaはユーザーが自由に設定ができるとします(設定される文字列の想定は無限)
その文字列から変動しないHEXを割り当てたいです
aaa→#000000
bbb→#FFFFFFなどユーザーが入力した文字によってHEXを与え、それはその文字である限り変動しないということです
何か考え付く方いらっしゃいましたら教えていただけないでしょうか

Answer 1

文字列から SHA-1 などのダイジェスト値を計算して、その上位か下位3バイトを利用するのはどうでしょうか。

SubtleCrypto.digest()

Comments

[ptaxrt]

Firefoxで

const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';

async function digestMessage(message) {
const encoder = new TextEncoder();
const data = encoder.encode(message);
const hash = await crypto.subtle.digest('SHA-256', data);
return hash;
}

const digestBuffer = await digestMessage(text);
console.log(digestBuffer.byteLength);

上記実行したところawait is only valid in async functions, async generators and modulesというエラーが出てるのですがawait is only valid in async functions, async generators and modulesについて調べましたら、asyncがないのに、awaitを使用しているためという内容でしたが、asyncはあります
このエラーはどうすれば回避できるのでしょうか？

[int32_t]

最後の2行も async function にする必要があります。

Answer 2

async/awaitが絡むのでちょっと面倒ですがこんなかんじ

const getColor=async(txt)=>{
  const encoder = new TextEncoder();
  const data = encoder.encode(txt);
  const hash = await crypto.subtle.digest('SHA-256', data);
  const arr = Array.from(new Uint8Array(hash));
  const hex = arr.map(b => b.toString(16).padStart(2, '0')).join('');
  const color = '#'+hex.substr(-6)
  return color;
}
window.addEventListener('DOMContentLoaded', async()=>{
  console.log(await getColor('aaa'));
  console.log(await getColor('bbb'));
});