2013年4月21日 星期日

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

[Processing Example]



本週的挑戰依舊圍繞在遞迴的各種運用,在第一個練習中,蝦爸運用遞迴的特性,讓粒子發散時,新分裂出來的粒子同享舊粒子的位置及大小,因此煙火行進時能夠產生自然的分裂 ;再加上粒子的半徑會依時間而減少,使得本範例執行起來時,呈現如同煙火一般效果。

[Processing code] ↓

ArrayList group;

void setup() {
  size(600, 400, OPENGL);
  background(0);
  group=new ArrayList();
}

void draw() {
  fill(0,10);
  rect(0,0,width,height);
  for (int i=0;i<group.size();i++) {
    ((tree)group.get(i)).update();
    if ( ((tree)group.get(i)).r<=0) {
      group.remove(i);
    }
  }
  for (int i=0;i<group.size();i++) {
    ((tree)group.get(i)).display();
  }
}

void mousePressed() {
  int size=(int)random(5, 10);
  for (int i=0;i<size;i++) {
    group.add(new tree(mouseX, mouseY, 5, random(360)));
  }
}


class tree {
  float px, py;
  float r;
  float angle;
  float v;
  tree(float e_px, float e_py, float e_r, float e_angle) {
    px=e_px;
    py=e_py;
    angle=e_angle;
    r=e_r;
  }
  void update() {
    px=px+r*0.8*cos(radians(angle));
    py=py+r*0.8*sin(radians(angle));
    angle=angle+random(-5, 5);
    if (random(20)>19 ) {
      float temp_r=random(1, r);
      group.add(new tree(px, py, temp_r*1.1, angle+random(-10, 10)));
      r=r-temp_r;
    }
    if (random(2)>1) {
      r=r-0.05;
    }
  }

  void display() {
    noStroke();
    fill(255);
    ellipse(px, py, r*2, r*2);
  }
}

[Pd Example]


Pd與p5在本範例撰寫時較大的差異為,粒子的殘影效果是透過[framebuffer]製造出來的,把繪製好的圖像存在framebuffer,在利用buffer的alpha值稍微透明(0.94),因此舊有的影像,便會跟新的影像疊合在一起,呈現出殘影效果。

[Pd code] ↓


(pd subpatch [pd feedback])



(main.pd)


(firework.pd)