メインキャンバスとは別の描画面を表すクラスです。
各 p5.Graphics
オブジェクトは、グラフィックスバッファと呼ばれる 専用の描画面を提供します。グラフィックスバッファは、描画をオフスクリーンで 行う必要がある場合に役立ちます。例えば、別々のシーンをオフスクリーンで 描画し、必要な時だけ表示することができます。
p5.Graphics
オブジェクトは、メインキャンバスのほぼすべての描画機能を 持っています。例えば、myGraphics.circle(50, 50, 20)
メソッドを呼び出すと、 グラフィックスバッファに描画されます。結果の画像は、p5.Graphics
オブジェクトを image() 関数に渡すことで、メインキャンバスに 表示できます。例えば、image(myGraphics, 0, 0)
のようにします。
注意: このクラスのインスタンスを作成するには、createGraphics() を 使用することをお勧めします。
実例
シンタックス
p5.Graphics(width, height, renderer, [pInst], [canvas])
パラメーター
グラフィックスバッファの幅(ピクセル単位)。
グラフィックスバッファの高さ(ピクセル単位)。
使用するレンダラー(P2DまたはWEBGL)。
スケッチインスタンス。
既存の <canvas>
要素を使用する場合。
メソッド
グラフィックスバッファの変換と照明をリセットします。
デフォルトでは、メインキャンバスは draw() が実行される たびに特定の変換と照明の値をリセットします。p5.Graphics
オブジェクトは、myGraphics.reset()
を呼び出すことで、 これらの値を手動でリセットする必要があります。
グラフィックスバッファをウェブページから削除します。
myGraphics.remove()
を呼び出すと、グラフィックスバッファの 要素がウェブページから削除されます。グラフィックスバッファは CPUのメモリも少し使用しており、以下のように解放できます:
// グラフィックスバッファをウェブページから削除します。 myGraphics.remove();
// グラフィックスバッファをCPUメモリから削除します。 myGraphics = undefined;
注意:グラフィックスバッファをCPUメモリから削除するには、 グラフィックスバッファを参照するすべての変数に undefined
を 割り当てる必要があります。変数がまだグラフィックスバッファを 参照している場合、ガベージコレクションされません。
グラフィックスバッファと同じWebGLコンテキストを持つ新しい p5.Framebuffer オブジェクトを作成します。
p5.Framebuffer オブジェクトは、 WebGLモードでテクスチャとして使用できる別の描画面です。これらは p5.Graphics オブジェクトに似ていますが、 テクスチャとして使用する場合、一般的にはるかに高速に動作します。 グラフィックスバッファと同じコンテキストで p5.Framebuffer オブジェクトを 作成することで、この高速化が可能になります。
パラメータ options
はオプションです。オブジェクトを渡して p5.Framebuffer オブジェクトを 設定できます。利用可能なプロパティは以下の通りです:
format
: テクスチャのデータ形式。UNSIGNED_BYTE
、FLOAT
、 またはHALF_FLOAT
のいずれか。デフォルトはUNSIGNED_BYTE
です。channels
:RGB
またはRGBA
の色チャンネルを 保存するかどうか。デフォルトはグラフィックスバッファに合わせてRGBA
です。depth
: 深度バッファを含めるかどうか。デフォルトはtrue
です。depthFormat
: 深度情報のデータ形式。UNSIGNED_INT
またはFLOAT
のいずれか。デフォルトはFLOAT
です。stencil
: マスキング用のステンシルバッファを含めるかどうか。 この機能を使用するにはdepth
がtrue
である必要があります。 デフォルトはdepth
の値(true
)に従います。antialias
: アンチエイリアシングを実行するかどうか。true
に 設定すると({ antialias: true }
のように)、デフォルトで2サンプルが 使用されます。サンプル数も設定できます({ antialias: 4 }
のように)。 デフォルトは setAttributes() に 合わせてfalse
です(Safariではtrue
)。width
: p5.Framebuffer オブジェクトの幅。デフォルトは常にグラフィックスバッファの幅に合わせます。height
: p5.Framebuffer オブジェクトの高さ。デフォルトは常にグラフィックスバッファの高さに合わせます。density
: p5.Framebuffer オブジェクトのピクセル密度。デフォルトは常にグラフィックスバッファのピクセル密度に合わせます。textureFiltering
: p5.Framebuffer オブジェクトから値を読み取る方法。LINEAR
(近くのピクセルが補間される)またはNEAREST
(補間なし)のいずれか。一般的に、テクスチャを画像として 使用する場合はLINEAR
を、テクスチャをデータとして読み取る場合はNEAREST
を使用します。デフォルトはLINEAR
です。
width
、height
、または density
属性が設定されている場合、 それらは自動的にグラフィックスバッファに合わせられず、手動で変更する必要があります。