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

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

setAttributes()

説明文

WebGL描画コンテキストの属性を設定します。これは、WebGLレンダラーが表示とパフォーマンスを微調整する方法です。

WebGLキャンバスが作成された後に呼び出された場合、描画コンテキストを再初期化することに注意してください。

オブジェクトがパラメータとして渡されると、オブジェクトで宣言されていないすべての属性がデフォルトに設定されます。

使用可能な属性は次のとおりです。

• alpha
  キャンバスにアルファバッファが含まれているかどうかを示します。デフォルトはtrueです。

• depth
  描画バッファに少なくとも16ビットの深度バッファがあるかどうかを示します。デフォルトはtrueです。

• stencil
  描画バッファに少なくとも8ビットのステンシルバッファがあるかどうかを示します。

• antialias
  デフォルトのアンチエイリアスを実行するかどうかを示します(false)(Safariではtrue)

• premultipliedAlpha
  ページコンポジタが描画バッファに色が含まれていると想定することを示します。あらかじめ乗算されたアルファのデフォルトはfalseです。

• preserveDrawingBuffer
  trueの場合、バッファは消去されず、作成者によって消去または上書きされるまでその値を保持します(p5は描画ループで自動的に消去されることに注意してください) デフォルトはtrueです。

• perPixelLighting
  trueの場合、ピクセルごとのライティングがライティングシェーダで使用されます。それ以外の場合は、頂点ごとのライティングが使用されます。デフォルトはtrueです。

構文

setAttributes(key, value)

setAttributes(obj)

パラメタ

• key
  String：属性の名前

• value
  Boolean：名前付き属性の新しい値

• obj
  Object：キーと値のペアを持つオブジェクト

例

//マウスボタンを押したままにしてperPixelLightingを無効にします
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke() ;
  fill(255);
}

let lights = [
  {c: '#f00', t:1.12, p:1.91, r:0.2}, 
  {c: '#0f0', t:1.21, p:1.31, r:0.2}, 
  {c: '#00f', t:1.37, p:1.57, r:0.2}, 
  {c: '#ff0', t:1.12, p:1.91, r:0.7}, 
  {c: '#0ff', t:1.21, p:1.31, r:0.7}, 
  {c: '#f0f', t:1.37, p:1.57, r:0.7}
];

function draw() {
  let t = millis() / 1000 + 1000;
  background(0);
  directionalLight(color('#222'), 1, 1, 1);

  for(let i = 0; i <lights.length; i ++){
    let light = lights [i];
    pointLight(
      color(light.c), 
      p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
    );
  }

  specularMaterial(255);
  sphere(width * 0.1);

  rotateX(t * 0.57);
  rotateY(t * 0.63);
  box(45);

  // マウスボタンを押したままのとき、perPixelLighting に false をセットする
  if ( mouseIsPressed) {
    setAttributes('perPixelLighting', false);
    noStroke() ;
    fill(255);
  }else{
    setAttributes('perPixelLighting', true);
    noStroke() ;
    fill(255);
  }
}

実行結果

著作権

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