![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
画像に処理を施してみよう。
PImage gazou;
size(640,480);
gazou = loadImage("z:/Pictures/sakura.jpg");
image(gazou,0,0,width,height);
filter(BLUR,4);
このスケッチを実行すると画像がぼやけて表示されるだろう。 filter()は画像を加工する命令であり、次のものが用意されている。 |filter(THRESHOLD, t) |tは0から1の値。画像を明るさによって、白か黒のどちらかにする。tの値が大きいほど黒くなりやすい。|
| filter(GRAY) | 画像をグレースケール(色を取り去った灰色の画像)にする |
| filter(INVERT) | 画像のRGBそれぞれの明るさを反転する |
| filter(POSTERIZE,p) | RGB各色を255段階からp段階にする |
| filter(BLUR, p) | 画像をぼやけさせる。pはぼやけ具合 |
| filter(ERODE) | 画像の明るい部分を暗くする |
| filter(DILATE) | 画像の暗い部分を明るくする |
以下のプログラムでは、キーを押すとそれに従ってフィルタを適用する。何かキーが押されると、void keyPressed() に書かれたコードが実行される。switch(key){ case 't': ... }の部分は、keyの値によって、処理を分岐させる。keyの値が't'ならば、case 't':の後の処理が、'g'ならばcase 'g':の後の処理が実行される。どれでもなければ、default:の後の処理が実行される。それぞれの処理の末尾には、そのことを示すためにbreak;を記す。
PImage gazou;
int mode;
void setup(){
size(640,480);
gazou = loadImage("z:/Pictures/sakura.jpg");
mode = 0;
}
void draw(){
image( gazou, 0, 0, width, height);
if( mode != 0 ){
filter(mode);
}
}
/* キーが押されるとこの部分が実行される */
void keyPressed(){
switch(key){
case 't':
mode=THRESHOLD; break;
case 'g':
mode=GRAY; break;
default:
mode=0;
}
}
上のプログラムに、他のフィルタを追加せよ。ただし、POSTERIZEは2番目のpを省略できないので、追加しなくてよい。
写真などの画像があるものとする。 次のスケッチ【プログラムA】を実行してみよう。 ファイルのパス z:/Pictures/sakura.jpg は適宜書き換えること。なお、スケッチを保存してできるフォルダの中にdataという名前のフォルダを作成し、そこに置いたファイルであれば、ファイル名だけでよい。
PImage gazou;
size(640,480);
gazou = loadImage("z:/Pictures/sakura.jpg");
image(gazou,0,0,width,height);
適当な画像がなければ、 http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/images に用意した。
画像が表示されるはず。loadImageで画像を読み込み、変数gazouその情報を入れる。 image()で画像を指定された場所(この例では左上隅)と大きさ(この例ではウィンドウの大きさいっぱい)で表示する。width, heightは省略できて、その場合には、画像は元の大きさで表示される。ただし、表示できない部分は切り取られる。
画像の色を変えてみよう。 Image()の前に次の行を加えてみる。
tint(200,150,80);
画像が茶色になるだろう。もともとの画像ではRGBそれぞれ0～255の256段階であるものを指定された値までの段階に圧縮する。上の例では、Rは200まで、Gは150まで、Bは80までなので、緑Gや青Bの明るさが小さくなり、結果として茶色に近い色合いになる。 tintには透明度も指定できる。例えば
tint(255,160);
を指定すると、画像の色は変わらず、少し透明になる。
PImage img;
size(400,400);
strokeWeight(8);
line(0,400,400,0);
line(0,0,400,400);
img = loadImage("z:/Pictures/sakura.jpg");
tint(255,160);
image(img,0,0);
2つの画像A, Bを重ねて表示してみよう。 画像Aは点(0,0)、画像Bは点(width/2, height/2)が左上隅になるように表示させよ。 画像Bを少し透明にして上から重ねてみること。
上の課題はスタティックなスケッチで実現できる。アクティブな(setupとdrawのある)スケッチを用いて、1つの画像の上にもう一つの画像がフェードインして重なるようにしてみよ。そのために、次のプログラムの...の部分に適当なコードを記せ。
PImage gazou1, gazou2;
float alpha = 0;
void setup(){
size(640,480);
gazou1 = loadImage("z:/Pictures/gazoua.jpg");
gazou2 = loadImage("z:/Pictures/gazoub.jpg");
}
void draw(){
...
tint(255,alpha);
...
}
