Daze Graffiti: 六月 2013

2013年6月27日星期四

[公告]關於經堯老師的ＱＣ課程的進階筆記

各位朋友們好，關於經堯老師的ＱＣ課程進階筆記

經堯老師本人想要在課程結束後，在更有系統地整理釋出

讓整體教學的品質會更好。

所以請大家在課程結束後（最後一堂課在 2013 7/8號），

再到睡不著音像講座觀看完整記錄

感謝大家

2013年6月23日星期日

[工作坊] Pd-VJing 第四週

本週的課程重點，把聲音的波形透過各種視覺排列、組合而成。

範例一：

w4-1.pd

範例二：

w4-2.pd

範例三：

w4-3.pd

更多可能：

2013年6月15日星期六

2013年6月14日星期五

2013年6月13日星期四

[作品]進擊的GLSL

最近正在研究shader，下面三件作品都是Pd + GLSL的運用

利用GLSL繪製一個帶光暈的球體，再透過repeat的方法，大量複製球體。
光暈的球體畫法，參考自ThNdl的The Pixel Swarm

Examole download

利用shader中的geometry，把物件[newWave]大量複製，並且排列呈圓形。每一個圓環都是一個geometry的群組，各自擁有不同的顏色、半徑。

geometry的程式碼，參考來自Pd官方Help中的GEM>examples>glsl>geometry.pd。

(subpath [pd shape1])

Examole download

利用GLSL的vertex的功能，變形物件的外觀，並且透過[pix_sig2tex]的功能，賦予物件一直變動的材質（音訊產生材質），加上fragment的邊界演算，讓物件表面看起來仿佛玻璃般一樣。（影片被youtube消音了，囧）

物件變形的GLSL程式碼，參考memo的Amoeba Dance
邊界演算的GLSL程式碼，vertex、fragment。

Examole download

更多透過GLSL繪製出來的影像，前往

2013年6月8日星期六

Music:Giardini di Mirò- A new start

雖然很早就知道GLSL的強大，可是礙於要學的東西實在太多，加上總覺得shader是另外一個陌生領域，中文參考資料又很少，所以一直放在那邊遲遲沒有研究...

不過因為這陣子都在跟蝦爸在研（鬼）究（混）的關係，所以總算有機會好的來研究一番，這也才發現其實Shader Language並沒有想像中的那麼難（只是入門的話），甚至感覺比P5或是Pd的寫作還更為容易。GLSL是透過GPU去運算，所以運算效能真的很強大，簡單撰寫幾行（不超過10行），就可以得到非常巨大的效果!!!(真的完全沒想到會是這樣阿～)。

vertex code

uniform float vel;
uniform vec3 noise;
varying vec4 color;

void main()
{  
 vec3 pos = gl_Vertex.xyz + noise3( gl_Vertex.xyz * vel * noise) ;
     gl_Position = gl_ModelViewProjectionMatrix * vec4(pos,1.0);
}

fragment code

uniform vec4 color;

void main()
{

 gl_FragColor = color;
}

短短幾行程式碼，就能夠達到以往可能要數百行才能達到的效果，這真的仿佛進入奇異點的狀態！（抖）

Download example

2013年6月7日星期五

「筆記」ＱＣ進階筆記 2-3

結合上週的進度，在本範例中，利用滑鼠拖拉的動作，動態的產生新的矩形，矩形之後便會不停沿著y軸循環移動，如同上升的泡泡一般。

var first=true;
var x1;
var y1;
var x2;
var y2;

var out_x;
var out_y;
var width;
var height;

var mySquare=[];

function (__number out_x,__number out_y,__number width,__number height,__structure myStructures) 
main (__number x,__number y,__boolean click ,__boolean clear,__number time)
{
 var result = new Object();
 if(clear){ mySquare=[];}
  
 if(click){
  if(first){
   x1=x;
   y1=y; 
   first=false;
  }
  x2=x;
  y2=y;
  
  out_x=(x1+x2)/2;
  out_y=(y1+y2)/2;
  width=Math.abs(x1-x2);
  height=Math.abs(y1-y2);
  
  result.out_x=(x1+x2)/2;
  result.out_y=(y1+y2)/2;
  result.width=Math.abs(x1-x2);
  result.height=Math.abs(y1-y2); 
  
 }else{
  if(first==false){
   mySquare.push({ax:out_x,ay:out_y,awidth:width,aheight:height});
  }
 first=true;
 }
 
 for(var i=0;i<mySquare.length;i=1+1){  
  
  if(mySquare[i].ay <2){
   mySquare[i].ay += (i%15+5)/300;
  }else{
   mySquare[i].ay =-1
  }
 }
 result.myStructures=mySquare;
 return result;
}

（主程式）

（NewSquare）

Download qc2_w2-5.qtz

