p5jsで色を扱う方法です。stroke(),fill()等で色を指定する方法として何パターンか用意されています。また、Colorオブジェクトを使って色を管理することができます。
カラーモード
色指定をRGB、HSBのどちらで行うか指定できます。カラーモードの指定はcolorMode()関数を使います。デフォルトではRGBカラーモードになっています。
構文
colorMode(mode,[max]) colorMode(mode,max1,max2,max3,[maxA])
mode:RGB,HSBの定数を指定できます。max:指定値の範囲を指定します。デフォルトは255です
- max1:カラーモードに応じて赤または色相の範囲を指定します。
- max2:カラーモードに応じて緑または彩度の範囲を指定します。
- max3:カラーモードに応じて青または明度の範囲を指定します。
- maxA:アルファ値の範囲を指定します。
サンプル
function draw() {
colorMode(RGB,255);
fill(color(100,0,0));
rect(20,20,60,60);
colorMode(RGB,100);
fill(color(100,0,0));
rect(90,20,60,60);
}
Colorオブジェクトと色指定
p5jsでは色情報を管理するColorオブジェクトが用意されています。Colorオブジェクトは構築時のカラーモードと範囲を格納しています。saturation()等の色情報を取得する関数が呼ばれた時に現在のカラーモードに合わせた値を返します。
Colorオブジェクトの作成
Colorオブジェクトの作成するにはcolor()を呼び出します。パラメータは現在のcolorMode()に応じたRGBまたはHSB値として解釈されます。デフォルトのモードは0から255までのRGB値です。1つの値しか与えられていない場合、それはグレースケール値として解釈されます。2番目の値を追加すると、アルファ透明度として扱います。3つの値が指定されると、それらはRGBまたはHSB値として解釈されます。
4番目の値を追加すると、アルファ透明度が適用されます。
単一の文字列引数を指定すると、RGB、RGBA、およびHex CSSカラー文字列とすべての名前付きカラー文字列がサポートされます。この場合、2番目の引数としての英数字値はサポートされていません。RGBA形式を使用する必要があります。
ここで使用される色指定はstroke(),fill()等の色情報を引数にとる関数でも同様の記述ができます。
RGB値指定
RGB値で指定します。オプションとしてアルファ値を指定することもできます。
構文
let c = color(R,G,B,[alpha]);
R,G,Bのそれぞれ赤、緑、青の色要素を0から255の数値で指定します。alphaは透明度の指定で省略可能です。0から255の範囲で指定可能で0に近いほど透明になります。0を指定すると表示されなくなります。
サンプル
function draw() {
let c=color(255,0,0);
fill(c)
rect(20,20,60,60);
}
HSB値指定
HSB値で色を指定します。HSB値の指定は事前にカラーモードをHSBにしてからfill()を呼び出します
構文
color(H,S,B,[alpha]);
H,S,Bのそれぞれ色相（Hue）、彩度(Saturation)、明度(Brightness)の色要素を0から255の数値で指定します。alpha値についてはRGB指定と同じです。事前にcolorMode(HSB)を呼び出してカラーモードをHSBにしておきます。一度カラーモードをHSBにすると以降の色指定はHSBになるのでRGB指定に戻したい場合はcolorMode(RGB)を呼び出します。
サンプル
function draw() {
colorMode(HSB);
let c=color(255,204,100);
fill(c);
rect(20,20,60,60);
}
文字列指定
文字列を使って色を指定する方法です。文字列の記述方法が複数あります
CSSの色名文字列で指定する
color(‘red’)
3文字の16進数値で指定する
color (‘#f00’)
6文字の16進数値で指定する
color (‘#FF0000’)
10進数値のRGB値で指定する
color (‘rgb(255,0,0)’)
10進数値のRGBA値で指定する
color (‘rgba(255,0,0,100)’)
パーセント指定のRGB値で指定する
color (‘rgb(100%,0%,0%)’)
パーセント指定のRGBA値で指定する
color (‘rgba(100%,0%,0%、20%)’)
グレースケール指定
グレースケールで指定します。
構文
color(G)
Gに0～255の数値を一つ指定します。0に近づくほど黒くなり、255に近づくほど白くなっていきます。
色情報の取得
色情報の各要素を取得する関数が用意されています
赤色情報の取得
red(color)
青色情報の取得
blue(color)
緑色情報の取得
green(color)
アルファ透過度の取得
alpha(color)
色相の取得
hue(color)
彩度の取得
saturation(color)
明るさの取得
lightness(color)
輝度の取得
brightness(color)
中間色の計算
p5jsでは２つの色を混ぜ合わせた色を計算することができます。lerpColor()を使います。
lerpColor(c1,c2,amt)
c1に一つ目の色、c2に二つ目の色を指定します。amtにc1とc2の間の補完量を指定します。0から1の間の数値を指定し、0.1がc1に一番近く0.5はちょうど中間の色になります
サンプル
function setup() {
createCanvas(300, 100);
background(220);
noLoop();
}
function draw() {
colorMode(RGB,255);
let c1 = color(255,255,255);
let c2 = color(0,0,0);
let c3 = lerpColor(c1,c2,0.5);
fill(c1);
rect(20,20,60,60);
fill(c3);
rect(160,20,60,60);
fill(c2);
rect(90,20,60,60);
}
まとめ
今回は色に関することを説明しました
- カラーモードについて
- Colorオブジェクトの生成方法
- 色の各要素を取得する方法について
- 中間色を計算する方法について
