2013年4月29日 星期一

「心得」我的人生困境

其實會發這篇文章的原因有很多,不過就算知道再多原因,目前也改變不了結果,所以只能默默地記錄下這一切.....

有一些事情在我的人生中不停上演,仿佛就是受到詛咒一般。這情節就像是觀看民視的肥皂劇,你早早就猜透接下來爛透了的劇情,但卻還是無可避免的沈迷下去…

關於這個沒有判斷式的迴圈事件(continue;),我還在努力的尋找對應方法(break;)。

生活情節一
我:哎呦,今年都沒有新作品耶,不行!不行~我要來加緊趕工一下…

朋友A:嗨~~阿亂!你聽過「OpenGL」嗎?它是「Pd」影像的原生引擎耶,你要在Pd要做酷炫的影像,就不能不知道它…

我:噢噢噢噢~~真的假的(google動作中),噢噢噢,真的是這樣耶,太屌了~我要來好好的研究它。

(兩個月過去)我:幹!!OpenGL超難的!!但我終於會了!耶,我要運用它來做作品…

生活情節
朋友B:科科~阿亂阿亂(調侃貌),你知道「freeframe」嗎?它是個很強的影像處理框架耶,透過它你本來的影像就會更厲害了呦!!就像 Candy Crush 中的條紋糖果加上軟糖產生的碰撞一樣厲害呦~~科科(打開酷炫範例中..)

我:幹幹幹~~這太強了,我要崩潰了(哭)!!這真的太強了,我也要學!!(動作:上博客來買書籍中..)

(三個月過去) 我:幹!!這真的太難了,我幾個月來全心全意地研究這一切,花了所有時間,但我終於會了!!而且不要說「free frame」,我連「core image」也跟著學了~~噢耶,好!!我總於可以努力來做作品了,況且數位藝術節要到了…

生活情節
朋友C:(笑cc的看著自己螢幕)

我:噗,你在淫笑什麼啦!?

朋友C:你知道「OpenCL」嗎?不是老招的「OpenGL」喔。我最近放棄「P5」改用「Quartz Composer」,就是因為他的運算效能超強啊(笑個不停...)

我(內心):咦~~~?好像真的有點強,慘了!不能落於人後,我也要來學,立馬報名課程助教…

(幾個月過去)我:好難噢,QC的邏輯跟其他軟體都不同,我還是回去用Pd好了(看著從網路抓下來的幾百個範例檔歎氣)。唉,花了那麼多時間研究都浪費了,算了..還是來做作品好了(打開Pd,看著半年多前到現在仍然空白的程式碼)

FB塗鴉墻動態-------------------------

朋友A,失聲祭作品發表中..

朋友B,國外巡迴演出中..

朋友C,Candy crush 顯示為破關狀態..

----------------------------------

生活情節四........

你們真的覺得我還要舉例下去嗎?我的最近的人生就是由這些組成的阿,就算明知山有虎,也知道好的作品未必要有高超技術,但你就是很喜歡厲害的技術。所有人都知道kraftwerk 1970年代就出道了,也瘋狂的做了許多屌作,那時賈伯斯的蘋果一號都還沒個影勒出,但有何關係,人家作品不也還是好的不像話嗎?!但技術這東西在新媒體領域中,就像是裹著糖衣的甜點,就是好玩、好吃、吸引人啊....

所以!?一切都回到原始慾望的問題了嗎?還是可以退到資本主義跟共產主義的討論上,一臉嫌惡的說著:「邪惡的資本主義,讓所有的人都盲目」。開始拒絕所有技術,高調的說著「畫畫先從調配化學研料開始」。咳,好像也不是這樣啊.......

囉哩叭唆地講了一堆垃圾的同時,突然想到同志朋友最愛說的一句話「你覺得你不是gay,那是你還不夠瞭解你自己」。

幹!! 我是真的是很不了解啊....



(結尾)開心的對著朋友Z:嗨,你聽過「CUDA」嗎?它是....



ps.所有事件透過亂數隨意拼湊,全是虛構的,請朋友A,B,C.....不要隨便跳進來承認

2013年4月28日 星期日

