連休中、久しぶりに Processing を使用していて、残像表現をしながら手前で別のものを表示したいときに、手間取ったのでメモ程度に。
PGraphics を使用する
オンスクリーンバッファを用意して更新・描画することで、残像を実現することは loadPixels() で可能なのですが、スクリーン全体が更新されてしまうため、 PGraphics を使用してみます。
PGraphics \ Language (API) \ Processing 2+
PGraphics は「別画面」に描画するもので、同じものを何度も使い回すことも可能です。
PGraphics を生成
sketch.pde
PGraphics pg;
void setup(){
size(500, 500);
pg = createGraphics(500,500);
}
createGraphics() を使って生成します。今回はレイヤー的に使用したいので、ウィンドウのサイズと同じ大きさにします。
手前に置きたいものは後で記述
奥に置きたいものほど先に記述し、 beginDraw() 〜 endDraw() の間に先ほど生成したインスタンスをくっつけて、記述します。
sketch.pde
void draw() {
pg.beginDraw();
// 残像効果を出すために半透明で塗りつぶす
pg.fill(0,10);
pg.rect(0,0,width,height);
// 動かすものを配置
pg.fill(255);
pg.ellipse(x1, y1, size, size);
pg.endDraw();
// 最後に image() で配置することで表示される
image(pg, 0, 0);
// 手前に置きたいものを書いていく
ellipse(x2, y2, size, size);
}
こうすることで、手前のものと奥のものをレイヤー的に分けることができます。
もう少し込み入ったことをもやりたいところですが、それは次の機会に。