各位朋友們好,關於經堯老師的QC課程進階筆記
經堯老師本人想要在課程結束後,在更有系統地整理釋出
讓整體教學的品質會更好。
所以請大家在課程結束後(最後一堂課在 2013 7/8號),
再到睡不著音像講座觀看完整記錄
感謝大家
2013年6月27日 星期四
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
2013年6月15日 星期六
「筆記」QC進階筆記3-2
範例一:
qc2-w3-3.qtz
範例二:

qc2-w3-4.qtz
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; }
範例二:
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; }
範例二:
透過滑鼠的位移,動態改變陣列的大小,陣列越大時,視覺物件的邊數越多(越圓滑)。
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月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。
Examole download
利用GLSL的vertex的功能,變形物件的外觀,並且透過[pix_sig2tex]的功能,賦予物件一直變動的材質(音訊產生材質),加上fragment的邊界演算,讓物件表面看起來仿佛玻璃般一樣。(影片被youtube消音了,囧)
物件變形的GLSL程式碼,參考memo的Amoeba Dance
邊界演算的GLSL程式碼,vertex、fragment。

Examole download
更多透過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日 星期六
[教學]第一個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
範例一:


qc2_w2-3.qtz
範例二:
在javascript物件內,利用for()迴圈,讓物件的Z軸資訊不停變動。
使用kineme的GL Tools工具,繪製各種不同的geo物件。
qc2_w2-4.qtz
運用資料結構,建立多顆不同座標的圓球,並且設定一個時間變數,讓整體圓球在以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; }
(主程式)

(lighiting 物件內)
qc2_w2-4.qtz
「筆記」QC進階筆記 2-1
範例一:
本範例將透過[javascript]物件,來讀取自定的陣列。
Download qc2_w2-1.qtz
範例二:
Download qc2_w2-2.qtz
本範例將透過[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 第二週
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物件
範例實作:跳動的太陽系
第二週:基礎自製物件,邏輯判斷式
範例實作:雜訊線條
「Pd」(全名PureData) 是一個專門針對聲音合成、影像處理的即時圖形化程式編寫環境。Pd最主要精神在於將資料以「共度 (open-ended)」 的方式對待,因此在Pd中資料都能夠被轉化成聲音訊號,和對應成不同的視覺圖形,並且因為影音來自同種資料的關係,創作出的作品都別俱共感氛圍。Pd「圖形化界面(Graphial User Interface)」的撰寫環境,讓使用者無需具備任何程式基礎下就能夠上手,因此目前廣泛地被藝術家、設計師等族群使用。
本次課程為期八週,鎖定利用Pd的影像套件GEM,來繪製、設計各種視覺圖形。課程中會不時的跟聲音產生鏈結,但因為課程目標及時間限制,不會再對聲音合成做細部講解,因此欲參加的朋友,請先上過聲音合成的課程,或是自行進修過基礎物件的使用(瞭解聲音的振幅、頻率、波型的差異;熟悉Pd中迴圈、陣列、判斷式的寫法)。
課程內容(預計)
課程為初中級,進度及內容會依照學員的學習視情況調整...
第一週:認識GEM的座標系、基礎GEO物件
範例實作:跳動的太陽系
第二週:基礎自製物件,邏輯判斷式
範例實作:雜訊線條
第三週:進階自製物件,條件控制
範例實作:跳動的音符
第四週:遞迴的運用,陣列宣告
範例實作:有機圖形
第五週:[repeat] 及[separator]的運用
範例實作:曼陀羅
第六週:載入外部影片及圖片
範例實作:VJing
第七週:圖形的材質疊加
範例實作:漫游太空
第八週:載入3D Model,使用freeframe特效
範例實作:聲控飛鳥
程式碼:
範例實作:跳動的音符
第四週:遞迴的運用,陣列宣告
範例實作:有機圖形
第五週:[repeat] 及[separator]的運用
範例實作:曼陀羅
第六週:載入外部影片及圖片
範例實作:VJing
第七週:圖形的材質疊加
範例實作:漫游太空
第八週:載入3D Model,使用freeframe特效
範例實作:聲控飛鳥
[gemwin]的基本指令:
[GEM]的座標系:笛卡兒座標系

範例一:3D模型打光
程式碼:
Download
範例二:跳動的太陽系
- create
- destroy
- reset
- color
- view
- perspec
- FSAA
- fullscreen
- offset
- dimen
[GEM]的座標系:笛卡兒座標系
- X向右為正;向左為負
- Y向上為正;向下為負
- Z向前為正;向後為負

程式碼:
Download
範例二:跳動的太陽系
訂閱:
文章 (Atom)