[筆記] 在Xcode中撰寫OpenGL

Xcode版本:0.46.2

步驟一:打開Xcode,建立一個新的專案(Create a new Xcode project)。


步驟二:在OS X 底下選擇 Command Line Tool

步驟三:建立專案名稱,程式語言選擇C++



步驟四:點選專案的icon,到Build Phases 的選單上找到Link Binary With Librarise 的欄位
,新增兩個資料庫,GLUT.framework 及 OpenGL.framework。


步驟五:點選main.cpp檔案,把下列程式碼貼上。
#include <iostream>
#include <GLUT/GLUT.h>

void display()
{
    glClear(GL_COLOR_BUFFER_BIT);
    glBegin(GL_POLYGON);
    glVertex2f(-0.5, -0.5);
    glVertex2f(-0.5, 0.5);
    glVertex2f(0.5, 0.5);
    glVertex2f(0.5, -0.5);
    glEnd();
    glFlush();
}
int main(int argc, char ** argv)
{
    glutInit(&argc, argv);
    glutCreateWindow("Xcode Glut Demo");
    glutDisplayFunc(display);
    glutMainLoop();
}


步驟六:運行檔案,Run

(結果:跳出一個視窗,中間繪製一個白色矩形)

2013年4月24日 星期三

[筆記]syphon的安裝和簡易使用

Syphon 是一個開源的framework專案,它讓Mac系統下的不同的軟體,能夠分享彼此產生的影像,因此我們可以把Pd產出的影像丟到P5,或是把P5的影像丟到QC。讓不同軟體的視覺影像可以整合、融接在一塊,產出千變萬化的作品。

在以下練習中,我會試著把Pd產生的影像丟到QC中,並且透過QC的影像濾鏡 core image filter 去調變影像。

  • MAC 系統:10.8.3
  • PD版本:0.42.5
  • GEM版本:0.93.3

步驟一:透過終端機,把syphon 專案從google code下載回來,打開終端機並鍵入:svn checkout http://syphon-implementations.googlecode.com/svn/trunk/ syphon-implementations-read-only,整個syphon project 便會下載回你的電腦,檔案會儲存在在:/Users/aluan_mac/syphon-implementations-read-only 入徑下



步驟二:
找到檔案名為 syphon.pd_darwin.xcodeproj的專案,用xcode 打開,並開始編譯。注意!我的Pd 雖為 0.42.5的版本,不過GEM 卻是0.43的版本(0.93.3),所以編譯時請注意您自己的GEM 版本。

  • 先編譯 Syphon.xcodeproj,按下command+b


  •  再編譯syphon.pd_darwin


  • 編譯好後會得到一個名為syphonserver.pd_darwin的檔案


步驟三:把(syphonserver.pd_darwin)檔案放置/Applications/Pd-extended.app/Contents/Resources/extra資料夾內,讓Pd開啓時能夠自動載入此外掛

步驟四:到syphon下載simple client 的應用程式, 及Syphon 提供QC的外掛,Syphon For Quartz Composer Public Beta 2.dmg

步驟五:解壓縮後,把syphon.plugin 的檔案放置在~/Library/Graphics/Quartz Composer Plug-Ins/ 資料夾內。

步驟六:下載pd2qc這個專案,打開pdServer.pd這個檔案,開啟toggler產生GEM 視窗,如果Pd 的console 視窗會出現此訊息,代表你已經成功將訊息送出。

[syphonserver]: SyphonServer: start rendering
[syphonserver]: pool is: 0x8a3350
[syphonserver]: context is : 0x13e2600
[syphonserver]: Server is: 0xb958b0
[syphonserver]: Server is: OMG
saved to: /Users/aluan_mac/Desktop/pd2qc/pdServer.pd

步驟七:打開pd2qc.qtz這檔案,開啟viewer後就可看到 pd傳過來的影像。




[筆記]經堯老師的Quartz Composer 8-4

範例一:(圖層疊加),讓兩個影像疊加在一起,並讓影像的增益被[LFO]控制。



kernel vec4 coreImageKernel(sampler A,sampler B,float LFO)
{
 return sample(A, samplerCoord(A)) +sample(B, samplerCoord(B))/LFO ;
}

