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

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

●chroma.js api docs!
　https://gka.github.io/chroma.js/
![chroma.js api docs](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e5960ec9-d3ab-d861-1f9a-2255032c1e4d.png)

●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 に以下を追記する形です。

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

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

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

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

```javascript
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行分の出力
![「1」の下にある3行分の出力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6098dea1-a3ca-df12-0b60-fbe483fddbad.png)

※ 上記のプログラム内で「2」の下にある3行分の出力
![「2」の下にある3行分の出力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/96ad6bba-c2cd-404b-f576-25c71fd5f487.png)

例えば、 `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()` は展開すると、以下のような内容が得られており、プログラムを実行するごとに値は変化しました。
![chroma.random()](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/32b073e0-e66a-be41-4e85-4cd6b2dc1e7c.png)

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

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

```javascript
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);
  }
}
```

キャンバスへの出力は以下となりました（※ ランダムな色を使う部分は、実行するごとに変化します）。
![キャンバスへの出力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/063eda9a-e4a3-6668-6efb-4ae1264baec3.png)

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

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

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

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