#author("2019-05-21T17:40:02+09:00","default:qua","qua")
#author("2019-05-21T17:44:30+09:00","default:qua","qua")
#navi(Processing/2.ちょっと発展)
* 2-8.画像の表示 [#vdc36a90]
写真などの画像があるものとする。
次のスケッチ【プログラム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); 

#ref(http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/img/2-8-1.png)

*** 課題 [#ja6978bb]
** 課題 [#ja6978bb]
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