8-6.qtz



範例二:(鏡射影像),讓影像的像素左右反轉排列。



kernel vec4 coreImageKernel(sampler image)
{
   return sample(image, vec2(samplerSize(image).x-samplerCoord(image).x,samplerCoord(image).y));
}
8-7.qtz

[筆記]經堯老師的Quartz Composer 8-3


Core Image 是一項 Mac OS X 特有的影像處理的技術,它提供撰寫影像處理的捷徑。
以下的幾個示範中會透過撰寫[[Core Image]]物件來自製自己的影像處理功能。

更多[Core Image]的語法說明

範例一:(霓虹燈效果),讓原本的影像顏色乘於一個跳動的紅色。
kernel vec4 coreImageKernel(sampler image, __color color)
{
 return sample(image, samplerCoord(image)) * color;
}


範例二:(滑動的影像),讓兩個影像間交互出現。


kernel vec4 coreImageKernel(sampler imageA,sampler imageB,float lfo)
{
 return (samplerCoord(imageA).x>lfo) ? sample(imageB, samplerCoord(imageA)) : sample(imageA, samplerCoord(imageA));
}
8-5.qtz

[筆記]經堯老師的Quartz Composer 8-2

上一個練習中,我們學會把輸出單張影像,而這個練習中則是要練習輸出影片。

方法一:透過[Export To Movie] 物件來輸出。




  • 接上[Export To Movie]物件後,視窗便開始錄影,結束錄影的方式是刪除該物件(如上面的示範影片),最後錄製的檔案會放置在:/Users/aluan_mac/Movies 資料夾中。


方法二:使用QC內建的輸出功能。

  • 在選單中,選擇File>Export as QucikTime Movie 


  • 選擇完輸出檔案的位置後,會跳出一另個視窗讓你選擇影片大小和時間長度。

  • 輸出的檔案因為編碼的問題,有時候無法直接用quick time 觀看,建議點選檔案後,再按下「space 鍵」即可完成預覽。


[筆記]經堯老師的Quartz Composer 8-1



在QC設計好的圖形,當我們想要截取出來在平面設計使用時,最快速的方法是螢幕截圖,不過螢幕的截圖解析度太低(72 dpi),在印刷上(300 dpi)使用時,圖片會不夠清楚。所以當我們要在QC上輸出大圖時,就需要使用到其它的Plugin, [ImageExporter]來解決。

步驟一:安裝Quartz Composer ImageExporter此外掛,此外掛需要自行編譯,編譯的過程可以參考經堯老師的操作影片。如果你的系統是10.7以上,可以下載這個已經編譯好的檔案

步驟二:將接壓縮後的檔案放置於/Library/Graphics/Quartz Composer Plug-Ins 資料夾內。

步驟三:重開QC並撰寫程式如下


8-1.qtz

步驟四:[Virtual Demultiplexer]的功用在於可以把資料分流,類似Pd的[gate]物件,所以當按下keyboard的「↑鍵」時,[Pulse]會快速的把訊號送到[Virtual Demultiplexer],始影像切換到[Image Exporter]物件上。當圖形傳送至[Image Exporter]上時,便會輸出成.png檔,在你指定的路徑上。

--------------------------------------[下一個範例↓]---------------------------------------


當我們要改變圖片輸出的大小時,可以透過[Render in Image]物件來達成。
步驟一:把繪製好的圖形放置於[Render in Image]物件中。


步驟二:控制[Render in Image]的 Pixels Wide以及Pixels Height 來改變圖片輸出的大小

步驟三:按下keyboard的「↑鍵」輸出圖片。

2013年4月23日 星期二

[筆記]經堯老師的Quartz Composer 7-4


OT-BALL,是社群OpenLab Taipei 社員們的共同創作,遊戲規則是每個人都作一段圓球動畫,當自己的動畫跑完時,會傳遞osc訊號給下一個玩家,驅動對方的動畫進行,如果人數夠多可以形成一個圓圈時,動畫就會依序執行,形成一個綿延不絕的創作。

