メモリ上で描画するには

◆PROCESSING　逆引きリファレンス

　カテゴリー：図形描画

【概要】

PROCESSINGで用意されている様々な描画命令（ ellipse や line など）は、そのまま使うと実行結果ウィンドウに描画結果が反映されます。

PROCESSINGを利用していると、実行結果ウィンドウ以外（メモリ上）に描画結果を反映したい場合があります。

例えばゲームなどでは、次に表示したい画像をあらかじめメモリ上に描画しておいて、あるタイミングで即座に画面へ反映するテクニック（ダブルバッファリング方法）があります。

PROCESSINGではPGraphicsクラスを用いることで、メモリ上で簡単に描画を行うことが可能です。また描画した内容は、制限付きですがファイルに保存することも可能です。

【詳細】

メモリ上で描画を行うには、PGraphicsクラスのインスタンスを作成して、該当インスタンスに対して各描画メソッドを実行します。

PGraphicsクラスは、PROCESSINGがサポートしている多くの描画命令を持っているため、実行結果ウィンドウに対して行うのと同じような感覚で描画を行わせることができます。

実は私達がPROCESSINGで利用しているellipse などの描画命令の多くは、PAppletクラスが内部で保持しているPGraphicsクラスに対して実行されているのです。

通常の実行結果ウィンドウに対して描画を行うのと違うのは、PGraphicsクラスで描画を行う際には、描画の開始と終了を明示する必要がある点です。

具体的には、以下の手順で描画します。

PGraphicsクラスのインスタンスを作成
該当インスタンスの描画開始を宣言
該当インスタンスの描画メソッドを実行
該当インスタンスの描画終了を宣言
該当インスタンスの破棄を実行（PDF,SVGの場合のみ）

PGraphicsクラスのインスタンスを作成する

インスタンスを作成するPGraphics pg = createGraphics(int w, int h, String renderer, String path) ;

w / h ：描画領域のサイズ
renderer ：レンダリング指定。P2D, P3D, JAVA2D, PDF, SVG の何れか。省略時は JAVA2D
path : レンダリング指定にSVGやPDF を指定する場合は必須。それ以外では省略する事

createGraphics()命令でPGraphicsのインスタンスを作成します。作成時に描画領域のサイズとレンダリング指定が行えます。

ただしレンダリングにP2D、P3Dを指定する場合は、createGraphics()する前にsize() 命令で同じレンダリング指定を行っておく必要があります。

またレンダリングにP2D、P3Dを指定すると、PROCESSINGの不具合？で該当PGraphicsの描画結果を正常にファイルへ保存することができません。

レンダリングを未指定にした（あるいはJAVA2Dを指定した）場合は問題ありません。ここは注意してください。

レンダリング指定にPDF、SVGを指定した場合は、最後の引数にファイル名を指定する必要があります。P2D、P3D、JAVA2D指定時は、逆にファイル名を与えてはいけません。

レンダリング指定にPDF、SVGを指定した場合は、描画結果をファイルに保存するために、該当インスタンスの破棄を行う必要があります。

描画開始を宣言する

描画開始を宣言void pg.beginDraw( ) ;

pg : createGraphics()で生成したPGraphicsのインスタンス

PGraphicsインスタンスに描画する前に、必ず描画開始を宣言する必要があります。

描画終了を宣言する

描画終了を宣言void pg.endDraw( ) ;

pg : createGraphics()で生成したPGraphicsのインスタンス

PGraphicsインスタンスへの描画が終了したら、描画終了を宣言する必要があります。

インスタンスの破棄を実行

インスタンスの破棄を実行void pg.dispose( ) ;

pg : createGraphics()で生成したPGraphicsのインスタンス

レンダリングにPDF, SVG を指定した場合は、描画結果をファイルに出力するためにインスタンスを破棄する必要があります。

インスタンスを破棄したタイミングで、描画結果がファイルに書き込まれます。逆に破棄しないとファイルには書き込まれません（０バイトの不正なファイルができます）。

