Pgraphicsについて

1. PGraphics

Processingのデフォルトの描画はメインのウィンドウですが、PGraphics を使用すると、異なる描画領域を作成して、そこに図形やイメージを描画できます。これは画像のレイヤーを作成したり、より複雑な描画処理を行う場合に便利です。Pgraphicsを使うと、イラストでいうレイヤーのような構造を作ることができます。

2. 描画順序を変更する例

2.1. 動作

クリックするとpg1とpg2の描画順序を変更することができます。あくまで、描画順序を変更しているだけなので、pg1とpg2の描画内容は削除・更新されません。

はるか

表示順序が赤と青で変わってる。

2.2. コード

PGraphics pg;
PGraphics pg2;
boolean toggle = true;
void setup() {
    size(300, 300);
    pg = createGraphics(200, 200);
    pg2 = createGraphics(200, 200);
    background(255);
    pg.beginDraw();
    pg.background(255,0,0);
    pg.endDraw();
    pg2.beginDraw();
    pg2.background(0,0,255);
    pg2.endDraw();
}

void draw() {
    if(toggle){
        image(pg, 0, 50); 
        image(pg2, 100, 50);
    }else{
        image(pg2, 100, 50);
        image(pg, 0, 50); 
    }
}

void mouseClicked(){
    if(toggle){
        toggle=false;
    }else {
        toggle=true;
    }

}