2014年7月3日 星期四

[QC] 圓表面運動


 延續兩天前的話題,既然連unity都做過圓球表面運動了,那麼很久沒打開都快生鏽發霉的QC(quartz composer)當然也要來一下。QC的優點就是,跟所有的vj軟體配合度都相當高,內部還支援javascript寫作,所以本範例 登"登" ,只花了一個小時就實做出來(對比 unity,我只能嘆聲連連)。
var first=false;
var x;
var y;
var z;

var radius=0.5;
var theta;
var phi;

var VelT;
var VelP;
var num;

var bx1;
var bx2;
var by1;
var by2;
var bz1;
var bz2;

var mySphere=[];
var myLines=[];

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

function (__structure myStructures,__structure myStructures2,__number LinesNum) main (__number time,__number numball,__number limit)
{
  var result = new Object();
  myLines=[];
  
  if(num != numball){
    first=true;
    mySphere=[];
    num= numball;
  }
  
  if(first==true){
    for(var i=0;i<num;i++){
      theta=(6.28*(Math.random()));
      phi=(6.28*(Math.random()));
      
      VelT=0.02*(Math.random())+0.01;
      VelP=0.02*(Math.random())+0.01;
      
      x=radius * Math.cos ((theta)) * Math.cos ((phi));
      y=radius * Math.sin ((phi));
      z=radius * Math.sin ((theta)) * Math.cos ((phi));
      
      mySphere.push({ax:x,ay:y,az:z,
             atheta:theta,aphi:phi,
             avelt:VelT,avelp:VelP
             });
      first=false;
    }
  }

  for(var i=0;i<mySphere.length;i++){    
    
    mySphere[i].atheta = mySphere[i].atheta + mySphere[i].avelt ;
    mySphere[i].aphi =    mySphere[i].aphi + mySphere[i].avelp ;
    mySphere[i].ax = radius * Math.cos ((mySphere[i].atheta)) * Math.cos ((mySphere[i].aphi));
    mySphere[i].ay = radius * Math.sin ((mySphere[i].aphi));
    mySphere[i].az = radius * Math.sin ((mySphere[i].atheta)) * Math.cos ((mySphere[i].aphi));  }
    
  for (var i=0; i<mySphere.length; i++) {
    for (var j=i+1; j<mySphere.length; j++) {  
      bx1=mySphere[i].ax;
      by1=mySphere[i].ay;
      bz1=mySphere[i].az;
      bx2=mySphere[j].ax;
      by2=mySphere[j].ay;
      bz2=mySphere[j].az;
    
      if(dis(bx1,by1,bz1,bx2,by2,bz2)<limit){
        myLines.push({lx1:bx1,ly1:by1,lz1:bz1,
              lx2:bx2,ly2:by2,lz2:bz2
                });
  
      }
    }  
  }

  result.myStructures=mySphere;
  result.myStructures2=myLines;
  result.LinesNum=myLines.length;
  return result;
}


本支程式要轉成32位元開啟,然後還要加裝kineme的GL Line 套件。

Download

2014年7月2日 星期三

[unity3d] 偵測聲音的大小



不管是在Pd,QC,P5等軟體上,即時偵測聲音的大小並用於互動都算是非常簡單的基本功,但在unity好像就沒那麼容易!?我猜測很可能因為unity是遊戲引擎,所以對於訊號輸入都著重在於體感或是傳統鍵盤、搖桿上,所以像是聲音振幅影響物件大小這麼簡單的效果,卻也讓我花了一天時間研究,也有可能是我unity太弱啦(哭哭)。

過程中最主要遇到的問題時,unity可以錄音(Microphone in),但因為他最少都要錄完一秒才存在buffer後才能分析,這也是造成無法即時互動的原因,因為最少都會延遲一秒。在網路上找了又找,玩家們對這件事似乎也都很苦惱,但總算神人到處有,總算在這討論串上找到方法:http://answers.unity3d.com/questions/394158/real-time-microphone-line-input-fft-analysis.html,透過一些延遲的方法,unity總算能夠即時聲音偵測啦。

這邊是我修改後的code,可以下載來玩看看。download




2014年6月27日 星期五

[unity3d] 圓球表面運動



回頭看:[跟p5以及pd的比較]

最近因為工作的需求,開始得使用一些商業軟體去執行專案,而unity就是目前互動業界最愛的工具軟體之一,所以這幾周花了一些時間了解unity的工作環境跟c#這語言。這兩天接觸的心得是,unity程式寫作的方式跟p5(java)也還算是大同小異,只是prefabs以及gameObject的用法上我還是有些無法捉摸,常常會動態產生無法預期的物件..真是苦惱啊...

而這支程式跟過往p5寫作一樣,是利用arraylist的方式產生多顆動態的球,不過在畫線方面,因為unity畫線的功能比較不完善,所以是利用第三方的套件Vectrosity去完成,並且線的產生方式因為跟gameObject產生方式也不同,所以也是讓我苦惱了好一陣。