レンダリングにPDF, SVG を指定した場合は、描画結果を実行結果ウィンドウへ表示する事や、描画結果をsave()命令でファイルに保存する事はできなくなるので、注意してください。

【関連記事】

実行結果ウィンドウの大きさを指定するには(3.X用)

サンプルプログラム

メモリに描画する例：

/**
 * PROCESSING 3.0 メモリ描画Sample1
 * @auther MSLABO
 * @version 2019/05 1.0
 */
boolean    cngFlg;
PGraphics  pg;

void setup(){
  size(300,300);
  cngFlg = false;

  //-----------------------------
  //メモリに四角を描画する
  //-----------------------------
  //インスタンス生成
  pg = createGraphics(width,height);
  //描画開始宣言
  pg.beginDraw();
  //適当に描画
  pg.background(255,100,100);
  pg.fill(255);
  pg.rectMode(CENTER);
  pg.rect(width/2,height/2,150,150);
  //描画終了を宣言
  pg.endDraw();
}

void draw(){
  //実行結果ウィンドウには円を描画する
  background(100,100,255);
  ellipse(width/2,height/2,150,150);

  if(cngFlg){
    //マウスクリックされたら
    //メモリの描画内容を表示する
    image(pg, 0, 0 );
  }
}

void mousePressed(){
  //マウスクリックされたらファイルに保存する
  cngFlg = true;   
  pg.save(dataPath("saveImage.png"));
}

/**

* PROCESSING 3.0 メモリ描画Sample1

* @auther MSLABO

* @version 2019/05 1.0

boolean cngFlg;

PGraphics pg;

void setup(){

size(300,300);

cngFlg = false;

//-----------------------------

//メモリに四角を描画する

//-----------------------------

//インスタンス生成

pg = createGraphics(width,height);

//描画開始宣言

pg.beginDraw();

//適当に描画

pg.background(255,100,100);

pg.fill(255);

pg.rectMode(CENTER);

pg.rect(width/2,height/2,150,150);

//描画終了を宣言

pg.endDraw();

}

void draw(){

//実行結果ウィンドウには円を描画する

background(100,100,255);

ellipse(width/2,height/2,150,150);

if(cngFlg){

//マウスクリックされたら

//メモリの描画内容を表示する

image(pg, 0, 0 );

}

void mousePressed(){

//マウスクリックされたらファイルに保存する

cngFlg = true;

pg.save(dataPath("saveImage.png"));

}

PGraphicsのインスタンスには四角を、実行結果ウィンドウには円を書き込みます。

マウスがクリックされたら、PGraphicsインスタンスをファイルに保存し、表示内容を切り替えています。

＜出力サンプル＞

P3Dでメモリに描画する例：

/**
 * PROCESSING 3.0 メモリ描画Sample2
 * @auther MSLABO
 * @version 2019/05 1.0
 */
boolean    cngFlg;
PGraphics  pg;

void setup(){
  //createGraphicsと同じ、3Dレンダラーを指定
  size(300,300, P3D);
  cngFlg = false;

  //-----------------------------
  //メモリにY軸回転のBOXを描画
  //-----------------------------
  //インスタンス生成
  pg = createGraphics(width,height, P3D);
  //描画開始宣言
  pg.beginDraw();
  //適当に描画
  pg.background(255,100,100);
  pg.noFill();
  pg.translate(width/2, height/2);
  pg.rotateY( 90 );
  pg.rectMode(CENTER);
  pg.strokeWeight(2);
  pg.stroke(255,255,255);
  pg.box(150);
  //描画終了を宣言
  pg.endDraw();
}

void draw(){  
  if(cngFlg){
    //マウスクリックされたら
    //メモリの描画内容を表示する
    image(pg, 0, 0 );
  } else {
    //実行結果ウィンドウにはX軸回転のBOXを描画
    background(100,100,255);
    noFill();
    translate(width/2, height/2);
    rotateX( 90 );
    rectMode(CENTER);
    strokeWeight(2);
    stroke(255,255,255);
    box(150);
  }
}

void mousePressed(){
  //マウスクリックされた
  cngFlg = true;   
}

