ライブラリの読み込み

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

<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」は、他にも色空間や色を使った処理を様々行えるようなので、さらに試してみようと思います。

他にできること

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