PGraphicsを使って文字が地面に映っているようなエフェクトを作る

12月 5th, 2011

Processing Advent Calendar 2011 (5日目)

PGraphicsとは


PGraphicsを利用したプログラムをあまり見ないので、今回はPGraphicsの機能を使ってプログラムを作っていきます。

ProcessingのPGraphicsは、一言で言うと「別画面」になります。裏画面なので、描画した内容は当然表の画面には出てきません。そこで、仮の描画内容を描いておいたり、何回も使う画像を取っておいたりすることができます。
PGraphicsを使いこなすことができれば表現の幅を広げることができるでしょう。

PGraphicsを使う

PGraphicsの生成

PGraphicsを使うためには、まずPGraphicsを作らなければいけません。
これは、createGraphics()を利用して、次の様に記述します。

PGraphics pg;
void setup(){
  size(400, 400);
  pg = createGraphics(200, 200, JAVA2D);
}

createGraphics()の引数はsize()と同じですが、描画方法を示す第3引数を省略することはできないので注意が必要です。

PGraphicsへの描画

PGraphicsに描画する内容は、PGraphics.beginDraw()とPGraphics.endDraw()で囲みます。
PGraphicsへの描画は、draw()などと同じように行うことができますが、全てのメソッドはPGraphicsのメソッドとして実行する必要があります。

PGraphics pg;
void setup(){
  size(400, 400);
  pg = createGraphics(200, 200, JAVA2D);
 
  //  PGraphicsに描画する
  pg.beginDraw();
  pg.background(255, 0, 0);
  pg.fill(0, 255, 0);
  pg.ellipse(20, 20, 30, 30);
  pg.endDraw();
}

PGraphicsの表示

PGraphicsは裏画面なので、当然このままでは見ることができません。
PGraphicsの内容を画面に表示するには、image()を利用します。PGraphicsをPImageのように扱うことができるのです。

PGraphics pg;
void setup(){
  size(400, 400);
  pg = createGraphics(200, 200, JAVA2D);
 
  //  PGraphicsに描画する
  pg.beginDraw();
  pg.background(255, 0, 0);
  pg.fill(0, 255, 0);
  pg.ellipse(20, 20, 30, 30);
  pg.endDraw();
 
  image(pg, 100, 100);
}


これで、PGraphicsに描いた内容を画面に表示できました。

PGraphicsを使ってみよう

文字が地に反射している効果を作る

さて、冒頭でも紹介した文字が地に反射している画像を作ります。
文字はいきなり表画面に描画はせず、まずPGraphicsに文字を描画をしておきます。
それをimage()で表示し、その下には上下反転したものを表示することでこれを実現します。
上下反転するものにはfilter()をかけることで、ぼかしています。

PGraphics pg;
PFont font;
void setup() {
  size(400, 200);
  background(0);
  imageMode(CENTER);
  font = createFont("MS Gothic", 48);
 
  pg = createGraphics(320, 50, JAVA2D);
 
  //  PGraphicsに文字を描画する
  pg.beginDraw();
  pg.background(0);
 
 
  pg.textFont(font);
  pg.textAlign(LEFT, BASELINE);
  pg.text("ReflectEffect", 0, pg.height);
  pg.endDraw();
  translate(width / 2, height / 2 - pg.height / 2);
  image(pg, 0, 0);
 
  //  反射している文字を描画する。
  translate(0, pg.height);
  scale(1, -1);  //  上下反転
  pg.beginDraw();  
  pg.filter(BLUR, 2);  //  "ぼけ"をかける
  pg.endDraw();
  image(pg, 0, 0);
}

ちなみに、PGraphics自体は下記の様な画像になっています。

Tags: ,
Posted in Processing Advent Calendar2011 | No Comments »

Comments

Leave a Reply

 Comment Form