/**

* PROCESSING 3.0 メモリ描画Sample2

* @auther MSLABO

* @version 2019/05 1.0

boolean cngFlg;

PGraphics pg;

void setup(){

//createGraphicsと同じ、3Dレンダラーを指定

size(300,300, P3D);

cngFlg = false;

//-----------------------------

//メモリにY軸回転のBOXを描画

//-----------------------------

//インスタンス生成

pg = createGraphics(width,height, P3D);

//描画開始宣言

pg.beginDraw();

//適当に描画

pg.background(255,100,100);

pg.noFill();

pg.translate(width/2, height/2);

pg.rotateY( 90 );

pg.rectMode(CENTER);

pg.strokeWeight(2);

pg.stroke(255,255,255);

pg.box(150);

//描画終了を宣言

pg.endDraw();

}

void draw(){

if(cngFlg){

//マウスクリックされたら

//メモリの描画内容を表示する

image(pg, 0, 0 );

} else {

//実行結果ウィンドウにはX軸回転のBOXを描画

background(100,100,255);

noFill();

translate(width/2, height/2);

rotateX( 90 );

rectMode(CENTER);

strokeWeight(2);

stroke(255,255,255);

box(150);

}

void mousePressed(){

//マウスクリックされた

cngFlg = true;

}

レンダラーを指定して3Dモデルを描画する例です。

基本的な動作は上記2D画像版と同じですが、P2DやP3Dのレンダリング指定を行うとメモリ内容を正常にファイルへ保存できないので注意してください。

＜出力サンプル＞

PDFでメモリに描画する例：

/**
 * PROCESSING 3.0 メモリ描画Sample3
 * @auther MSLABO
 * @version 2019/05 1.0
 */ 
import processing.pdf.*;
PGraphics  pg;
boolean    saveFlg;

void setup(){
  size(300,300);
  saveFlg = false;

  //-----------------------------
  //メモリに四角を描画する
  //-----------------------------
  //インスタンス生成
  pg = createGraphics(width,height,PDF, "sample.pdf");
  //描画開始宣言
  pg.beginDraw();
  //適当に描画
  pg.background(255,100,100);
  pg.fill(255);
  pg.rectMode(CENTER);
  pg.rect(width/2,height/2,150,150);
  //描画終了を宣言
  pg.endDraw();
}

void draw(){  
  //実行結果ウィンドウには円を描画する
  background(100,100,255);
  ellipse(width/2,height/2,150,150);
}

void mousePressed(){
  //マウスクリックされたらPDFを保存する
  if( saveFlg == false ){
    println("save開始します");
    pg.dispose(); 
    saveFlg = true;
    println("saveしました");
  }
}

/**

* PROCESSING 3.0 メモリ描画Sample3

* @auther MSLABO

* @version 2019/05 1.0

import processing.pdf.*;

PGraphics pg;

boolean saveFlg;

void setup(){

size(300,300);

saveFlg = false;

//-----------------------------

//メモリに四角を描画する

//-----------------------------

//インスタンス生成

pg = createGraphics(width,height,PDF, "sample.pdf");

//描画開始宣言

pg.beginDraw();

//適当に描画

pg.background(255,100,100);

pg.fill(255);

pg.rectMode(CENTER);

pg.rect(width/2,height/2,150,150);

//描画終了を宣言

pg.endDraw();

}

void draw(){

//実行結果ウィンドウには円を描画する

background(100,100,255);

ellipse(width/2,height/2,150,150);

}

void mousePressed(){

//マウスクリックされたらPDFを保存する

if( saveFlg == false ){

println("save開始します");

pg.dispose();

saveFlg = true;

println("saveしました");

}

マウスがクリックされたら、PGraphicsインスタンスをファイルに保存します。

なお、レンダラーにPDFを利用する場合は
import processing.pdf.*;
を、レンダラーにSVGを利用する場合は
import processing.svg.*;
を指定しておく必要があります。

＜出力サンプル＞

PROCESSING逆引きリファレンス一覧へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。

iconka.com 様
ICOOON MONO 様

◆PROCESSING 逆引きリファレンス

カテゴリー：図形描画