chroma.js を使った HSB（HSV） と16進数カラーコードの変換やその他の処理を p5.js Web Editor上で試す

タイトル通りの内容を、以下の chroma.js を p5.js のプログラムの中で使う話です。

●chroma.js api docs!
　https://gka.github.io/chroma.js/

●gka/chroma.js: JavaScript library for all kinds of color manipulations
　https://github.com/gka/chroma.js

さっそく試してみる

ライブラリの読み込み

chroma.js が利用できるよう、CDN からライブラリを読み込む方法で試していきます。

公式ページの説明を見ていくと、 https://raw.githubusercontent.com/gka/chroma.js/master/chroma.min.js という URL が掲載されていたり、以下の CDN へのリンクがあったりしました。

●chroma-js - Libraries - cdnjs
　https://cdnjs.com/libraries/chroma-js

自分が試した時、 cdnjs.com を使ったほうがうまく動いたので、こちらで進めました。
開発・実行環境は p5.js Web Editor を使っているので、具体的には、p5.js Web Editor上の index.html に以下を追記する形です。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js"></script>  

いくつかの処理結果をログに書き出してみる

入出力をざっくり理解するため、まずはログで処理結果を書き出すという、単純なやり方で挙動を確かめてみます。具体的には、以下を使ってみました。

• hsv() での入出力
• hex() での入出力
• brighten() を使った出力
• random() を使った出力

sketch.js で書いた内容は以下のとおりです。

function setup() {
  createCanvas(320, 550);
  background(220);

  noLoop();

  // 1
  console.log(chroma("black").hsv(), chroma("white").hex());
  console.log(chroma("red").hsv(), chroma("blue").hex());
  console.log(chroma.hex("#0000ff").hsv(), chroma.hsv(204.1, 1).hex());
  
  // 2
  console.log(
    chroma("blue").brighten().hex(),
    chroma("blue").brighten(2).hsv()
  );
  console.log(chroma.random());
}

function draw() {}

上記を実行すると、コンソール出力として以下が得られました。

※ 上記のプログラム内で「1」の下にある3行分の出力

※ 上記のプログラム内で「2」の下にある3行分の出力

例えば、 chroma("black").hsv() は HSV で「H： NaN、 S： 0、 V: 0」となっていたり、 chroma("blue").hex() は HEX で「#0000ff」といった結果などが得られています。
また、 chroma("blue").brighten().hex() や chroma("blue").brighten(2).hsv() は、元の青の色が「#7142ff」や「H： 266.79...、 S： 0.547...、 V: 1」といった値に変化して出力されています。

chroma.random() は展開すると、以下のような内容が得られており、プログラムを実行するごとに値は変化しました。

それと、色を指定する部分は、色の名前を "blue" などと書く以外にも、 chroma.hex("#0000ff") や chroma.hsv(204.1, 1) といった書き方ができるようです。

色を描画してみる

今度は、p5.js のキャンバス上に描画を行ってみます。
以下のようなプログラムを作って、実行してみました。先ほど試していた処理以外に、 darken() ＜ saturate() 、 desaturate() の 3つも使ってみています。

function setup() {
  createCanvas(320, 550);
  background(220);

  noLoop();
}

function draw() {
  for (let i = 0; i < 3; i++) {
    fill(chroma("blue").brighten(i).hex());
    rect(100 * i, 0, 80, 80);

    fill(chroma("blue").darken(i).hex());
    rect(100 * i, 100, 80, 80);

    fill(chroma.random().hex());
    rect(100 * i, 100 * 2, 80, 80);

    fill(chroma("blue").saturate(i).hex());
    rect(100 * i, 100 * 3, 80, 80);

    fill(chroma("blue").desaturate(i).hex());
    rect(100 * i, 100 * 4, 80, 80);
  }
}

キャンバスへの出力は以下となりました（※ ランダムな色を使う部分は、実行するごとに変化します）。

saturate() については、 "blue" がもともと saturate が上限値になっていて変化していない、という感じになっていそうでした。

おわりに

今回、chroma.js を使った軽いお試しをしてみました。

冒頭にも書いていた以下の公式サイト上には、まだまだ様々な処理の説明が書いてあるので、便利に使えそうなものを探っていこうと思います。

●chroma.js api docs!
　https://gka.github.io/chroma.js/