はじめに
lil.GUI
これの色指定方法についての自分用メモ
指定方法
まず、コンフィグを用意するにあたり、次のバリエーションを設けた。
const config = {
col0:"#fff",
col1:0xaa00ff,
col2:{r:100,g:200,b:50},
col3:{r:0.5, g:0, b:1},
col4:`rgb(170, 0, 128)`,
col5:[255, 128, 0] // よくわかんないけど第一成分を1より大きくするとバグる。
// 255を指定した場合でも256とかするとバグる。おそらくオーバーフローかなんか。
// 適切に設定しましょう。
}
- col0: #ではじまる3文字ないし6文字の色指定
- col1: 0xで始まる16進数表示
- col2: r,g,bによるオブジェクト表示（0～255指定）
- col3: r,g,bによるオブジェクト表示（0～1指定）
- col4: 文字列でのrgbによる列挙表示
- col5: 長さ3の配列。0～255指定
lilの設定
これらに対し次のようにlil.GUIを設定する。
gui.addColor(config, "col0"); // #~~~~~~が返るよ。
gui.addColor(config, "col1"); // 整数が返るよ。toString(16)で色になるよ。
gui.addColor(config, "col2", 255); // 255を付けないと0～1にされるよ。
gui.addColor(config, "col3"); // そのままだと0～1だよ
gui.addColor(config, "col4"); // #~~~~~~が返るよ。
gui.addColor(config, "col5", 255); // 255にした場合は0～255の指定になる。
3番目と6番目はターゲット指定の後で255を指定していることに注意する。
それぞれの場合の戻り値
このとき、戻り値はどうなるかということ。コードを見ると分かるが、キーを押すことでそれぞれの戻り値がコンソール出力されるようになっている。お試しあれ。
col0について（色の文字指定）
コンフィグをどういじっても#表記の文字列が返る。たとえば#ff3247なら普通に「"#ff3247"」という文字列が返る。p5の場合、これをfillやstrokeの引数として直接使えるし、cssでも使える。
col1について（色の16進数指定）
この場合16進数の整数値が返る。24bitの透明度無しのrgbの値である。0～255に直すには、こうする：
const n = config.col1;
const redValue = (n >> 16);
const blueValue = (n >> 8) & 255;
const greenValue = n & 255;
これでrgbになる。
col2について（オブジェクト指定0～255, 登録時255を登録）
この場合、全く同じr,g,bをメンバーとするオブジェクトが返る。lilに登録する際255を指定したので0～255で変える。255を指定しないと、デフォルトの場合は0～1にされるので注意する。0～255かどうかなんてコンパイラは知らないので、教えてあげないと。
col3について（オブジェク指定0～1）
先ほどと同様に「{r,g,b}」が返るが、指定が無いので0～1で返る。
col4について
css文字列がそのまま返るかと思いきや...実はcol0と同じものが返る。要は文字列なら同じということだろう。ただcssにあるような複雑な指定方法（oklchとかいろいろ）は使えず、あくまでrgbでの列挙などに限られる。
col5について（配列）
255を指定すれば、0～255の数からなる長さ3の配列として返るようになる。なお、指定しない場合0～1で返る。常に配列の形で返るので、glslなどで使う場合に便利そうである。というか他の形式だと無理だろこれ。なおこれらの1や255より大きな値が配列内に一つでも入ってると表示がバグる。たとえば255でやるなら256などそれより大きな値を入れないようにしよう。
おわりに
そんな感じなので、用途に応じて使い分けましょう。ここまでお読みいただき感謝。