2-8.画像の表示†

写真などの画像があるものとする。ファイルのパス z:/Pictures/sakura.jpg は適宜書き換えること。なお、スケッチを保存してできるフォルダの中にdataという名前のフォルダを作成し、そこに置いたファイルであれば、ファイル名だけでよい。

適当な画像がなければ、 https://teams.microsoft.com/_#/files/%E4%B8%80%E8%88%AC?threadId=19%3Aafb14e0e480b4ebba64329b5ce1ac176%40thread.skype&ctx=channel&context=image に用意した。

【プログラムA】 PImage gazou; size(640,480); gazou = loadImage("z:/Pictures/sakura.jpg"); image(gazou,0,0,width,height);

画像が表示されるはず。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);

O sketch_190S07d

【課題】 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);  
 ...

}

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS