Image 1 : Display, Tint (processing教學)

在processing裡不停的畫圖塊線條後,
我們開始可以把圖或照片叫進來當底圖之類的做搭配,
也就是p95-100的Image 1 : Display, Tint

這一篇非常的簡單,所以會很快的帶過.
基本上只圍繞在兩個指令上,image跟tint

就像我們要定義整數x時,我們會打int x,而有小數點的y時,我們會打float y,
因此在要叫進一張圖z時,我們也要打PImage z來告訴processing說z是一張圖.
讓我們請Zooey Deschanel 來當範例

首先你的檔名跟檔型(ex.jpg,png,tif....)都很重要
因為你之後要完整輸入它的名字來告訴processing你要抓這張圖進來
在此我簡單的取為 zoey.jpg 而它的尺寸是198 x 254,這尺寸跟比例同樣重要

那要怎麼叫進processing呢? 程式碼如下


size(198,254);
//因為我知道圖的大小,所以我很投機的直接設它的大小
//所以當我把圖叫進來的同時我不需要重新縮放,或是有圖跑出圖框的困擾
background(255);

PImage img; //在此要先輸入PImage,然後定義它名字為img(你也可以取sugar或honey)

img = loadImage("zoey.jpg");
//再來設定img為loadImage內的zoey.jpg的這個檔
//但是loadImage是去哪裡load呢? 請記得一定要把你要用的圖
//透過processing>sketch>add file後,你再點show sketch folder,
//就會看到有一個新子資料夾叫data,裡面就會有你所存入的圖

image(img,0,0,198,254);
//然後就可以透過image指令說,我要叫img這個代號的圖進來
//它的左上角位置在圖框的(0,0)點,而它的寬長為198,254
//如果你的寬長沒有照比例輸入(ex. 19.8, 25.4)的話,比例會跑掉,沒輸入的話就默認圖片原始大小


此時你應該可以順裡利的把圖叫進processing了,
那這時tint這個功能就能幫你改變圖的色調,
其實他就像點跟線靠stroke,而色塊靠fill一樣,
tint就是專門改變圖片顏色的指令

size(198,254);
background(255);

PImage img;
img = loadImage("zoey.jpg");

tint(255,0,0);
image(img,0,0);  //從(0,0)處有一張為紅色調的圖
tint(0,0,255);
image(img,198/2,0); //從圖框一半處有一張為藍色調的圖

//saveFrame("p097-##.jpg");


基本上這篇還沒教到怎麼裁切圖,也不知道有沒有,
所以可以說是很簡單陽春的一篇,所以就隨意畫畫Zooey七力就好.

size(198,254);
background(255);

PImage img;
img = loadImage("zoey.jpg");

for(int i = 0; i <= 198; i += 66){
    tint(random(205,255),100);
    image(img,(-198/3)+i,0);
}

//saveFrame("p098-##.jpg");



Try it. :)