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


留言

張貼留言