2013年6月27日 星期四

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

各位朋友們好,關於經堯老師的QC課程進階筆記

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

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

所以請大家在課程結束後(最後一堂課在 2013 7/8號),

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

感謝大家

2013年6月23日 星期日

「筆記」QC進階筆記 4-1



本週經堯老師跟大家分享他的作品軌跡 (tracks)的創作過程,感謝經堯老師無私的分享作品,透過開放作品程式碼,讓我們更理解了他的創作方法以及作品的意涵,以下為本週課程內容的部分節錄。

var clicked=false;
var control={};
var clock=[];

function dis(x1,y1,x2,y2){ 
 return Math.sqrt(Math.pow((x1-x2),2)+Math.pow((y1-y2),2));
}

function angle(x,y,x1,y1){
 return Math.atan2(y1-y,x1-x);
}

function (__structure outlet,__structure outlet2) main (__number x,__number y,
__boolean click,__boolean reset,__number time)
{

 for(var i=0;i<clock.length;i++){
  clock[i].theta+=clock[i].r/10;
  clock[i].x1=clock[i].x+Math.cos(clock[i].theta)*clock[i].r;
  clock[i].y1=clock[i].y+Math.sin(clock[i].theta)*clock[i].r;
 }


 var result = new Object();
 //if(click==true && clicked==false)
 if(reset){
 clock=[];
 }
 
 
 if(click && !clicked){
  clicked=true;
  control.posx=x;
  control.posy=y;
  control.enable=true;
 }
 if(click && clicked){
  control.posx1=x;
  control.posy1=y;
  control.dis=dis(control.posx,control.posy,control.posx1,control.posy1);
  control.angle=angle(control.posx,control.posy,control.posx1,control.posy1)
 }
 if(!click && clicked){
  clicked=false;
  control.enable=false;
  
  clock.push({
   x:control.posx,
   y:control.posy,
   x1:control.posx1,
   y1:control.posy1,
   r:control.dis,
   theta:control.angle,
  }); 
 }
 result.outlet=control;
 result.outlet2=clock; 
 return result;
}

(draw line)

(iterator)

qc2-w4-1.qtz

[工作坊] Pd-VJing 第四週

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

範例一:
 w4-1.pd

 範例二:

 範例三:


更多可能:

2013年6月15日 星期六

「筆記」QC進階筆記3-2

範例一:

var lines=[];
function (__structure out) main (__number mousex,__number mousey,
__boolean click,__boolean reset,__boolean del,__boolean next)
{
 var result = new Object();
 if(click){
  lines.push([mousex,mousey,0]);
 }//按下滑鼠左鍵時,開始畫圖。 
 
 if(reset){
  lines=[];
 }//按下滑鼠右鍵時,清空畫布。 
 
 if(lines.length>100){
  lines.shift();
 }//線條長度大於100時,從尾巴遞減 
 
 if(del){
  lines.pop();
 }//按下鍵盤←鍵,刪除線條起始頭。  
 
 if(next){
  lines.shift();
 }//按下鍵盤→鍵,刪除線條尾巴。 
 
 result.out = lines;
 return result;
}
qc2-w3-3.qtz

範例二:

var lines=[];

function (__structure out) main 
(__number mousex,__number mousey,__boolean click,__boolean reset,__number timer)
{
 var result = new Object();
 for(var i=0;i<lines.length;i++){
  lines[i][2] -= 0.01;
  if(lines[i][2] < -2 ){
   lines.splice(i,3);
  }
 }//當三角形的Z軸位置小於-2時,刪除三角形。
 
 if(click){
  var size=Math.random()*0.2+0.01;
  lines.push([mousex,mousey+size,0]);
  lines.push([mousex+size,mousey,0]);
  lines.push([mousex-size,mousey,0]);
 }//點選滑鼠左鍵時,畫出一個三角形。
 
 if(reset){
  lines=[];
 }//點選滑鼠右鍵時,清除所有的三角形。
     
 result.out = lines;
 return result;
}


qc2-w3-4.qtz

「筆記」QC進階筆記3-1

範例一:

本週課程以復習上週的內容為主,第一個練習為透過滑鼠來切換兩種不同的資料形態。

var line0=[
{X:0.5,Y:0,Z:0},
{X:0.1,Y:-0.4,Z:0},
{X:0.3,Y:0.2,Z:0},
{X:-0.2,Y:0.1,Z:0},
{X:-0.4,Y:0.3,Z:0},
];//陣列的宣告方式

var line1={
a1:{X:0.5,Y:0,Z:0},
a2:{X:0.1,Y:-0.4,Z:0},
a3:{X:0.3,Y:0.2,Z:0},
a4:{X:-0.2,Y:0.1,Z:0},
a5:{X:-0.4,Y:0.3,Z:0},
};//物件資料結構的宣告方式

function (__structure out) main (__number choice)
{
 var result = new Object();
 if(choice == 1){
  result.out = line0;
 }else{
  result.out = line1;
 }
 return result;
}
qc2_w3-1.qtz

範例二:

透過滑鼠的位移,動態改變陣列的大小,陣列越大時,視覺物件的邊數越多(越圓滑)。
function (__structure out) main (__number segments,__number size)
{
 var result = new Object();
 var lines=[];
 
 for(var i=0;i<segments;i++){
 
  var theta=(i/(segments-1))*Math.PI*2;
  //example1
  //lines[i]={X:Math.cos(theta)/size,Y:Math.sin(theta)/size,Z:0};
  //物件的宣告方式
  
  //example2
  //lines[i]=[Math.cos(theta)/size,Math.sin(theta)/size,0];
  //陣列的宣告方式
  
  //example3
  lines.push([Math.cos(theta)/size,Math.sin(theta)/size,0]);
 }
 //滑鼠的X軸方向,影響物件大小;y軸方向影響邊數。
 result.out = lines;
 return result;
}

 qc2-w3-2.qtz

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程式碼,vertexfragment


Examole download

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

2013年6月8日 星期六

[教學]第一個GLSL的範例


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日 星期五

「筆記」QC進階筆記 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

「筆記」QC進階筆記 2-2

範例一:


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

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()迴圈,讓物件的Z軸資訊不停變動。
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

「筆記」QC進階筆記 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_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 ObjectsFLOSS MANUALS

[gemwin]的基本指令:
  • create
  • destroy
  • reset
  • color
  • view
  • perspec
  • FSAA
  • fullscreen
  • offset
  • dimen




[GEM]的座標系:笛卡兒座標系
  • X向右為正;向左為負
  • Y向上為正;向下為負
  • Z向前為正;向後為負






範例一:3D模型打光


程式碼:
Download


範例二:跳動的太陽系


程式碼: