p5.js の様々な関数の使い方をおさらいし、作例コードを書くことで、自身の知識の定着を図っています。
今回は colorMode() 関数の説明を行い、サンプルコードを書いて使い方のおさらいをします。誤りや、勘違いがあるかもしれません。何かあれば、ご指摘をいただけると嬉しいです。
p5.js は、バージョン 1.5.0 を使用しています。
colorMode() 関数の説明と使い方
colorMode() | p5.js 公式リファレンス
説明
fill() や stroke() などに指定する各パラメータの意味を決める、あるいは変える関数です。難しく言うと、色として指定された数値等のデータをどう解釈するかを設定する関数です。
デフォルトの設定（colorMode() 関数を書かない場合）は、0 から 255 の数値で表される RGB カラーモデルになります。これは、colorMode(RGB, 255) と書いた場合と同じことになります。
colorMode(HSB) と書くと、RGB ではなく、HSB カラーモデルを使う設定となり、colorMode(HSB, 360, 100, 100, 1) と同じ設定です。
この設定は途中で変更することもできます。変更前に生成したカラーオブジェクトは、生成時の設定を記憶しており、設定変更の影響は受けません。
書き方
colorMode(mode, [max])
colorMode(mode, max1, max2, max3, [maxA])
パラメータ
mode：下記のいずれか
- RGB
- RGB カラーモデルを指定、RGB は Red(赤)/Green(緑)/Blue(青) の頭文字です。
- Web カラーの指定でおなじみの方式です。RGB 形式で提供されている既存のカラーパレットも多いので、それらを利用する際に指定するとよいでしょう。
- HSB
- HSB カラーモデルを指定、HSB は Hue(色相)/Saturation(彩度)/Brightness(明度) の頭文字です。
- 色相は 赤→黄色→緑→水色→青→紫 と変化、彩度は 薄い色→濃い色、明度は 暗→明 と変化します。
- 同じ色相で色をもっと鮮やかにとか、薄くて暗めのシックな色調に統一していろいろな色を使うなどのコントロールがしやすいです。
- HSL
- HSL カラーモデルを指定、HSB は Hue(色相)/Saturation(彩度)/Lightness(輝度) の頭文字です。
- HSL は使ったことがなく、よく知りません。
- 輝度はどうも 黒っぽい→白っぽい という変化のようです。
max：全ての項目の数値範囲の最大値を一括で指定したい場合はこの書き方になります。
max1：RGB の場合は「赤」、HSB/HSL の場合は「色相」項目の数値範囲の最大値を指定します。
max2：RGB の場合は「緑」、HSB/HSL の場合は「彩度」項目の数値範囲の最大値を指定します。
max3：RGB の場合は「青」、HSB の場合は「明度」、HSL の場合は「輝度」項目の数値範囲の最大値を指定します。
maxA：「透明度」項目の数値範囲の最大値を指定します。
例
background(240, 90, 80) としたとき
colorMode(RGB, 255, 255, 255) の場合
赤 240、緑 90、青 80、パーセンテージでいうと赤 94%、緑 35%、青 31% という意味です。
colorMode(HSB, 360, 100, 100) の場合
色相 240、彩度 90、明度 80 という意味です。
彩度と明度はパーセンテージで直感的に理解しやすいように 0 - 100 の範囲とするとよいでしょう。色相は 0 - 360 にして、0 = 赤、 120 = 緑、 240 = 青 と光の三原色で 3等分した色の環（360 も赤になる）を想像すると、色の指定がしやすくなると思います。
colorMode(HSL, 360, 100, 100) の場合
色相 240、彩度 90、輝度 80 という意味です。
輝度は黒っぽい→白っぽいとなり、50% のときが最も原色に近くなります。この例だと HSB とくらべて白っぽくなっているのがわかります。
p5.js 公式リファレンスのコード例の補足
noStroke();
colorMode(RGB, 100);
for (let i = 0; i < 100; i++) {
for (let j = 0; j < 100; j++) {
stroke(i, j, 0);
point(i, j);
}
}
RGB カラーモデルで、各項目の数値範囲は 0 から 100 を設定しています。
RGB カラーモデルなので stroke(R, G, B) となり、青は 0 固定、赤と緑だけ変化させ、それを point(i, j) してるので、x 方向が赤、y方向が緑の変化となっています。
noStroke();
colorMode(HSB, 100);
for (let i = 0; i < 100; i++) {
for (let j = 0; j < 100; j++) {
stroke(i, j, 100);
point(i, j);
}
}
HSB カラーモデルで、各項目の数値範囲は 0 から 100 を設定しています。
RGB の例と同じように考えて、x 方向が色相、y 方向が彩度の変化となっています。
colorMode(RGB, 255);
let c = color(127, 255, 0);
colorMode(RGB, 1);
let myColor = c._getRed();
text(myColor, 10, 10, 80, 80);
コード中で colorMode() を変えることなんてほぼ無いと思うので、あまり気にしなくてよいと思います。
colorMode() の設定を途中で変えても、その前に作った色に影響はありませんよ、ということを示したコード例です。
127 / 255 = myColor / 1 で、 myColor は 0.49803921568627 になりますね、ということです。
noFill();
colorMode(RGB, 255, 255, 255, 1);
background(255);
strokeWeight(4);
stroke(255, 0, 10, 0.3);
ellipse(40, 40, 50, 50);
ellipse(50, 50, 40, 40);
透明度をつけた円を重ねたから、重なったところが濃くなってるでしょう？というコードです。
colorMode() を使った作例
「コード中で colorMode() を変えることなんてほぼ無い」と言っておきながら、colorMode() を途中で変えた静止画の作例を作りました。
左から RGB/HSB/HSL を指定した結果です。雰囲気の違いが出ていますでしょうか。
/**
* p5.js colorMode() 関数の作例
* 複数の colorMode() を切り替える
*
* @author @deconbatch
* @version 0.1
* @license CC0
* p5.js 1.5.0
* created 2023.02.20
*/
const w = 640;
const h = 360;
function setup() {
createCanvas(w, h);
pixelDensity(1);
noStroke();
background(240);
for (let x = 0; x < w; x += 20) {
if (x < w * 0.33) {
colorMode(RGB, 255, 255, 255);
} else if (x < w * 0.66) {
colorMode(HSB, 255, 255, 255);
} else {
colorMode(HSL, 255, 255, 255);
}
for (let y = 0; y < h; y += 5) {
fill(
(510 * noise(10, x, y * 0.005)) % 255,
255 * noise(20, x, y * 0.005),
255 * noise(30, x, y * 0.005)
);
rect(x + sin(y * 0.1), y, 10, 5);
}
}
}
あと書き
聞くところによると HSL は人がより自然に感じるカラーモデルだそうです。
Processing には ver 4.0 時点でまだ HSL が存在せず、使うことができません。普段 Processing を主に使っており、p5.js で HSL が使えることを今回初めて知りました。今後試していきたいと思います。
