p5jsでの塗りつぶしについての説明です。背景全体を塗りつぶす方法と図形を塗りつぶす方法を説明します。
背景を塗りつぶす
背景を塗りつぶすにはbackground()を使います。デフォルトの背景は透明です。draw()関数の先頭でbackground()を呼び出すとフレーム毎に表示内容がクリアされます。逆にsetup()関数でしかbackground()を呼び出していないとフレーム毎の描画が消されずに残っていきます。背景に画像を指定することもできます。
background()の構文は複数あります。
RGB値指定
RGB値で指定します。オプションとしてアルファ値を指定することもできます。
構文
background(R,G,B,[alpha]);
R,G,Bのそれぞれ赤、緑、青の色要素を0から255の数値で指定します。alphaは透明度の指定で省略可能です。0から255の範囲で指定可能で0に近いほど透明になります。0を指定すると表示されなくなります。
サンプル
function draw() {
background(255,0,0);
}
HSB値指定
HSB値で色を指定します。HSB値の指定は事前にカラーモードをHSBにしてからbackground()を呼び出します
構文
background(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);
background(255, 204, 100);
}
文字列指定
文字列を使って色を指定する方法です。文字列の記述方法が複数あります
CSSの色名文字列で指定する
background('red')
3文字の16進数値で指定する
background(‘#f00’)
6文字の16進数値で指定する
background('#FF0000')
10進数値のRGB値で指定する
background('rgb(255,0,0)')
10進数値のRGBA値で指定する
backgound('rgba(255,0,0,100)')
パーセント指定のRGB値で指定する
background('rgb(100%,0%,0%)')
パーセント指定のRGBA値で指定する
background('rgba(100%,0%,0%、20%)')
グレースケール指定
グレースケールで指定します。
構文
background(G)
Gに0～255の数値を一つ指定します。0に近づくほど黒くなり、255に近づくほど白くなっていきます。
Colorオブジェクト指定
p5jsのColorオブジェクトで指定する方法です
構文
background(C)
CにColorオブジェクトを指定します
サンプル
function draw() {
let c= color(255,0,0);
background(c);
}
画像指定
背景に画像を描画する方法です。
構文
background(image)
imageはImageオブジェクトです。loadImage()またはcreateImage()で作成されたImageオブジェクトを指定します。
図形を塗りつぶす
図形を描画するときの塗りつぶしを指定する方法です。
塗りつぶしの色を指定するにはfill()を呼び出します。塗りつぶし無しにしたい場合はnoFill()を呼び出します。fill(),noFill()は一度呼び出すと別の状態が設定されるまで継続されます。draw()関数が継続して呼び出される場合、一回の処理が終了した後も状態が保持されています。
塗りつぶし無しの指定
塗りつぶし無しの指定はnoFill()を使います。noFill()とnoStroke()を指定すると画面に何も表示されません。
構文
noFill()
サンプル
function setup() {
createCanvas(100, 100);
background(220);
noLoop();
}
function draw() {
rect(10,10,60,60);
noFill();
rect(20,20,60,60);
}
塗りつぶし色の指定
塗りつぶし色の指定はfill()を使います。
fill()の引数として色を指定します。色の指定方法は複数の種類があります。
RGB値指定
RGB値で指定します。オプションとしてアルファ値を指定することもできます。
構文
fill(R,G,B,[alpha]);
R,G,Bのそれぞれ赤、緑、青の色要素を0から255の数値で指定します。
alphaは透明度の指定で省略可能です。0から255の範囲で指定可能で0に近いほど透明になります。0を指定すると表示されなくなります。
サンプル
function draw() {
fill(255,0,0);
rect(20,20,60,60);
}
HSB値指定
HSB値で色を指定します。
HSB値の指定は事前にカラーモードをHSBにしてからfill()を呼び出します
構文
fill(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);
fill(255,204,100);
rect(20,20,60,60);
}
文字列指定
文字列を使って色を指定する方法です。文字列の記述方法が複数あります
CSSの色名文字列で指定する
fill(‘red’)
3文字の16進数値で指定する
fill(‘#f00’)
6文字の16進数値で指定する
fill(‘#FF0000’)
10進数値のRGB値で指定する
fill(‘rgb(255,0,0)’)
10進数値のRGBA値で指定する
fill(‘rgba(255,0,0,100)’)
パーセント指定のRGB値で指定する
fill(‘rgb(100%,0%,0%)’)
パーセント指定のRGBA値で指定する
fill(‘rgba(100%,0%,0%、20%)’)
グレースケール指定
グレースケールで指定します。
構文
fill(G)
Gに0～255の数値を一つ指定します。0に近づくほど黒くなり、255に近づくほど白くなっていきます。
Colorオブジェクト指定
p5jsのColorオブジェクトで指定する方法です
構文
fill(C)
CにColorオブジェクトを指定します
サンプル
function draw() {
let c=color(255,0,0);
fill(c);
rect(20,20,60,60);
}
まとめ
今回は背景色の指定方法と図形の塗りつぶし方法を説明しました。