本練習分為兩個部分,第一部分不用osc訊號,只在同一個螢幕中,反覆執行兩個動畫。
第二部分才是透過osc去驅動另一隻動畫。


(課程一,同個視窗反覆地執行兩隻動畫)

(課程二,不同視窗執行不同動畫)

7-7.qtz

--------------------------------------[下一個範例↓]---------------------------------------


 7-8_a.qtz




[筆記]經堯老師的Quartz Composer 7-3

OSC(Open Sound Control),是一種有別於midi訊號,新的音樂軟體間的通用的通訊規格。如今不止在音樂軟體間,不同開源軟體的訊號傳遞也都可以透過它。訊息規格為 「/name 變數」,因此我們可以命名一組「/qc 1」的訊號給其他軟體使用。

更多不同的軟體間的osc使用方式,P5 to PdPd to QC

步驟一:QC傳遞osc訊號可以透過[OSC Sender]物件,它可以傳遞五種不同的訊號
包括:String,Boolean,Index,Float,Floats 等。



步驟二:透過[LFO]產生兩組不同的訊號給[OSC Sender]。
7-6_send.qtz

步驟三:建立一個新的檔案,並且透過[OSC Receiver]來接收訊號。
7-6_receive.qtz

ps.請把[k_debug]物件放置於:/Users/User Name/Library/Graphics/Quartz Composer Patches之料夾內。

操作影片:

2013年4月22日 星期一

[筆記]經堯老師的Quartz Composer 7-2



FreeFrame是知名的開源影像處理架構,它用於即時視訊處理及增添各種視覺效果。

我們可以在QC中使用FreeFrame的各種效果,安裝方法如下:

步驟一:Pete Warden的網站,去下載:Freeframe CoreImage Effects - Mac 10.4+

步驟二:解壓縮後把FreeFrame 整個資料夾放到這個資料夾下:/Library/Application Support/

步驟三:Tom的網站去下載名為「vvffgl」的plugin

步驟四:解壓縮後,把檔案「FFGLQC.plugin」放到入徑:/Library/Graphics/Quartz Composer Plug-Ins 的資料夾內

這時候其實就已經安裝FreeFrame完畢,假使你還有vj軟體「Arena」,你還可以到路徑:/Applications/Resolume Arena 4.1.3/plugins/vfx 底下,並把檔案全部複製移動到/Users/aluan_mac/Library/Graphics/Freeframe Plug-Ins 底下(如果沒有Freeframe Plug-Ins 的資料夾,請自行建立),這樣QC可也使用Arena的影像外掛了。

步驟五:重開QC後,呼叫一個名為[FreeFrame Plugin]的物件。
(這時候還沒有載入任何效果)

步驟六:選取物件,按下快捷鍵command +2 ,打開設定視窗,選取你想使用的效果
,本範例使用[Wave]效果。



步驟七:完成效果

[筆記]經堯老師的Quartz Composer 7-1


本週的重點在使用QC內建的視覺濾鏡,以及Freeframe等等,第三方的影像濾鏡。

步驟一:從filter視窗中,找到影像濾鏡。位置:Library>Image>Filter


步驟二:建立[video input]打開webcam攝影機輸入,並套用[ASCII Art]的效果,即可看到webcam影像被ASCII的文字重新描繪過。



--------------------------------------[下一個範例↓]---------------------------------------

(把圓球套用成[ASCII Art]的效果)
另外我們也可以透過[Render in Image],把本來的向量物件,轉化成點陣圖後再套用濾鏡效果。

步驟一:建立一個左右跑的圓球


步驟二:把步驟一的程式,放置於[Render in Image]物件內後,再套用濾鏡效果。


[教學]Puredata 聲音設計 8

本週新物件
1.[import]
2.[udpreceive]
3.[udpsend]
4.[moses]
5.[split]
6.[unsig~]
7.[fiddle~]
8.[env~]

本週新套件[DIY2],[RJDJ]

課程目標:
1.網路連線
2.解析聲音訊號
3.使用第三方資料庫

進階學習:
Designing Sound



Example 8-1
w8-1.pd


Example 8-2


Example 8-3

