p5.jsでカラーパレット集"Chromotome"を使う

# サマリとモチベーション🎨
`p5.js`でKjetil Golidさん([Twitter: @kGolid](https://twitter.com/kGolid) ,[Web: Generated Space](https://generated.space/))が個人的に作っていらっしゃるカラーパレット集[Chrometome](https://kgolid.github.io/chromotome-site/)を使うためのノウハウです。元が`Node.js`用なので非`Node`環境での使い方がググっても出てこず、10分くらいハマってしまったので、簡単な内容ですが、備忘録的にメモを残します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/79922d01-3a4d-f8ce-c32a-1f60bd698dc7.png)


# 使い方
## 1. import方法
### ローカル環境や`p5.js Web Editor`の場合
`index.html`にて、スケッチを読み込む前に、以下を挿入します。

```HTML
<script src="https://unpkg.com/chromotome@1.19.1/dist/index.umd.js"></script>
```

### `OpenProcessing`の場合
画面右側の`Libraries`のパネル上で`+Add Custom Library`を押して、
`https://unpkg.com/chromotome@1.19.1/dist/index.umd.js`
を入力してください。こんな感じで表示され、importされるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/805e48ff-1550-a4ec-f376-4e80e578c1d4.png)

## 2. ソース上での実装方法
ほとんどReadmeからのコピペですが、、、

``` javascript
// globalなインスタンス`chromotome`が定義されています。
const tome = chromotome;

// .get()すると、ランダムにパレットを取得できます。.getRandom()でもOK。
let palette = tome.get();
// palette = tome.getRandom(); // also works.

// パレットは名前指定でもOK!
// パレット名称は `https://kgolid.github.io/chromotome-site/` を参照するか
// tome.getNames(); // するとパレットの名前一覧を取得できます。
palette = tome.get('miradors'); 

// パレットobjectには、通常 `stroke`と`background`、そして実際のパレットである`colors`が含まれています。
console.log(palette.colors); // --> ['#ff6936', '#fddc3f', '#0075ca', '#00bb70']
console.log(palette.stroke); // --> '#ffffff'
console.log(palette.background); // --> '#020202'
```

## 3. 実装例
- Basic Example
  - <blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/Chrometome?src=hash&amp;ref_src=twsrc%5Etfw">#Chrometome</a> (from <a href="https://twitter.com/kGolid?ref_src=twsrc%5Etfw">@kGolid</a>) sample01<a href="https://twitter.com/hashtag/creativecoding?src=hash&amp;ref_src=twsrc%5Etfw">#creativecoding</a> <a href="https://twitter.com/hashtag/generativeart?src=hash&amp;ref_src=twsrc%5Etfw">#generativeart</a> <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> <a href="https://t.co/3FSnElBw0Y">https://t.co/3FSnElBw0Y</a> <a href="https://t.co/PRDHYajDaz">pic.twitter.com/PRDHYajDaz</a></p>&mdash; Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) <a href="https://twitter.com/tetunori_lego/status/1464782074632552449?ref_src=twsrc%5Etfw">November 28, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  - https://openprocessing.org/sketch/1370077
- Advanced Example
  - <blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/Chrometome?src=hash&amp;ref_src=twsrc%5Etfw">#Chrometome</a> (from <a href="https://twitter.com/kGolid?ref_src=twsrc%5Etfw">@kGolid</a>) sample02<a href="https://twitter.com/hashtag/creativecoding?src=hash&amp;ref_src=twsrc%5Etfw">#creativecoding</a> <a href="https://twitter.com/hashtag/generativeart?src=hash&amp;ref_src=twsrc%5Etfw">#generativeart</a> <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> <a href="https://t.co/LlwEYdRjN5">https://t.co/LlwEYdRjN5</a> <a href="https://t.co/ngb7QMK6Nh">pic.twitter.com/ngb7QMK6Nh</a></p>&mdash; Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) <a href="https://twitter.com/tetunori_lego/status/1464782208795693061?ref_src=twsrc%5Etfw">November 28, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  - https://openprocessing.org/sketch/1370086

## 4. Tips
### `background`と`stroke`が、たまに存在しない件の対策
`get()`で得られたObjectの中を見ると、たまに`background`や`stroke`が存在しない場合があります。その時は

``` javascript
const palette = tome.get();
background(palette.background);
stroke(palette.stroke);
```

としてしまうと実行時にエラーが出ますので、回避したい場合は下記のように初期色をしておきましょう。

``` javascript
const palette = tome.get();
background(palette.background || 'white');
stroke(palette.stroke || 'black');
```


# メモ
## Chometome カラーパレット閲覧用サイト
https://kgolid.github.io/chromotome-site/
## Chometome GitHubリポジトリ
https://github.com/kgolid/chromotome