Processing入門與自學指引


Processing是專為互動視覺、創意應用所設計的程式語言,有易於上手的編輯環境、多元函式庫(外掛功能)、豐富的學習資源。語言是基於 Java,但語法結構更為簡單。我們直接用範例來看:

size(500, 500);
line(0, 0, 500, 500);
rect(0, 450, 50, 50);
rect(450, 0, 50, 50);


意思是定義一個 500x500 的畫布,並劃一條從 (0, 0) 到 (500, 500) 的對角線,並在右上角、左下角分別畫 50x50 的正方形。若程式中沒有宣告顏色,預設的顏色是:線條 --> 黑色、填滿 --> 白色、底色 --> 淺灰。可用 fill() 改填滿顏色,用 stroke() 改線條或框線顏色。顏色要先指定再繪圖才有作用。

size(500, 500);
stroke(255, 0, 0); //指定紅色線條。
line(0, 0, 500, 500);
stroke(255, 255, 0); //指定黃色線條。
fill(0, 255, 0); //指定填滿綠色。
rect(0, 450, 50, 50);
fill(0, 0, 255); //指定填滿藍色。
rect(450, 0, 50, 50);


顏色格式有好幾種,較常用的是 R, G, B 三原色,數值範圍分別是 0...255,黑色是 (0, 0, 0),白色是 (255, 255, 255),黃色是 (255, 255, 0)。完整格式可參考手冊。

如果要重複動作,除了將指令複製貼上之外,還有比較聰明的方法:迴圈。若要從上而下繪製間隔為 10 的水平線,可以這麼寫:

size(500, 500);
for (int i = 0; i < 500; i = i + 10) {
  line(0, i, 500, i);
}


迴圈中的變數 i 稱為索引變數或控制變數,用來控制迴圈的執行次數和判斷結束與否。上述 for 迴圈的宣告格式是 (初始敘述; 繼續條件; 繼續前動作),可以這麼解讀:迴圈開始前,定義變數 i 並歸零,當 i 小於 500 時繼續迴圈,每次進入迴圈之前 i 累加 10。

然而為了要繪製動態圖形或進行互動,光靠上面的簡單結構很難做到,於是便需要一個類似動畫的基本架構:前置宣告、舞台設定、重複繪製(像是動畫師畫賽璐珞片一樣)。若將上面例子放到正規架構中,就會是這樣:

// 舞台設定,只會在draw()之前執行一次。
void setup() {
  size(500, 500);
}

// 重複繪圖,不斷自動重複執行。
void draw() {
  for (int i = 0; i < 500; i = i + 10) {
    strokeWeight(i/50); //額外加上的,根據 i 值改變筆劃粗細。
    line(0, i, 500, i);
  }
}

這段程式碼在邏輯上是正確的,不過實際上卻在做虛工,因為 draw() 重畫的內容其實都一樣,沒有重複的必要,除非每次執行 draw() 都會有些許的變更。

至於互動要怎麼做呢?我們先用最最最簡單的互動,將滑鼠的即時座標 (mouseX, mouseY) 融入程式中。例如,在滑鼠位置畫一個任意顏色的方塊。

void setup() {
  size(500, 500);
  rectMode(CENTER); //改變矩形繪圖方式,以矩形中心為準。
}

void draw() {
  fill(random(255), random(255), random(255)); //運用亂數函數產生任意顏色。
  rect(mouseX, mouseY, 50, 50);
}


好了,以上不算正式的程式設計簡介,太簡略了點,該是時候去上自嗨哥 Dan 的課了。Dan Shiffman 是既熱情又非常厲害的 Processing 專家,在 YouTube 上有一系列的入門課程,由簡入繁、設計得非常好,每段課程都很短,適合一面看一面練習。


建議按章節來看,應該可以一路衝到第5章 Conditions 了,歡迎大家在 Dan 哥的加持下繼續往前衝。學習過程若發生問題或需要釋疑,歡迎隨時透過臉書訊息、email 提出問題。

當然,Processing 官網也有豐富的學習資源,包括精采案例、學習範例、自學課程、書籍、網路連結等,。

再提醒一次,這次練習只需要基本幾何繪圖函數、基本條件式或迴圈、以及滑鼠座標 (mouseX, mouseY) 來創作,當然願意自我挑戰的同學請不要客氣。

教材一:Processing - Basics


留言