「筆記」ＱＣ進階筆記 2-2

範例一：

運用資料結構，建立多顆不同座標的圓球，並且設定一個時間變數，讓整體圓球在以Ｘ軸方向震盪。

function (__structure output) main (__number input)
{
 var myStructure = [
 {x:-0.1+input,y:-0.1,z:0,r:0.2},
 {x:0.2+input,y:-0.5,r:0.15},
 {x:-0.3+input,y:0.2,r:0.3},
 {x:0.4+input,y:0.5,r:0.25},
 ] ;
 
 var result = new Object();
 result.output = myStructure;
 return result;
}

qc2_w2-3.qtz

範例二：

在javascript物件內，利用for()迴圈，讓物件的Ｚ軸資訊不停變動。

var myStructure = [
 {X:-0.1,Y:-0.1,Z:0},
 {X:0.2,Y:-0.5,Z:0},
 {X:0.3,Y:0.2,Z:0},
 {X:-0.4,Y:0.5,Z:0},
 ] ;

function (__structure output) main (__number input)
{
 for(var i=0;i < myStructure.length ; i=i+1){
  myStructure[i].Z += (i+1)/500;
  myStructure[i].Z %= 1;  
 }
 var result = new Object();
 result.output = myStructure;
 return result;
}

使用kineme的GL Tools工具，繪製各種不同的geo物件。

（主程式）

(lighiting 物件內)

qc2_w2-4.qtz

「筆記」ＱＣ進階筆記 2-1

範例一：

本範例將透過[javascript]物件，來讀取自定的陣列。

var myStructure = [] ;
var state=true;
function (__number output,__number index) main (__number input)
{
 if(state==true){
  for(var i=0;i<10;i++){
      myStructure[i]=Math.floor(100*(Math.random()));
  }
 }
 state=false;
 var result = new Object();
 result.output = myStructure[Math.floor(input)];
 result.index=Math.floor(input);
 return result;
}

Download qc2_w2-1.qtz

範例二：

本範例將透過多維陣列，建立一個具備x、y、z等標籤的資料結構。

var myStructure = 
 [
  {x:0.1,y:-0.1,z:-0.2},
  {x:0.2,y:-0.5,z:0.1},
  {x:0.3,y:-1,z:0.15},
 ];

function (__structure output) main (__number input)
{
 var result = new Object();
 result.output = myStructure;
 return result;
}

Download qc2_w2-2.qtz

2013年6月6日星期四

[工作坊] Pd-VJing 第二週

本週將透過[pix_sig2pix]，將音訊轉換為影像。

範例一：

(w2_1.pd，主程式)

(subpatch [pd gem-image])

Download w2_1.pd

範例二：

（w2_2.pd)

(subpatch [pd gem-image])

Download w2_2.pd

範例三：

Download w2_3.pd

2013年6月3日星期一

[工作坊] Pd-VJing 第一週

睡不著音像講座『Pd 影像設計』 2013 5月27～7月15日

「Pd」（全名PureData）是一個專門針對聲音合成、影像處理的即時圖形化程式編寫環境。Pd最主要精神在於將資料以「共度（open-ended）」的方式對待，因此在Pd中資料都能夠被轉化成聲音訊號，和對應成不同的視覺圖形，並且因為影音來自同種資料的關係，創作出的作品都別俱共感氛圍。Pd「圖形化界面（Graphial User Interface）」的撰寫環境，讓使用者無需具備任何程式基礎下就能夠上手，因此目前廣泛地被藝術家、設計師等族群使用。

本次課程為期八週，鎖定利用Pd的影像套件GEM，來繪製、設計各種視覺圖形。課程中會不時的跟聲音產生鏈結，但因為課程目標及時間限制，不會再對聲音合成做細部講解，因此欲參加的朋友，請先上過聲音合成的課程，或是自行進修過基礎物件的使用（瞭解聲音的振幅、頻率、波型的差異；熟悉Pd中迴圈、陣列、判斷式的寫法）。

課程內容（預計）
課程為初中級，進度及內容會依照學員的學習視情況調整...

第一週：認識GEM的座標系、基礎GEO物件
範例實作：跳動的太陽系

第二週：基礎自製物件，邏輯判斷式
範例實作：雜訊線條

第三週：進階自製物件，條件控制
範例實作：跳動的音符

第四週：遞迴的運用，陣列宣告
範例實作：有機圖形

第五週：[repeat] 及[separator]的運用
範例實作：曼陀羅

第六週：載入外部影片及圖片
範例實作：VJing

第七週：圖形的材質疊加
範例實作：漫游太空

第八週：載入3D Model，使用freeframe特效
範例實作：聲控飛鳥

第一週的課程：

參考資料：List Of GEM Objects，FLOSS MANUALS

[gemwin]的基本指令：