リファレンス p5.Graphics

p5.Graphics

メインキャンバスとは別の描画面を表すクラスです。

p5.Graphics オブジェクトは、グラフィックスバッファと呼ばれる 専用の描画面を提供します。グラフィックスバッファは、描画をオフスクリーンで 行う必要がある場合に役立ちます。例えば、別々のシーンをオフスクリーンで 描画し、必要な時だけ表示することができます。

p5.Graphics オブジェクトは、メインキャンバスのほぼすべての描画機能を 持っています。例えば、myGraphics.circle(50, 50, 20) メソッドを呼び出すと、 グラフィックスバッファに描画されます。結果の画像は、p5.Graphics オブジェクトを image() 関数に渡すことで、メインキャンバスに 表示できます。例えば、image(myGraphics, 0, 0) のようにします。

注意: このクラスのインスタンスを作成するには、createGraphics() を 使用することをお勧めします。

実例

シンタックス

p5.Graphics(width, height, renderer, [pInst], [canvas])

パラメーター

width
Number:

グラフィックスバッファの幅(ピクセル単位)。

height
Number:

グラフィックスバッファの高さ(ピクセル単位)。

renderer
Constant:

使用するレンダラー(P2DまたはWEBGL)。

pInst
P5:

スケッチインスタンス。

canvas
HTMLCanvasElement:

既存の <canvas> 要素を使用する場合。

メソッド

reset

グラフィックスバッファの変換と照明をリセットします。

デフォルトでは、メインキャンバスは draw() が実行される たびに特定の変換と照明の値をリセットします。p5.Graphics オブジェクトは、myGraphics.reset() を呼び出すことで、 これらの値を手動でリセットする必要があります。

remove

グラフィックスバッファをウェブページから削除します。

myGraphics.remove() を呼び出すと、グラフィックスバッファの 要素がウェブページから削除されます。グラフィックスバッファは CPUのメモリも少し使用しており、以下のように解放できます:

// グラフィックスバッファをウェブページから削除します。 myGraphics.remove();

// グラフィックスバッファをCPUメモリから削除します。 myGraphics = undefined;

注意:グラフィックスバッファをCPUメモリから削除するには、 グラフィックスバッファを参照するすべての変数に undefined を 割り当てる必要があります。変数がまだグラフィックスバッファを 参照している場合、ガベージコレクションされません。

createFramebuffer

グラフィックスバッファと同じWebGLコンテキストを持つ新しい p5.Framebuffer オブジェクトを作成します。

p5.Framebuffer オブジェクトは、 WebGLモードでテクスチャとして使用できる別の描画面です。これらは p5.Graphics オブジェクトに似ていますが、 テクスチャとして使用する場合、一般的にはるかに高速に動作します。 グラフィックスバッファと同じコンテキストで p5.Framebuffer オブジェクトを 作成することで、この高速化が可能になります。

パラメータ options はオプションです。オブジェクトを渡して p5.Framebuffer オブジェクトを 設定できます。利用可能なプロパティは以下の通りです:

  • format: テクスチャのデータ形式。UNSIGNED_BYTEFLOAT、 または HALF_FLOAT のいずれか。デフォルトは UNSIGNED_BYTE です。
  • channels: RGB または RGBA の色チャンネルを 保存するかどうか。デフォルトはグラフィックスバッファに合わせて RGBA です。
  • depth: 深度バッファを含めるかどうか。デフォルトは true です。
  • depthFormat: 深度情報のデータ形式。UNSIGNED_INT または FLOAT のいずれか。デフォルトは FLOAT です。
  • stencil: マスキング用のステンシルバッファを含めるかどうか。 この機能を使用するには depthtrue である必要があります。 デフォルトは 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 です。

widthheight、または density 属性が設定されている場合、 それらは自動的にグラフィックスバッファに合わせられず、手動で変更する必要があります。

Notice any errors or typos? Please let us know. Please feel free to edit src/core/p5.Graphics.js and open a pull request!

関連するリファレンス