2013年4月4日 星期四

[對照]蝦爸的p5範例 4-1


蝦爸在這次的課程當中,運用loadImage()以及loadPixels()的函式,把照片中明度值較高的點,用point()重新繪製,並將滑鼠X軸坐標的變化去影響每個點的Z軸深度,因此當滑鼠移動時,以點構成的圖像會以不同的比例,往前往後延伸,看起來就像是圖像破碎,爆裂一般。

[Processing code] ↓

PImage pic;
color cc;
ArrayList group;

void setup() {
  group=new ArrayList();
  size(600, 300, OPENGL);
  pic=loadImage("art.jpg");
  cc =color(255, 0, 0);
  pic.loadPixels();
  for (int i=0;i<width;i++) {
    for (int j=0;j<height;j++) {
      if (red(pic.pixels[i+j*width]) > 50 ) {
        group.add(new e_point(i, j, pic.pixels[i+j*width]));
      }
    }
  }
}

void draw() {
  background(0);
  for (int i=0;i<group.size();i++) {
    color temp=((e_point)group.get(i)).cc;
    ((e_point)group.get(i)).graphic(brightness(temp)*mouseX*0.01);
  }
}

class e_point {
  float px, py;
  color cc;

  e_point(float e_px, float e_py, color e_cc) {
    px=e_px;
    py=e_py;
    cc=e_cc;
  }
  void graphic(float pz) {
    stroke(cc);
    point(px, py, pz);
  }
}

[Pd Example]




在Pd可以透過[pix_data]來取得圖片每個點的色彩資訊,同樣以明度較高的點當作繪製標準,如果不經過如此過濾,600*300的畫面,就需要繪製18萬的點,對任何軟體都是龐大負擔。並且Pd預設中,沒有可以繪製點的物件,必須呼叫底層的OPENGL 函式庫的[GEMglVertex3f ]物件來繪製點,整個範例完成後,效能無完全無法跟P5並論,不過這也是預期中的事....Orz。


[Pd code] ↓