
要說近年來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
沒有留言:
張貼留言