2013年8月28日 星期三

[GLSL] 入門-4 翻轉影像

uniform sampler2D tex;
uniform vec2 flip;

void main(void){

 vec3 color=texture2D(tex,abs(flip-gl_TexCoord[0].xy)).rgb;
        //透過外部輸入的2維flip變數,重新排列影像pixel的順序。

 color += gl_TexCoord[0].x>0.99 ? 1.0:0.0;//右邊界畫白線
 color += gl_TexCoord[0].x<0.01 ? 1.0:0.0;//左邊界畫白線
 color += gl_TexCoord[0].y>0.985 ? 1.0:0.0;//上邊界畫白線
 color += gl_TexCoord[0].y<0.015 ? 1.0:0.0;//下邊界畫白線

   gl_FragColor=vec4(color,1.0);
}
這是一個翻轉影像的簡單練習,而gl_TexCoord[0].xy這材質座標,是用來讀取外部材質的索引依據(2維的陣列)
download

2013年8月26日 星期一

[GLSL] 入門-3 把貼圖的材質當成陣列使用

uniform sampler2D tex;
uniform vec2 resolution;
uniform float chsize;

void main(void){
 vec2 uv = gl_FragCoord.xy / resolution.xy;
 vec2 center = gl_FragCoord.xy / resolution.xy * 2.0-1.0;
 
 float k = (gl_FragCoord.x+(gl_FragCoord.y*800.0))/(800.0*600.0);
 vec3 col=texture2D(tex,vec2(mod(mod(uv.x*chsize,1.0)*chsize,1.0) ,
               mod(mod(uv.y*chsize,1.0)*chsize,1.0) 
          )).rgb;
 float f=col.r;
  gl_FragColor = vec4(f,f,f,1.0);
}

這個練習到底要表達什麼,我也還說不清楚.. 總之大約就是想透過材質輸入的方式(把音訊訊號轉成灰階陣列圖),
來取代shader不能讀取外部陣列的困擾..然而目前這方式也還不算完全可行就是.. download

2013年8月23日 星期五

[GLSL] 入門-2 透過glsl載入buffer影像


把影像存在buffer中,透過shader讀取不同的材質。
uniform sampler2D tex;
uniform vec2 resolution;
uniform int f;

void main (void)
{

 vec2 uv=gl_FragCoord.xy/resolution.xy;
 vec3 col= texture2D(tex, vec2(uv.x , 1.0-uv.y)).xyz;

 gl_FragColor = vec4( col, 1.0 );

}
file download

2013年8月6日 星期二

[GLSL] 入門-1 矩陣圓球


[example 1] ↓

//沒有光暈的球
uniform vec2 resolution;
uniform float time;
vec2 uv;

vec2 circle(float i){ 
 return vec2(uv+vec2(fract(i/10.0)*2.0-0.9 ,
  fract(floor(i/10.0)/10.0)*2.0-0.9 ));
}


void main(void){
 uv = (gl_FragCoord.xy / resolution.xy)*2.0-1.0;
 float col;
 float k;

 for(float i=0.0;i<100 .0="" 1.0:0.0="" col="" gl_fragcolor="vec4(col,col,col,1.0);" i="" k="" pre="">

[example 2]

//有光暈的球
uniform vec2 resolution;
uniform float time;
vec2 uv;

vec2 circle(float i){ 
 return uv-vec2(fract(i/10.0)*2.0-0.9 ,fract(floor(i/10.0)/10.0)*2.0-0.9 );
}


void main(void){
 uv = (gl_FragCoord.xy / resolution.xy)*2.0-1.0;
 float col;
 float back=abs(time-0.5);

 for(float i=0.0;i<100 .0="" back="" circle="" col="" gl_fragcolor="vec4(col,col,col,1.0);" i="" length="" pow="" pre="">
example download

[工作坊] Pd-VJing 第八週

範例一:模擬池田亮司的風格



在這個範例中,將透過[k_multi_spec]這個物件,來截取不同頻段的音高振幅,再把這些bang的訊號傳遞給我們預先設計好的patch中,即可得到聲音跟影像的完全對應。(類似不同軟體做法可以參考此篇:Audio FFT )



範例二:透過不同的頻段,疊加對應的影片



範例三:頻譜分析圖,模擬常見的音訊頻譜分析效果。




[工作坊] Pd-VJing 第七週

範例一:用音量來控制影片的播放影格。







範例二:模擬VJ的fade 控制器。
VJ實體控制器中,常常可以見到機器中間會出現一個橫軸的滑桿,我們稱呼為cross fader,它通常是用來切換兩個不同的影像素材。本範例則將透過自製的PD界面來模擬此效果。






範例三:把GEM繪製出來的影像,透過[gemframebuffer]離線繪圖物件壓縮成2d影像寫入在buffer中,在跟wabcam的影像透過[k_blend]物件去疊加出不同效果。


Example Download

[工作坊] Pd-VJing 第六週



本週將透過音量的大小,來控制vj表演中常見到的「宇宙穿梭效果」。
音量的值會決定飛行的速度,當音量超出某個自定的閥值時,程式會替換原本的圖片,產生其它的疊加效果。


Example Download

[工作坊] Pd-VJing 第五週



本週的課程將利用滑鼠以及鍵盤,當作音樂及影像的輸入工具。當在螢幕上繪製出圓圈時,每個圓會因為大小以及位置的不同,產生不同的音高及音量。

主程式



子程式(c-circle)



Example Download