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

要說近年來Audio Visual最熱門的哏，那肯定是圓球表面運動。圓球表面運動顧名思義就是粒子繞著一個隱形的圓球軌跡，在表面上任意的移動。看似複雜的動態，其實只要套用數學模型即可得到如此結果，不過因為呈現出來的視覺真的非常絢麗，也俱科技感，所以不管是在好萊塢的科幻電影（"TRON" &"Prometheus"）或是音像作品中都可常見，我自己上個作品「動態中心」也完全利用此模型，做了許多視覺跟聲音的交互運用。

圓球表面位置的公式為：

• r=圓球半徑
• x=r*cos(radians(theta))*cos(radians(phi))
• y=r*sin(radians(phi))
• z=r*sin(radians(theta))*cos(radians(phi))

蝦爸在此範例中，設計了一個簡單的互動，當滑鼠產生點擊動作時，畫布上會動態的產生圓點，並且圓點會繞著隱形圓球旋轉。每個圓點都有其生命值，時間到便會依序的消失；圓點還會跟左右鄰居做距離偵測，當兩點距離小於某個數值時，便會產生連接兩個圓點線條。

[Processing code] ↓

float r;
float theta;
float phi;
ArrayList group;

void setup() {
  size(600, 300, OPENGL);
  group=new ArrayList();
  r=200;
  theta=0;
  phi=0;
}


void draw() {
  background(0);
  camera(mouseX, -mouseY, 400, 0, 0, 0, 0, 1, 0);
  for (int i=0;i<group.size();i++) {

    ((e_point)group.get(i)).update();
    if ( ((e_point)group.get(i)).life==0) {
      group.remove(i);
    }
  }

  for (int i=0;i<group.size();i++) {
    for (int j=i+1;j<group.size();j++) {
      ((e_point)group.get(i)).graphic();

      e_point aa=((e_point)group.get(i));
      e_point bb=((e_point)group.get(j));

      float t_x1=aa.get_x();
      float t_y1=aa.get_y();
      float t_z1=aa.get_z();

      float t_x2=bb.get_x();
      float t_y2=bb.get_y();
      float t_z2=bb.get_z();

      if (Distance( t_x1, t_x2, t_y1, t_y2, t_z1, t_z2) < 100) {
        stroke(150);
        strokeWeight(1);
        line(t_x1, t_y1, t_z1, t_x2, t_y2, t_z2);
      }
    }
  }
}

class e_point {

  float r, theta, phi;
  color cc;
  float v_t, v_p;
  int life;
  float size;

  e_point(float e_r, float e_theta, float e_phi, color e_c ) {
    r=e_r;
    theta=e_theta;
    phi=e_phi;
    cc=e_c;
    v_t=random(0, 1);
    v_p=random(0, 1);
    life=(int)random(500, 1000);
    size=random(5, 20);
  }

  void graphic() {
    float px=r*cos(radians(theta))*cos(radians(phi));
    float py=r*sin(radians(phi));
    float pz=r*sin(radians(theta))*cos(radians(phi));
    stroke(cc);
    strokeWeight(size);
    point(px, py, pz);
  }

  void update() {
    theta=theta+v_t;
    phi=phi+v_p;
    life--;
  }

  float get_x() {
    return r*cos(radians(theta))*cos(radians(phi));
  }
  float get_y() {
    return r*sin(radians(phi));
  }
  float get_z() {
    return r*sin(radians(theta))*cos(radians(phi));
  }
}


float Distance(float x1, float x2, float y1, float y2, float z1, float z2) {
  float Temp;
  Temp= sqrt(sq(x1-x2)+sq(y1-y2)+sq(z1-z2));
  return Temp;
}

void mousePressed() {
  for (int i=0;i<5;i++) {
    group.add(new e_point(r, 0, 0, color(0, 0, 200, 100)));
  }
}

[Pd code] ↓

[Pd Example] ↓

Example Download