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

colorMode()

説明文

colorMode() は p5.js がカラーデータを解釈する方法を変更します。デフォルトでは fill()、stroke()、background()、color() のパラメータは RGB カラーモデルを使用して 0〜255 の値で指定します。これは colorMode(RGB, 255) を設定することと同じです。 colorMode(HSB) を設定すると代わりにHSBカラーモデルを使用できます。デフォルトでは、これは colorMode(HSB, 360, 100, 100, 1) です。 HSL を使用することもできます。

注：既存のカラーデータは、それらが作成されたカラーモードを記憶しているため描画に影響を与えることなく好きなようにモードを変更できます。

構文

colorMode(mode, [max])

colorMode(mode, max1, max2, max3, [maxA])

パラメタ

mode
定数：赤、緑、青、色相、彩度、明るさ(または明度)に対応するRGB、HSB、HSL のいづれか
max
Number：すべての値の範囲(オプション)
max1
Number：現在のカラーモードに応じて、赤または色相の範囲
max2
Number：現在のカラーモードに応じて、緑または彩度の範囲
max3
Number：現在のカラーモードに応じて、青または明るさ/明度の範囲
maxA
Number：アルファの範囲(オプション )

例

function draw(){
  noStroke();
  colorMode(HSB, 100); // カラーモードをHSBに設定

  for(let i = 0; i < 100; i++){
    for(let j = 0; j < 100; j++){
      stroke(i, j, 100);
      point(i, j);  // 100 x 100 の正方形に点を描画する
    }
  }

  noFill() ;
  colorMode(RGB, 255, 255, 255, 1); // カラーモードをRGBに設定
  strokeWeight(4);
  stroke(255, 0, 10, 0.3);
  ellipse(40, 40, 50, 50);
  ellipse(50, 50, 40, 40);
}

実行結果

著作権

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