總之目前這一年看來是會跟unity綁在一起了,也只能努力適應了~~
SoureceCode

2014年6月16日 星期一

[GLSL]入門-7 實做克拉尼圖形



德國物理學家Ernst Florens Friedrich Chladni,於1786年開始從數學方面研究聲波,他是算出有關聲音傳播的數量關係的第一個人,因此被譽為聲學之父。

克拉尼的最有名的成就之一是發明一種技術來表明剛性表面振動的各種模式,此模式產生的圖形稱為克拉尼圖形(chladni pattern)。他在金屬片表面鋪上沙子並用一張弓拉動金屬片邊緣,金屬版的振動導致沙子移動和集中在節線上, 也就是震動較小的地方。




2014年6月7日 星期六

[音像實驗室] 20/30 正弦波的累加




離上回實驗(19/30)過後三個月的新作品。上班的確消耗掉我不少時間,但是最大的問題是,在經過了10多種不同的音像實驗後,要能想出新作品真的是越來越難..

但我一定會完成這計劃的。

「Pd筆記-74」 [tabminmax]判斷陣列中最大以及最小值

2014年5月31日 星期六

[傅立葉轉換]把正弦波堆疊成方波

http://zhuanlan.zhihu.com/wille/19759362 

上面的連結談到了一些簡單的傅立葉轉換觀念,我個人覺得文章蠻簡單易讀的,
所以把這篇文章轉給大家。我另外把文章提到的一些公式以及概念用pd實做出來, 大家不仿在讀文章時,邊打開檔案來玩,也許會更能理解篇文章的內容。






download

另外一個範例


download

2014年4月30日 星期三

[GLSL]入門-6 把陣列轉換成材質

[shader code] ↓

uniform sampler2D tex;
uniform vec2 resolution;

float readtex(float id,vec2 uv){
 vec2 p=uv;
 
 //將索引值換算成座標
 p.x=(mod(id,12.0))/ 12.0 + 0.0415;
 p.y=1.0-((float(floor(id/12.0))/ 12.0) + 0.0415);
 
 //把座標上的色彩,轉換成灰階值。
 float cc= dot(texture2D(tex, p).rgb, vec3(0.2126, 0.7152, 0.0722));
 
 return cc;
}

float rectangle(vec2 uv, vec2 pos, vec2 size) {
 float t = 0.0;
 if ((uv.x > pos.x - size.x / 2.0) && (uv.x < pos.x + size.x / 2.0)
  && (uv.y > pos.y - size.y / 2.0) && (uv.y < pos.y + size.y / 2.0)) {
 t = 0.3;
 }
 return t;
}

void main(void)
{ vec4 color;
 vec2 uv = (gl_FragCoord.xy/resolution.xy);
        
 //讓材質只畫在左下角
 if(uv.x<0.25 && uv.y<0.25){
  color = texture2D(tex, fract(uv*4.0)).rgba;
 }else{
  color =vec4(0.0);
 }
 
 float rect=0.0;
 
 for(float i=0.0;i<36.0;i++){
  float a=readtex(i*4.0    ,uv);
  float b=readtex(i*4.0+1.0,uv);
  float c=readtex(i*4.0+2.0,uv);
  float d=readtex(i*4.0+3.0,uv);
         rect += rectangle(uv,vec2(a,b),vec2(c,d));
 }
        
 //把換算出來的紫色矩形加上原本外部的材質陣列
 color=color+vec4(rect,0.0,rect,0.7);
 
 
 gl_FragColor = vec4(color);
}



雖然glsl裡面有陣列,但我們並無法從外部給批次浮點數到陣列中。
因此在這個實驗中把外部值,轉換成材質後,再丟進gpu裡面去讀取轉化。

首先在gem裡的繪製矩型,並把它的位置跟長寬轉換成灰階圖
(示意圖左下角),一個矩形就會有四個參數,到gpu後我在去讀取這四個參數,把它轉換繪製成矩形(紫色方塊)。

2014年4月13日 星期日

[演算動畫] LOOP-5

我們只能做著平常就在做的事情,假裝世界一如過往的度過一切哀傷。

我好想你,我的人生老師,我的朋友。


2014年3月10日 星期一

[音像實驗室] 19/30

[P5 筆記-1] 如何在mac的作業系統下觀看openprocessing 的範例

之前在pd有一些演算法或數學的問題時,我會到OpenProcessing 這網站找尋解答,因為程式原理、數學公式是共通的,所以就算是pd的問題,也多半可以在OpenProcessing上得到解答!

但有一件事情讓我很困擾,就是chrome 目前只支援32位元,可是新版的java需要64位元的瀏覽器才能使用,因此在mac上觀看OpenProcessing這網站時,官方會建議你使用Safari或者Firefox,然後不知為何在我的電腦上(osx 10.9.2) 使用safari觀看openprocessing時,就算你安裝了最新版的Java,依然不能開啟範例(如下圖),並且就算你再次安裝新版,裝了也依然無效。所以我就只能使用firefox來觀看example。