Example 8-4




[對照]蝦爸的p5範例 6-2

[Processing Example]


本範例乍看之下,會像是齒輪不停的冒出,這時候你可能會心想:不停的產生物件,程式不會當掉嗎?
其實循環不停的視覺效果,是透過偏移全體物件達成的假象,因此本範例不會有程式crash的問題。

[Processing code] ↓

import saito.objloader.*;
OBJModel model;
float gear=6;
float gear_s=0.1;

void setup() {
  size(600, 300, OPENGL);
  model=new OBJModel(this, "Gear.obj", TRIANGLES);
  model.scale(100);
  model.translateToCenter();
  noStroke();
}

void keyPressed() {
  if (key=='a') {
    gear_s=gear_s*1.1;
  }
  else if (key=='s') {
    gear_s=gear_s/1.1;
  }
}

void draw() {
  gear_s=gear_s*1.1;
  background(0);
  lights();
  directionalLight(255, 0, 0, -1, 3, -2);
  directionalLight(125, 155, 0, 1, -3, -2);
  camera(mouseX, mouseY, 400, 0, 0, 0, 0, 1, 0);
  recursion(0, 0, 0, gear_s, 10);
  if (gear_s>0.214) {
    gear_s=gear_s/2.14;
  }
  else if (gear_s<0.0001) {
  }
}

void recursion(float e_x, float e_y, float e_z, float s, int i) {
  pushMatrix();
  translate(e_x, e_y, e_z);
  scale(s);
  model.draw();
  popMatrix();

  if (i>0) {
    recursion(0, e_y/2+gear*s*2, 0, s*2, i-1);
  }
}

[Pd Example]


Pd的範例多加上一個人型的3D 模型,是我個人小小的惡趣味。

[Pd code] ↓



2013年4月21日 星期日

[對照]蝦爸的p5範例 6-1

[Processing Example]



本週的挑戰依舊圍繞在遞迴的各種運用,在第一個練習中,蝦爸運用遞迴的特性,讓粒子發散時,新分裂出來的粒子同享舊粒子的位置及大小,因此煙火行進時能夠產生自然的分裂 ;再加上粒子的半徑會依時間而減少,使得本範例執行起來時,呈現如同煙火一般效果。

[Processing code] ↓

ArrayList group;

void setup() {
  size(600, 400, OPENGL);
  background(0);
  group=new ArrayList();
}

void draw() {
  fill(0,10);
  rect(0,0,width,height);
  for (int i=0;i<group.size();i++) {
    ((tree)group.get(i)).update();
    if ( ((tree)group.get(i)).r<=0) {
      group.remove(i);
    }
  }
  for (int i=0;i<group.size();i++) {
    ((tree)group.get(i)).display();
  }
}

void mousePressed() {
  int size=(int)random(5, 10);
  for (int i=0;i<size;i++) {
    group.add(new tree(mouseX, mouseY, 5, random(360)));
  }
}


class tree {
  float px, py;
  float r;
  float angle;
  float v;
  tree(float e_px, float e_py, float e_r, float e_angle) {
    px=e_px;
    py=e_py;
    angle=e_angle;
    r=e_r;
  }
  void update() {
    px=px+r*0.8*cos(radians(angle));
    py=py+r*0.8*sin(radians(angle));
    angle=angle+random(-5, 5);
    if (random(20)>19 ) {
      float temp_r=random(1, r);
      group.add(new tree(px, py, temp_r*1.1, angle+random(-10, 10)));
      r=r-temp_r;
    }
    if (random(2)>1) {
      r=r-0.05;
    }
  }

  void display() {
    noStroke();
    fill(255);
    ellipse(px, py, r*2, r*2);
  }
}

[Pd Example]


Pd與p5在本範例撰寫時較大的差異為,粒子的殘影效果是透過[framebuffer]製造出來的,把繪製好的圖像存在framebuffer,在利用buffer的alpha值稍微透明(0.94),因此舊有的影像,便會跟新的影像疊合在一起,呈現出殘影效果。

[Pd code] ↓


(pd subpatch [pd feedback])



(main.pd)


(firework.pd)