Pixel Zooey (processing教學)

在好好看了課本之後,其實後半段已經開始往各種不同向度走了.
有的是介紹互動,有的是介紹演算法,所以一時之間我也沒頭緒要怎麼寫下去.
只能說,如果你有好好看完前面的教學,其實你的基本功應該還算穩當了,
除了完全沒看過的指令外,只要邏輯還可以,別人的程式碼應該都還看得懂.
所以其實你已經可以開始看看人家高手寫的東西,
有興趣的就再看細一點,不懂的指令就上Processing官網查囉.


--------------------------------------------------------------------------------------------------------------------------


再來我就隨意講了,不一定是課本的東西,
你說跟建築有沒有關係,我不知道,但你問爽嗎?              爽!
今天我們要學如何從一張圖片去抓它的data出來加以利用.
所以再度請到Zooey出馬囉.

首先請點圖然後把它存到電腦裡,然後把它移到processing底下的lib資料夾裡.
之後再透過運算,我們就可以得到以下這張圖.

再來就是程式碼囉.




PImage img;
//首先要匯入一張圖時得跟int或flaot一樣,寫PImage,
//然後告訴processing這張圖在程式內代號叫img


void setup(){
  size(584,300); //圖原始大小為584 x 300,所以我就跟著它大小設
  img = loadImage("zooey.jpg"); //原圖的檔名跟類型
  background(255);
  smooth();
}


int l = 0;


void draw(){
  frameRate(250); //播放速度
 
  int x = int(random(img.width));
  int y = int(random(img.height));
  int loc = x + y*img.width;
  //這代表說int x 和 int y分別是0-584跟0-300中間任一整數
  //而loc你可能會比較困惑,它是要定義圖中pixel的位置,待會再解釋

  loadPixels(); //當你要讀圖的每個pixel的data時,必須要有這個指令
  float r = red(img.pixels[loc]);  //由上面定義的loc點,抽出那點RGB的R值
  float g = green(img.pixels[loc]); //由上面定義的loc點,抽出那點RGB的G值
  float b = blue(img.pixels[loc]); //由上面定義的loc點,抽出那點RGB的B值

  strokeWeight(0.5);
  stroke(255,100);
  fill(r,g,b,100);
  float pointillize = random(5,15);
  rectMode(CENTER);
  rect(x,y,pointillize,pointillize);
 
  l += 1;
  if(l > 30000){
    noLoop(); //當l算到第30001步時,便停止所有運算
    //saveFrame("14-##.jpg"); //同時存第30001步時的圖片
  }
}




基本上,整個程式的重點就是放在抓取隨機圖上的pixel,
並以該pixel的位置來當邊長為隨機5到15的正方形的中心.
而該pixel的RGB值則可成為正方形的填色依據.


我們可以先看pixels跟loadpixel兩個指令的解釋
pixels()
loadPixels()
我們可以知道要對pixel做一些進一步的動作前,需要有loadPixels指令,
而pixels的位置其實就是每個pixel都有它獨特的位置代號,


但要怎麼去抓到那個位置,也就是剛剛的loc呢?便請參照以下網址.
Images and Pixels


我抽出最精華的圖片,這張會讓我們更容易懂,
今天要找出某pixel的位置公式即為 location = x + y*width
也就是為什麼程式裡會寫int loc = x + y*img.width;
透過它去抓圖裡面的隨機pixel.

Try it. :)