このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の background関数を説明します。
background()
説明文
background() は p5.js キャンバスの背景に使用される色を設定します。デフォルトの背景は透明です。この関数は通常 draw() 内で使用され各フレームの先頭で表示ウィンドウをクリアしますが、setup() 内で使用してアニメーションの最初のフレームに背景を設定したり、背景を1回だけ設定する必要がある場合に使用したりできます。
色は現在の colorMode() に応じて RGB 、HSB、HSL で指定します。デフォルトは RGB で各値の範囲は0〜255です。デフォルトのアルファ範囲も0〜255です。
単一の文字列引数が指定されている場合 RGB、RGBA および16進数の CSS カラー文字列とすべての名前付きカラー文字列がサポートされます。このカラー文字列の場合、2番目の引数としてのアルファ値はサポートされていません。RGBA 形式を使用する必要があります。
p5.Color オブジェクトを使用して背景色を設定することもできます。
背景画像を設定するために p5.Image を使用することもできます。
構文
background(color)
background(colorstring, [a])
background(gray, [a])
background(v1, v2, v3, [a])
background(values)
background(image, [a])
パラメタ
-
color
p5.Color：color() によって作成された値 -
colorstring
String：色文字列。可能な形式には RGB、RGBA、パーセントRGB、パーセントRGBA、3桁の16進数、6桁の16進数が含まれます -
a
Number：現在の色の範囲を基準にした背景の不透明度(デフォルトは0〜255)(オプション) -
gray
Number：白と黒の間の値を指定します -
v1
Number：赤または色相値(現在のカラーモードに依存) -
v2
Number：緑または彩度の値(現在のカラーモードに依存) -
v3
Number：青または明るさの値(現在のカラーモードに依存) -
values
Number[ ]：色の赤、緑、青、アルファ成分を含む配列 -
image
p5.Image：loadImage() またはcreateImage() で作成され、背景として設定する画像(スケッチウィンドウと同じサイズである必要があります)
例
background(51); //グレースケール整数値
background(255, 204, 0); // R、G、Bの整数値
colorMode(HSB); // カラーモードで HSB を設定
background(255, 204, 100);
background('red'); // 名前付き SVG/CSS カラー文字列
colorMode(RGB); // カラーモードで RGB を設定
background('#fae'); // 3桁の16進数で RGB を設定
background('#222222'); // 6桁の16進数で RGB を設定
background('rgb(0, 255, 0)'); // R、G、B の整数値を設定
background('rgba(0, 255, 0, 0.25)'); // R、G、B、A の整数値を設定
background('rgb(100％, 0％, 10％)'); //パーセント RGB で設定
background('rgba(100％, 0％, 100％, 0.5)'); //パーセント RGBA で設定
background(color(0, 0, 255)); // p5 Colorオブジェクトで設定
著作権
p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
ライセンス
Creative Commons(CC BY-NC-SA 4.0) に従います。