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

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

p5.Graphics

説明文

レンダラーの薄いラッパーです。Graphics バッファオブジェクトの作成に使用されます。画面外の Graphics バッファに描画する必要がある場合はこのクラスを使用します。 2つのパラメータは、ピクセル単位で幅と高さを定義します。このクラスのフィールドとメソッドは広範ですが、p5の通常の描画APIを反映しています。

p5.Element を拡張します。

構文

new p5.Graphics(w, h, renderer, [pInst])

パラメタ

• w
  Number：width

• h
  Number：height

• renderer
  Constant：P2D または WEBGL

• pInst
  P5：p5インスタンスへのポインタ(オプション)

メソッド

• reset()
  グラフィックバッファオブジェクトでは自動的にリセットされない Transform カテゴリや Lights カテゴリの関数によって変更された特定の値をリセットします。 draw() でこれを呼び出すと, 標準のキャンバスの動作がコピーされます。

• remove()
  ページから Graphics オブジェクトを削除し、それに関連付けられているリソースをすべて解放します。

例

let pg;
function setup() {
  createCanvas(100, 100);
  // p5.Graphics (Graphics Buffer Object)の生成
  pg = createGraphics(100, 100);
}

function draw() {
  background(200, 250, 0); // 黄緑色
  pg.background(150); // グレー
  pg.noStroke() ;

  // pgの中央に幅50、縦50で円を描画する
  pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);

  // pgの左上座標を(50,50)にしてpgを描画する
  image(pg, 50, 50);
  
  // pgの左上座標を(0,0)、幅50縦50に縮小してpgを描画する
  image(pg, 0, 0, 50, 50);
}

実行結果

著作権

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