Processing 筆記 （八）- 影片播放

import processing.video.*; //導入 video 程式庫
Movie movie; //宣告 Movie 物件

void setup(){
  size(320, 240, P2D);
// 設定呈像螢幕大小，P2D表示使用快速2D算圖
  movie = new Movie(this, "bball.mov");
/* 初始化 movie 物件，並導入影片檔，其中 this 指主程式類別 */
  movie.loop();
}

void movieEvent(Movie movie){
//讓 quicktime movie 通知 Processing 有一個畫格已經準備好可以被播放
  movie.read();
/* 由 Movie 類別中呼叫 read() 函數，以便讀入當前畫格資料至 Movie 類別中，準備呈像 */
}

void draw(){
  image(movie, 0, 0);
// 將當前的畫格按照指定的左上角座標，繪製到呈像視窗
}

Processing 筆記（七）- 顯示圖片

1. PImage 類別（class）用來處理圖片的顯示與縮放，可在程式中的任何地方宣告 Pimage 物件，通常最好置於程式碼頂端。
2. PImage 宣告完成之後，可使用 loadImage( ) 函數來載入檔案。loadImage( )函數之引數設定，可以是系統檔案夾中的圖片，也可以是網址。圖檔必須置於程式碼同一個檔案夾，或置於 processing 主程式檔案夾。
3. image( ) 函數需與 loadImage( ) 一起使用，其用法為 image(PImage變數名稱, x座標, y 座標）或  image(PImage變數名稱, x座標, y 座標, 寬度, 長度）。其中座標是指圖形之左上角所在位置。

PImage img; //宣告 PImage變數為 img

void setup(){

  size(400, 400); // 指定呈像視窗大小

  img = loadImage("test.jpg"); // 將圖檔載入

  image(img,0,0); // 決定要顯現的圖檔與其左上角座標

}

Processing 筆記 （六）- 鍵盤顯示

1. 欲瞭解使用者在電腦鍵盤上是否按下按鍵、是否鍵入文字，可運用 keyPressed 變數於 draw( ) 函數中。例如：


void draw(){
  if(keyPressed){ //若按下鍵盤的鍵
    print(" you pressed "+key+"\n"); // 則印出 you pressed 按鍵名稱並換行顯示
  }
}

2. Processing 也定義了 keyPressed(), mousePressed(), mouseMove()函數，可以設計上面的相似範例，此時，所有相關程式碼必須寫在 keyPressed ()函數中。例如：

void draw(){}
void keyPressed(){
  print("\n you are pressing a key \n that key is "+key);  /*當按下按鍵時，換行顯示" "中的文字與按鍵的名稱 */
}

3. Java 語言註解的方式有兩種：(1) // 記號開始，至該行結。(2) /* 與 */這兩個符號間所夾的文字。

Processing 筆記 （五）- 滑鼠拖移之互動

mouseDragged( ) 用來偵測何時滑鼠左鍵被按下，且滑鼠被移動。
範例一：藉由滑鼠拖曳來畫線


int lastX = 0; // 宣告 lastX, lastY 變數，作為滑鼠最初壓下左鍵的座標數值
int lastY = 0;

void setup( ) {
  size(400, 400); // 設定版面大小
}

void draw( ) {
  lastX = mouseX;  //將 lastX, lastY 設為滑鼠初始位置
  lastY = mouseY;
}

void mouseDragged( ) {
  line(lastX, lastY, mouseX, mouseY);
// 以滑鼠初始位置與放開左鍵時的位置為兩端，畫直線
}

範例二：作用同第一個範例，為藉由滑鼠拖曳來畫線的第二種版本

int lastX = 0;

int lastY = 0;

void setup( ) {

  size(400, 400);

}

void draw( ){} 

void mouseDragged( ) {

  line(pmouseX, pmouseY, mouseX, mouseY); 

/* 利用 pmouseX, pmouseY 表示前一個畫格的滑鼠位置，搭配當前位置 mouseX, mouseY 畫線 */

}

Processing 筆記（四）- 滑鼠按鍵互動

1. mouseX 與 mouseY 為當前的滑屬位置，text(顯示的文字, 滑鼠位置x, 滑鼠位置 y ) 可用來設定文字，以及其出現在畫面的位置。

範例：以文字顯示滑鼠位置

Pfont arial;

void setup( ) {
   size(300, 300)
   arial = createFont("Arial", 32);
   // 定義 arial 為系統中的 Arial 字型
   textfont(arial, 15);
  // 設定字形
}

void draw( ) {
   background(0);
   // 將背景設為黑色，以便清除之前的文字
   text(" position is "+mouseX+ " "+mouseY", mouseX, mouseY);
   // 以文字 position is 顯示當前滑鼠座標
}

2. mousePressed( ) 物件可用來將按下滑鼠左鍵的動作與欲觸發的事件相連結。其必須配合 draw( ) 的使用才能運作。

範例：繪製一個方形，並利用滑鼠的 x 座標決定方形填色時的 alpha 數值。滑鼠越偏右方，alpha 數值越大。每當滑鼠按下時，便分行印出其所在位置的 x 值。

int alphaValue = 0;


void setup() {
    size(350, 300);
    background(0xFFFFFFFF);
}

void draw() {
    background(0xFFFFFFFF); // 背景顏色設定成白
    fill(255, 0, 0, alphaValue); //填入紅色
    rect(100, 100, 100, 100); // 繪製方形
}

void mousePressed( ){
   print(mouseX + "\n"); // 換行印出滑鼠的 x 座標
   alphaValue = mouseX; // 以滑鼠位置之 x 值決定 alpha 數值
}

Processing 筆記 （三）- 直線、弧線、封閉區間

1. line(x1, y1, x2, y2) 可用來畫 2D 中的直線。line (x1, y1, z1, x2, y2, z2) 可用來畫 3D 中的線，但須在此物件被移動過後，才可看得出其與 2D 直線之不同。
2. stroke( ) 可用來設定直線的顏色，用法跟 fill( ) 類似，strokeWeight( ) 則用來設定線的厚度。例如：

void draw( ){
    stroke(0xFFCCFF00); // 設定線條顏色為黃
    strokeWeight(5); // 將線條厚度設定為 5 個像素
    line (0, 100, 600, 400);
    line(600, 400, 300, 0);
    line(300, 0, 0, 100);
}
   
3. curve( ) 用來畫曲線，2D 中使用 curve (x1, y1, x2, y2, x3, y3, x3, y4)，3D 中使用 curve (x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)。其中，x1, y1, z1 為第一個曲線的軸心點 (anchor poitn)，曲線朝向其彎曲的第一個點；x3, y3, z3 為曲線的起點；x4, y4, z4 為第二個曲線的軸心點；亦即曲線朝向其彎曲的第二個點。

範例：以滑鼠位置影響曲線的方向

void setup() {
   size(400, 400);
}

void draw(){
   background(255); // 白色背景
   fill(0); // 黑色內部
   int xVal = mouseX*3-100; // 滑鼠位置決定 anchor point
   int yVal = mouseY*3-100;
   curve(xVal, yVal, 100, 100, 100, 300, xVal, yVal);
   curve(xVal, yVal, 100, 300, 300, 300, xVal, yVal);
   curve(xVal, yVal, 300, 300, 300, 100, xVal, yVal);
   curve(xVal, yVal, 300, 100, 100, 100, xVal, yVal);
}

4. vertex 為兩調線的交會處，例如三角形的頂點、星形的角等。在 processing 中可使用三個或更多個頂點連結成一個封閉區間，其內部可以填色或不填色。所用的物件 (method) 為 beginShape( ) 與 endShape( )，兩者之間以 vertex( ) 鍵入頂點座標，所設的頂點會自動相連。


範例：以滑鼠決定三角形的第三個角的位置

void setup( ) {
    size(400, 400);
}

void draw( ){
    background(255); //黑色背景
    fill(0); // 白色封閉區間
    beginShape();
    vertex(0,0);
    vertex(400, 400);
    vertex(mouseX, mouseY);
    endShape();
}

Processing 筆記 （二） - 顏色

1. Processing 中的顏色表示方式有兩種，分別為 RGB (0~255) 及十六進位系統。一般情況多用 RGB 方式表示，但用於網頁 HTML 時，則需使用十六進位系統。RGB 表示法中，例如 0xFFFF0000，此10 個由左而右的數字中， 0x 字頭表示使用十六進位系統，FF 表示 alpha 數值，更右的 FF 表示 Red，00 表示 Green，更右的 00 表示 Blue。

定義白色的程式碼：
int r = 255;
int g = 255;
int b = 255;
color (r, g, b);

定義黑色的程式碼：
int r = 255;
int g = 255;
int b = 255;
color (r, g, b);

2. fill( ) 用來填充顏色，具有 overloaded 的用法，亦即同樣一個 method，當賦予不同參數時，可使其處理不同的情況。fill( ) 的各種情況如下所列：

fill (int gray) ==> 填入的有理數為 0 時為黑， 255 為白。
fill (int gray, int alpha) ==> 同上，但加入 alpha 數值（0 為透明，255為不透明）。
fill (int value1, int value2, int value3) ==> 填入 RGB 數值。
fill (int value1, int value2, int value3, int alpha) ==> 填入 RGB 與 alpha 數值。
fill (color, color) ==> 可填入顏色變數。例如：
       void draw(){
            color c = color(200, 0, 0)
            fill (c);
            rect(0, 0, 100, 100);
       }

fill (color color, int alpha) ==> 呈上，上例還可以再加入 alpha 數值。如：
            color c = color(200, 0, 0);
            fill(c, 150);

fill (int hex) 與 fill (int hex, int alpha) ==> 前者不含 alpha 數值，Processing 要求十六進位的顏色表示法之字頭以 0x 表示；後者含 alpha 數值， Processing 要求十六進位的顏色表示法之字頭以 # 後面接六位數來表示。

3. background ( ) 用來設定背景顏色，其 overloaded 用法如同 fill ( )。background ( ) 常被用來清除現有的畫面。

Processing 筆記 （一）- 畫圓

1. Sketch 為 processing 的程式碼名稱(等同 Max/MSP/Jitter 中的 patch)。

2. Control + k 可開啟 sketch 所存的檔案夾。

3. Export 按鍵可用來將 processing 的程式碼與相關檔案存成獨立的 applet。

4. setup()用來確保之後要執行的程式之準備工作皆已完備。例如設定影像的大小（以像素為單位）、畫格速率等。

5. Java 程式設計的function 指一群程式碼集合之名稱，其跟變數相似之處在於其有名稱與類型，但跟變數不同之處在於 function 還能操控變數。換句話說，function 包含啟始的變數輸入、結束時結果的輸出。若 function 為某物件的一部分，通常被稱為 method，以「物件名稱.函數」的方式被呼叫。function 與 method 兩者之差別，僅在於語義上的差別。

6.frameRate()用來設定每秒鐘 draw()要被呼叫的次數。

7. print() 用來將程式的訊息顯示在 Processing IDE(Integrated Development Environment)下方的 Console Window 視窗中。

8. ellipse()用來畫橢圓或圓，例如 ellipse(150,150, x, y)前兩項為圓心，x、y 則決定是否為橢圓，若 x=Y 則為圓形。

9. x = x+2 可表示成 x += 2。下例中，每次 draw() 被呼叫時， x 植便增加2。

10. rect (x, y, width, height) 前兩項為方形的左上角位置。ellipse(x, y, width, height) 的前兩項則為圓心位置。

11. line (x1, y1, x2, y2) 可用來畫直線，前兩項表示直線起點位置，後兩項表示直線終點位置。

12. 繪圖過程中，後下的繪圖指令會覆蓋先下的繪圖指令所畫出的圖形。



同心圓動畫的範例：

int x = 0;
void setup() {
   size(300, 300);
   frameRate(30);
}

void draw() {
   x += 2 ;
   ellipse(150, 150, x, x);
   if(x>300){
      x = 0;
   }
}

Karlheinz Essl 的玩具鋼琴互動音樂作品

Karlheinz Essl 曾寫為 Max/MSP 過 RTC Library 準則作曲專用的程式模組，包含外掛物件與副程式碼。雖然我個人覺得他的研究與作品，比較偏向電子音樂學術圈內「程式技術導向」的作曲家或研究者，這類的作曲家，通常作品偏重即興，也少寫器樂作品，多數傳統的器樂寫作者，往往無法認同這類作曲家。但我覺得下面這首作品，還算有趣，樂曲形式也有經過設計，混和即興與譜上記載的準則，特意以有限的音高，凸顯織度與音色的變化。其中音色的變化又仰賴即時效果器。玩具鋼琴的音域雖然狹窄，但泛音成份反而較為混雜，因此音色反而比鋼琴有趣。

Tom Wexler 的 Max/MSP/Jitter 裝置作品

無意間在 Viemo 找到幾個 Tom Wexler 的互動作品，這些作品皆是以 max/msp/jitter 設計而成，採用熱感偵測的技術，結合投影來完成作品。或許這是互動表演藝術的另一個可行的方向，以熱感偵測來取代紅外線偵測，後者必須打紅外線的光，但前者似乎只需一個昂貴的器材，便可分辨人與非生物。下面這個作品，在流體的設計也非常美，但 Max/MSP/Jitter 的相關作品或範例中是很難得看到的，不過至少可知 Max/MSP/Jitter 在即時影像上仍有些潛力。

Waves (Southend, UK) from Tom Wexler on Vimeo.

Sketch: Smoking Camera from Tom Wexler on Vimeo.

Max/MSP/Jitter 中消除過高或過低的數據之方法

常有人問我要如何讓感應器的數據不要波動太大或過於不穩定。以前在美國學習音樂偵測技術時，我的主修老師 Andrew May 說了一堆關於「線性回歸」的方法，當時似懂非懂，最近又把他所題的方法重新拿來檢視，重新思考一次他所用的方法。

在 Max/MSP/Jitter 中，最簡易的柔化數據變化的方法是使用 bucket 物件，把最近收集到的數據算出平均值（使用 mean 物件）。我的老師則提供了另一種方法，是以線性回歸的方式，他設計了一套線性回歸 ( linear regression ) 的物件組 ( regression tool )，可用來將一系列的數據，計算出一個最佳的直線或曲線 ( best fitting line )，使得每個點與這條線的距離 (error of prediction) 之的總和為最小，其中包含下面幾項工具：

m_line：用來將存在於預設大小的 buffer 中的數據，計算出最佳直線（包含斜率、y 軸截距等數值）

m_avg ：用來計算 buffer 中的數值之平均數。

m_para：用來將存在於預設大小的 buffer 中的數據，計算出最佳曲線）

regress：與 m_line 的功能類似，但是所取的數值是從開始計算起至當前所累積的數據。

regress2：與 m_para 的功能類似，但是所取的數值是從開始計算起至當前所累積的數據。

註：以上這幾個物件中，最常用的是 m_avg 的平均值（用來柔化數據）以及 m_line 的斜率數據（用來判斷新近的資料是否與多數數據差距過大）。
註：回歸分析的簡介可參考：http://onlinestatbook.com/index.html

第六屆國際電腦音樂與音訊技術暨新媒體研討會徵件

以下內容轉貼自 WOCMAT 2010 網站：
http://wocmat2010.infocom.yzu.edu.tw/stuff.html


徵求電子音樂作品

「2010台灣電子音樂國際徵曲比賽」
主辦單位：中華民國電腦音樂學會
主旨：鼓勵對電聲音樂創作有興趣者提供發表與交流之平台，開拓數位藝術之可能性
參賽資格：不限國籍、不限年齡
樂曲內容：作品須為作者兩年內作品，可為下列三者之一

1. 著重於音色變換之電聲音樂 (.wav格式)
2. 著重於電腦音樂與動畫整合之多媒體電腦音樂 (.wmv格式)
3. 著重於樂曲結構完整性與創意性的電腦音樂 (.mid格式)

樂曲上傳格式：.wav, .wmv或.mid三種格式，其中.wmv格式解析度至少為800 x 600 (pixel x pixel)
樂曲長度：以3分鐘為限
獎項：設首獎、第二名、第三名，與佳作數名，將於2010年11月在主場元智大學有庠廳所舉辦2010國際電腦音樂與音訊暨新媒體研討會WOCMAT，與中華民國電腦音樂學會所主辦之相關活動演出，並頒發獎狀。
入選獎：數名，將於2010國際電腦音樂與音訊暨新媒體研討會WOCMAT元智大學聲音藝廊播放發表
作品上傳方式：請於2010年10月31日前至元智大學2010國際電腦音樂與音訊暨新媒體研討會WOCMAT官網：http://wocmat2010.infocom.yzu.edu.tw/cindex.html
自行上傳，每人作品以上傳兩件為限 (包括.wav, .wmv或.mid三種格式總共不得超過兩件)。

上傳截止日期：99 年 10 月 3 日（星期日）
作品審查結果通知：99 年 10 月 17 日（星期日）
報名暨繳費完成：99 年 11 月 5 日（星期五）


徵求聲音裝置藝術作品

主旨：鼓勵對聲音裝置藝術有興趣者提供發表與交流之平台，開拓數位藝術之可能性
參賽資格：不限國籍、不限年齡

作品規格：作品須為創作者個人二年內之作品以易於拆裝為原則，實際大小以不超過1米見方
為原則。作品重量以30公斤為限。Demo作品上傳格式與長度：Demo作品上傳格式為wmv, 以3分鐘為限。

入選作品將於2010年11月12-13日在元智大學所舉辦2010國際電腦音樂與音訊暨新媒體研討會WOCMAT研討會展出。相關安裝程序與安裝材料須由參賽者自行負責。

作品上傳方式：請於2010年10月31日前至元智大學2010國際電腦音樂與音訊暨新媒體研討會WOCMAT官網：http://wocmat2010.infocom.yzu.edu.tw/cindex.html

自行上傳，每人作品以上傳兩件為限
上傳截止日期：99 年 10 月 3 日（星期日）
作品審查結果通知：99 年 10 月 17 日（星期日）
報名暨繳費完成：99 年 11 月 5 日（星期五）
入選聲音裝置藝術作品安裝時間：99年11月10-11日，以配合主辦單位安排為原則