p5.js の様々な関数の使い方をおさらいし、作例コードを書くことで、自身の知識の定着を図っています。
今回は background() 関数の説明と、サンプルコードを交えて使い方をおさらいします。誤りや、勘違いがあるかもしれません。何かあれば、ご指摘をいただけると嬉しいです。
p5.js は、バージョン 1.5.0 を使用しています。
background() 関数の説明と使い方
background() | p5.js 公式リファレンス
説明
キャンバスの背景色をセットします。「背景」というレイヤーがあるわけではないので、指定色でキャンバスを塗りつぶすと考えたほうがよいでしょう。
background() 関数を書かない場合、デフォルトの背景は透明です。
background();
と書いた時の背景が透明という意味ではありません。こう書くとエラーになります。
書き方
background(c)
パラメータ
c：下記のいずれか
- p5 の Color オブジェクト
- 例：color(0, 126, 255, 102) （102 はアルファ値）や、 get() で取得した画面上の色 など。
- 文字列での色指定
- 例："brown"、 "#CC6633"、 "#007EFF66" （66 はアルファ値）、 "rgba(0, 126, 255, 0.4)" （0.4 はアルファ値）など。
- 数値によるグレースケールの指定
- colorMode() の指定によりますが、デフォルトでは 0 から 255 の範囲で、0 が黒、255 が白です。128 なら灰色、64 ならそれより黒っぽい灰色という感じです。
- 例：128, 96 という書き方でアルファ値（=96）を指定することも可能です。
- 3つの数値による色指定
- 3つの数値は、赤, 緑, 青、あるいは 色相, 彩度, 明度ですが、どちらになるかは colorMode() の指定によります。
- 例：128, 64, 32 colorMode(RGB, 255, 255, 255) なら茶色、colorMode(HSB, 360, 100, 100) なら濃緑。
- 4つ目の数値 128, 64, 32, 240 でアルファ値（=240）を指定することも可能です。
- 数値の配列による色指定
- 例：[0, 126, 255, 102] （102 がアルファ値） など。
- p5 の Image オブジェクト
- 読み込んだ画像や、createImage() で生成した画像。
- img, 128 等の書き方でアルファ値（=128）を指定することも可能です。
- キャンバスと異なるサイズの画像の場合、キャンバスサイズに合わせて拡大縮小されます。縦横比もキャンバスの縦横比に合わせられます。
background() を使った作例
background() を使ってアニメーションの作例を作ってみました。
描画している縦棒は、全て同じ灰色です。透明度を持たせた色違いの background() を重ね、その色を変化させることで、縦棒の色が変わったり、消えたり現れたりするように見せています。
それって背景色としての使い方じゃないのではないか？というご指摘があるかもしれませんが、全くその通りだと思います。
/**
* p5.js background() 関数の作例
* こんな背景色の使い方あり？
*
* @author @deconbatch
* @version 0.1
* @license CC0
* p5.js 1.5.0
* created 2023.02.05
*/
const w = 640;
const h = 480;
const cNum = 16;
const cpv = Array();
function setup() {
createCanvas(w, h);
pixelDensity(1);
colorMode(HSB, 360, 100, 100, 100);
rectMode(CENTER);
noStroke();
frameRate(24);
// 棒の位置とサイズを設定
for (let i = 0; i < cNum; i++) {
cpv[i] = createVector(
map(i, 0, cNum - 1, 0.1, 0.9) * w,
random(0.4, 0.6) * h,
random(5, 30)
);
}
// 描画の順番を変える
shuffle(cpv, true);
}
function draw() {
const t = frameCount * 0.01;
for (let i = 0; i < cNum; i++) {
// 先に灰色の棒を描く、棒は変化しない
fill(0, 0, 50, 100);
rect(cpv[i].x, cpv[i].y, cpv[i].z, cpv[i].z * 10);
// 色が変化する半透明のバックグラウンドを重ねる
background(
360 * noise(100, t),
100 * noise(200, t),
100 * noise(300, t),
10
);
}
}