所以首先要有firefox瀏覽器,並且安裝最新版java,最後還須還要到mac 的系統偏好設定去開啟java的一些狀態。例如觀看http://www.openprocessing.org/sketch/6753 這範例時,你必須打開java的控制面板,在安全選單下的編輯網站清單,新增http://www.openprocessing.org/以及http://c0415048.cdn2.cloudfiles.rackspacecloud.com/ 這兩個網站後,才能夠呼叫到程式中需要的函示庫,範例才能夠正確執行。






[表演]春鏘; 2014春季ㄎㄧㄤ遊 (台北場)



http://www.gigguide.tw/event-10018

2014春季ㄎㄧㄤ游(大電動會)啟動!!!

來自瑞士的重量級實驗聲響藝術家 Yannick Barman

以及台灣各界新銳電馭專門創作者共同演出:
王新仁、柯智豪、幽法、KBN、Sonic Deadhorse、世外桃源、落差草原WWWW、Tunnel of Light、Mare Cruiser、The Tic Tac、Zephec、Cotton Disco.....

超過10組聲音、影像、音樂團隊,傳輸接力Non-Stop,聯合驅動超極限電氣遊樂園!

2014年3月3日 星期一

「Pd筆記-71」 [switch]切換多重輸入物件

[switch]物件的功能跟[gate]的功能正好相反,一個是從多個輸入選項中選擇其中一個選項輸出;另一個則是單一輸入卻有多個輸出選項。

並且[switch]物件非常適合用來當作資料表輸出的判斷,以左下方的範例來說,可以預先儲存兩組數值在message的物件中,當[trigger]物件上方的數值變動時,就能把一組資料表,透過此方式輸出。

當然我們也可以透過[list]物件來達成此功能(右下方範例),畢竟程式語言有趣的地方就在於,能用多種寫法完成同一目的。




2014年3月2日 星期日

「Pd筆記-70」 mac安裝pd須知

蘋果從山獅過後就把x11系統拿掉了,因此假使你的os 系統是10.7之後的版本,在安裝完pd之後,你還需要安裝x11

除了這件事情之外,pd的安全性也未經過mac的審查(我猜測是開源軟體關係,但請大家不用擔心,完全沒問題的),所以還需要到mac的系統偏好設定>安全性與隱私的選項,把來源改成「任何來源」,執行完這兩個步驟後,便可正常使用pd(否則很可能每次開啟都會自動關閉)。


2014年2月17日 星期一

[作品]甜蜜風動畫



這幾年很流行糖果般顏色、及果凍般彈跳風格的motion graphic 片頭動畫,
這種風格網路上暱稱為sweet style,當初剛看到時,就覺的應該很適合用pd的風格
設想歸設想,自己到是直到最近才有空嘗試!恩,效果似乎不錯呢。

因為是程式寫出來的動畫,所以可以有很多控制在裡面,自己這個版本則是增加了時間軸去影響物件發生的時間點,想必未來應該會有很多可能!!

因為最近心情非常暴走,所以本專案不囉唆就直接開源了!!!
sourcecode: https://github.com/aluanwang/sweet-motion

2014年2月10日 星期一

[workshop] 2014 Pd 聲音設計春季班


去年只有開過一期聲音設計,我想今年應該也會是..
所以對pd有興趣的朋友,千萬別錯過這個機會,
讓我們運用邏輯、迴圈,一起來製造些有趣節奏吧!

立即報名:http://insomniacafe.kktix.cc/events/b217554b

時間:2014/2/24~2014/4/21 每週一晚上7:00-9:00 每次二小時,共八週
地點:睡不著咖啡館 泰順街60巷8號
人數:16名,學員需自備筆電以及耳機。
費用:3000元 於2/17前完成報名並繳費者,可打九折。

課程大綱:
2/24 軟體界面,基礎邏輯物件
3/03 波型、各式振盪器、加法合成、減法合成
3/10 條件判斷式、迴圈、鍵盤合成器
3/17 陣列、封包、外部音源載入、自動音樂盒
3/24 陣列進階運用、粒子合成,美江機器人
3/31 自製物件、效果器、序列鼓機
4/07 midi通訊、mid播放、外部套件使用、OT-Sequencer、DIY2
4/14 網路通訊、音訊分析FFT、實作Touchosc
 

2014年2月6日 星期四

[OF] 解決of能夠build,卻不能run的問題

這兩天開始玩OF,因為是超級新手所以過程遇到許多問題,第一個問題是為什麼有些官方範例Build成功後卻沒有自動Run test?在網路上找答案,果然也有其他使用者遇到同樣問題,我的解決方法參考這個使用者:http://danielmclaren.com/node/188

以下是解決辦法(我的系統 OSX 9.0 ,of_v0.8.0_osx,Xcode 5.0.2)

步驟一:點選 xcode navigate bar > Product > Scheme >Edit scheme



步驟二:點選左側run的選項,並且子項目 Executable 從None 選成你目前的專案

步驟三:這時候重新按快捷按鍵command+b Build,專案便能夠順利編譯執行。