P5.js 日本語リファレンス(fill)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の fill関数を説明します。

fill()

説明文

図形の塗りつぶしに使用する色を設定します。たとえば fill(204, 102 , 0) を実行すると その後に描画されたすべての図形はオレンジ色で塗りつぶされます。この色は現在の colorMode() に応じて RGB または HSB で指定されます。 デフォルトのカラーモードは RGB で各値の範囲は 0〜255 です。デフォルトのアルファ範囲も 0〜255 です。

単一の文字列引数が指定されている場合 RGB、RGBA および16進数の CSS カラー文字列とすべての名前付きカラー文字列がサポートされます。このカラー文字列の場合、2番目の引数としてのアルファ値はサポートされていません。RGBA 形式を使用する必要があります。

p5.Color オブジェクトを提供して背景色を設定することもできます。

構文

fill(v1, v2, v3, [alpha])

fill(value)

fill(gray, [alpha])

fill(values)

fill(color)

パラメタ

• v1
  Number：現在の色の範囲を基準にした赤または色相の値

• v2
  Number：現在の色の範囲を基準にした緑または彩度の値

• v3
  Number：現在の色の範囲を基準にした青または明るさの値

• alpha
  Number：アルファ値(オプション)

• value
  String：カラー文字列

• gray
  Number：グレー値

• values
  Number[ ]：色の赤、緑、青、およびアルファ値を含む配列

• color
  p5.Color：塗りつぶしの色

例

function draw() {
    fill(51); // 濃いグレー値
    rect(20, 20, 60, 60);

    fill(255, 180, 100); // R、G、Bの整数値
    rect(100, 20, 60, 60); // 肌色で描画

    colorMode(HSB);  // カラーモードで HSB を設定
    fill(100, 204, 100); // H,S,Bの整数値
    rect(180, 20, 60, 60); // 緑色で描画

    fill('red'); // 名前付き SVG/CSS カラー文字列
    rect(260, 20, 60, 60); // 赤色で描画

    fill('#fae'); //  3桁の16進数で RGB を設定
    rect(20, 100, 60, 60); // 桃色で描画

    fill('#AA22FF'); // 6桁の16進数で RGB を設定
    rect(100, 100, 60, 60); // 濃い紫色で描画

    fill('rgb( 250,250,0 )'); // R、G、B の整数値を設定
    rect(180, 100, 60, 60); // 黄色で描画

    fill('rgba( 0,255,220,0.25 )'); // R、G、B、A の整数値を設定
    rect(260, 100, 60, 60); // エメラルド色で描画

    fill('rgb( 100%, 0%, 100% )'); // //パーセント RGB で設定
    rect(20, 180, 60, 60); // 紫色で描画

    fill('rgba( 100%, 100%, 0%, 0.1 )'); // //パーセント RGBA で設定
    rect(100, 180, 60, 60);  // 黄色で描画

    colorMode(RGB);
    fill(color(0, 0, 255)); // p5 Colorオブジェクトで設定
    rect(180, 180, 60, 60);  // 青色で描画
}

実行結果

著作権

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) に従います。