サマリとモチベーション🎨
p5.jsでKjetil Golidさん(Twitter: @kGolid ,Web: Generated Space)が個人的に作っていらっしゃるカラーパレット集Chrometomeを使うためのノウハウです。元がNode.js用なので非Node環境での使い方がググっても出てこず、10分くらいハマってしまったので、簡単な内容ですが、備忘録的にメモを残します。
使い方
1. import方法
ローカル環境やp5.js Web Editorの場合
index.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されるようになります。
2. ソース上での実装方法
ほとんどReadmeからのコピペですが、、、
// 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
-
#Chrometome (from @kGolid) sample01#creativecoding #generativeart #p5js https://t.co/3FSnElBw0Y pic.twitter.com/PRDHYajDaz
— Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) November 28, 2021 - https://openprocessing.org/sketch/1370077
-
- Advanced Example
-
#Chrometome (from @kGolid) sample02#creativecoding #generativeart #p5js https://t.co/LlwEYdRjN5 pic.twitter.com/ngb7QMK6Nh
— Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) November 28, 2021 - https://openprocessing.org/sketch/1370086
-
4. Tips
backgroundとstrokeが、たまに存在しない件の対策
get()で得られたObjectの中を見ると、たまにbackgroundやstrokeが存在しない場合があります。その時は
const palette = tome.get();
background(palette.background);
stroke(palette.stroke);
としてしまうと実行時にエラーが出ますので、回避したい場合は下記のように初期色をしておきましょう。
const palette = tome.get();
background(palette.background || 'white');
stroke(palette.stroke || 'black');
メモ
Chometome カラーパレット閲覧用サイト
Chometome GitHubリポジトリ