JavaScript で色情報を様々扱えそうな「Color.js」を p5.js で使ってみる

JavaScriptライブラリを検索したりする中で見かけた、以下の「Color.js」を試してみたという話です。

●Color.js: Let’s get serious about color • Color.js
　https://colorjs.io/

過去に似た位置付けのライブラリで「chroma.js」は試したことがあったのですが、今回、それと似た「Color.js」も気になって試してみました。

●「chroma.js user:youtoy」の検索結果 - Qiita
　https://qiita.com/search?q=chroma.js%20user%3Ayoutoy&sort=created

ライブラリの読み込み

ライブラリの読み込みは、以下から行えるようです。

<script src="https://colorjs.io/dist/color.global.js"></script>

p5.js Web Editor上で試す

それでは「Color.js」を p5.js Web Editor上で試してみます。

とりあえずは、簡単な事例として色の生成を試します。

色の指定方法

色の指定方法を見てみます。

例えば、公式の情報にあるように、以下のような指定ができるようです。

その他、色空間を変える処理などを公式ドキュメントで見つけつつ、以下を試してみました。

function setup() {
  createCanvas(400, 400);
  let color1 = new Color("lch(50% 80 30)");

  console.log(color1.coords);
  console.log(color1.toString({ format: "rgb" }));
  console.log(color1.toString({ format: "hex" }));
}

上記を実行した結果は、以下の通りです。

上記について、適当に検索して出てきた色空間の変換を行ってくれるサイトで、計算をしてみました。
そうすると、以下のように計算が合っていそうだということが確認できました。

●Convert colors from LCH to RGB | Atmos
　https://atmos.style/color-converter/lch-to-rgb

p5.js のキャンバスの背景色に使ってみる

上記で出力した内容を、p5.js のキャンバスの背景色に使ってみました。

先ほどのコードに少し手を加えた内容です。

function setup() {
  createCanvas(400, 400);
  let color1 = new Color("lch(50% 80 30)");

  console.log(color1.coords);
  console.log(color1.toString({ format: "rgb" }));

  const temp = color1.toString({ format: "hex" });
  console.log(temp);

  background(temp);
}

その結果、以下の結果を得ることができました。

「Color.js」は、他にも色空間や色を使った処理を様々行えるようなので、さらに試してみようと思います。

他にできること

以下を見てみると、他にも色同士の差分をとったり、ある色と別の色との間を補完する色を生成したり、他にもいくつかの色に関する処理が行えるようです。