1 Processing入門簡介

1.1 Before you start

Processing是一個為開發面向圖形的應用（visually oriented application）而生的簡單易用的編程語言和編程環境。Processing的創造者將它看作是一個代碼素描本。它尤其擅長算法動畫和即時交互反饋，所以近年來在交互動畫，復雜數據可視化，視覺設計，原型開發和制作方向越發流行，大家都喜歡這個可愛貼心，簡潔好用的編程工具。

 

Processing基於Java，其語法規則和Java是一致的，但是即使你熟悉Java編程，也請暫時忘記這一點，因為Processing不同於Java，它更為簡單，並且已經演化出了它自己的一套"工作習慣"。

 

本文將簡潔地向你描述Processing的下載、配置、使用方法和編程思路，希望本文能給你打開一扇通向自由創造的大門。

 

Processing官方網址：https://processing.org

網站包含了Processing的作品展示，對象/函數文檔和應用示例，背景介紹，相關鏈接（論壇、維基、FAQ等等）。

如果你想獲得詳細的、最新的Processing資訊，請訪問該網站；如果你有足夠的英文水平和精力，請停止向下繼續閱讀，訪問該網站，因為那上有能滿足你的更多更豐富和權威的資訊。

 

1.2 Equip yourself

開始旅程之前，讓我們來安裝Processing。

由於Processing基於Java，請保證你的計算機已經配置Java環境，否則Processing不能正常工作。

Processing最新版本下載地址：

http://processing.org/download

 

 

Processing是開源軟件，開發者下載前會詢問你是否向其捐款，對此我的建議是：有錢就捐點吧！

當然，選擇"No Donation"可以直接看到下載鏈接，選擇"Download"進入下載頁面：

 

選擇適配你電腦的版本，點擊下載。這里以windows64位系統為例。

下載后會得到文件：

 

 

此時你已經完成了一大半的工作了！

（再次提示，必須先配置好Java環境Processing才能正常運行。

JDK包下載：http://java.sun.com ;

網友提供環境配置教程：http://wenku.baidu.com/view/a2e732caa1c7aa00b52acb9b.html）

 

接下來，解壓安裝包：

 

打開processing.exe：

 

完成！你已經看到了Processing的開發環境PDE。把processing.exe創建桌面快捷方式，今后可以方便的使用了。

 

1.3 Start!

現在你已經進入了一個全新的Processing世界，你要開始學習Processing的習慣。

1.3.1 Sketch

之前已經提到過，Processing的創造者它看作是一個代碼的素描本，在這里，你可以用代碼繪畫。所以，Processing的工程也非常文藝地取名為"素描本"——Sketch。

 

選擇Sketch→Show Sketch Folder，打開當前工程文件目錄。

這個素描本中的素描紙，也就是Processing的源文件是.pde文件，在PDE中以tab的形式顯示，tab的名稱就是pde文件的名稱。每個sketch中都有一個主tab，這個tab和目錄文件夾同名，是Processing的程序入口。

 

1.3.2 PDE

Processing的開發環境被稱為PDE（Processing Development Environment），在PDE的界面中，你可以看到三個部分：工具欄，代碼編輯區，控制台。

 

Toolbar工具欄

運行 停止

 

新建 打開 保存 輸出應用

這些功能用來控制Sketch（Processing工程），其中，輸出應用的功能將在下一節詳述。

模式選擇

Processing支持多種運行模式，默認為Java，即運行時生成一個桌面應用，可以下載添加Android（生成安卓程序），JavaScript（生成嵌入web的applet）等模式。

 

Text editor 代碼編輯區

選項卡區

Processing以選項卡tab組織代碼編輯區，每個tab實際上對應了一個.pde格式的代碼源文件。點擊右方的小下拉箭頭，可以對tabs進行操作。

當你打開processing.exe時，Processing就為你默認創建了一個工程（Processing中被稱為Sketch），並為你創建了一個以"sketch_+當前日期+順序編號"命名的tab。選擇Sketch→Show Sketch Folder，就能夠看到當前工程文件目錄。這是工程是暫存的狀態，選擇可以進行更名和保存。

 

Console 控制台

 

黑色區域上方是信息區，運行時的PDE狀態、出錯信息等都會顯示在這里；

黑色區域是控制台；

最下方顯示的是當前的行數。

 

現在剛打開的工程是空白的，點擊運行鍵，你的屏幕上將出現運行結果：

默認情況下，Processing程序的運行結果是一個100*100的灰色空白窗口。在代碼編輯區輸入下列代碼：

再次運行，如果不出什么意外的話，你將看到：

如果出了意外，你的代碼輸入錯誤，你將在控制台看到你的錯誤信息，根據這個信息修正你的代碼。

 

1.4 Hello World！

清空你的代碼編輯區，在代碼編輯區輸入下列代碼，然后運行：

 

void setup() {

size(480, 120);

}

 

void draw() {

if (mousePressed) {

fill(0);

} else {

fill(255);

}

ellipse(mouseX, mouseY, 80, 80);

}

 

感覺如何？

 

這段代碼的意思是，將窗口大小設定為480*120，如果鼠標按下，則在鼠標的位置畫一個半徑為80的白色圓，否則在鼠標的位置畫一個半徑80的黑色圓。

 

1.4.1 Processing程序邏輯

點擊stop按鈕終止程序，讓我們來看看這段代碼。

在這個程序中我們重寫了兩個函數：setup()和draw()。

setup()是在程序開始時調用的函數，只執行一次；而draw()在setup后被調用，並且將循環地、不停地被調用。

 

這里的setup()和draw()函數類似於MFC的回調函數，也就是說，在特定的條件下被系統調用的函數，如，setup是在程序啟動時被調用的，draw是setup以后按照每秒多少幀被系統調用的（類似的函數還有mousePressed()—在鼠標按下時被調用，keyPressed()—在鍵盤某個鍵按下時會被調用，等等）。然而setup()和draw()是所有函數中最關鍵的兩個函數。

 

下面我們來嘗試一下：

1、在setup函數中加入如下代碼並運行：background(255);

2、將剛才加到setup中的那一行代碼剪切到draw函數中並運行。

結果如何？我們可以看到，在第一步時，運行效果和一開始相仿，鼠標滑動會留下一連串的圓圈軌跡，而第二步中，我們不能得到軌跡，只能看到一個隨着鼠標移動的黑球或者白球。

background()是設置背景顏色的函數，里面的參數是顏色，當有一個數字參數時，它指代的是0-255的灰度值，所以"background(255);"這條語句的作用是，將背景顏色設置為白色。而之所以出現剛剛兩種完全不同的效果，原因是setup()只在程序開始執行一次，之后不斷畫上去的圈圈，將背景蓋住，而draw()會被不斷調用，每一次調用，都會執行一次background函數，將整個畫面刷新一遍，再繪制新的小圈圈，所以看起來就是只有一個隨着鼠標移動的小球了。

draw()就像動畫中的一幀，我們的代碼決定了每一幀中要畫什么東西。如果我們說，每一幀都畫一樣的東西，最后畫面就是靜止的；如果我們告訴Processing，每一幀要畫什么不一樣的東西，我們的畫面就動起來了；如果我們說，按照鼠標的移動畫出不同的東西，你的畫面就成為了交互式的。

Processing就以這樣的方式，讓圖形圖像動起來，和用戶進行交互。

1.4.2 空間和色彩的游戲

下面將寫在draw函數中的background()語句修改一下：

background(mouseX, mouseY, 100);

再次運行。

如果一切正常，你在移動鼠標的時候可以看到背景顏色隨着鼠標小球的位置在逐漸的變化。

這里我們給了background函數三個參數，這時候，這三個參數就分別代表了red，green和blue的值，而mouseX，mouseY是Processing中記錄鼠標位置的對象，所以，當時間流逝，draw函數被不斷調用，窗口的背景值就隨着鼠標的位置不斷改變了。

看到了么？Processing就這樣將你的鼠標位置"翻譯"成了色彩！

這只是Processing的冰山一角。Processing中有大量的內置對象和函數，它們讓你輕松的操控空間和色彩，創造出各式各樣的作品。

1.4.3 保存和分享！

到現在為止我們還沒保存過我們的工作，點擊（或ctrl+s），在彈出的窗口里輸入你想保存的工程名（Processing默認的工程名是"Sketch+當天時間+字母編號"，我一般保存時將最后的字母修改為我想要的名字即可，即"sketch_131022_helloworld"）Processing會在你選好的位置為它創建一個sketch。

 

如果你想讓將你的大作和朋友們分享，你可以將程序發布成應用。點擊（或ctrl+e），根據提示操作，你就能得到在Windows、iOS或者Linux下運行的應用程序。以Windows為例，導出應用后sketch中會出現為32位系統和64位系統的兩個文件夾，其中每個文件夾中都含有 一個同名批處理文件，一個Processing庫文件夾lib，和一個ped源文件夾source（程序源代碼，沒有它仍然導出的程序可以運行），如果有數據還會有一個data文件夾，運行時，執行.bat批處理文件就行了。

 

1.5 三個錦囊

到現在為止，Processing的基本操作和邏輯我已經介紹完了。最后送大家三個錦囊。

1.5.1 Reference

Processing為它的使用者提供了相當好用的文檔。

觀察PDE中的程序代碼，程序中有顏色的size()、fill()、ellipse()函數和mousePressed、mouseX、mouseY，是Processing內置的函數和值。

 

在這些詞上點擊右鍵 > Find in Reference，就會在彈出的頁面中看到這些內置函數、對象的說明文檔。

這個文檔來自本地（在你解壓的Processing包里），你可以從打開的這個文檔中的鏈接找到所有的Processing對象、類、函數，Processing的創作者為我們提供了全面的描述和形象的介紹。同樣的內容可以在官網的Reference上找到。

當你不清楚這個函數的用途，或者參數、返回值時，可以以這樣的方式查看它。當你想知道Processing中所有的函數、對象和它們的用法時，也可以去查看Reference。

1.5.2 Examples

Processing為它的使用者貼心地准備了大量全面的使用示例。

在PDE中選擇file > Examples（或Ctrl+Shift+O）就會彈出Processing的Examples窗口。

這里集成了大量的Processing案例，涵蓋了Processing的各個方面各種話題。點開其中的任何一個工程，都會開啟新的PDE窗口，這里，Processing用最簡單優美的代碼來表達問題，你可以點擊運行查看代碼結果，在代碼區觀察代碼結構。

1.5.3 One More Thing

打開一個新工程（Ctrl+n），輸入下列代碼並運行：

void setup(){

size(400, 400);

}

 

void draw(){

background(#FFEE31);

pushMatrix();

translate(200, 200 - 60);

//eyes

PVector mouse = new PVector(mouseX, mouseY);

mouse.sub(200, 200 - 60, 0);

mouse.limit(7);

fill(0);

noStroke();

rectMode(CENTER);

rect(-1*40+mouse.x, -15+mouse.y, 15, 25, 8);

if(mousePressed)

rect(40+mouse.x, -15+mouse.y, 28, 10, 5);

else

rect(40+mouse.x, -15+mouse.y, 15, 25, 8);

//mouth

noFill();

strokeWeight(12);

stroke(0);

arc(0, 0, 150, 120, PI/4, PI-PI/4);

popMatrix();

//text

textSize(25);

textAlign(CENTER);

text("Enjoy your hacking with\nProcessing!", width/2, height/2+100);

}

 

 

Reference

1 Processing's Official Site: http://www.processing.org/tutorials/

2 Casey Reas and Ben Fry, http://www.processing.org/tutorials/gettingstarted/, 2010

3 Ben Fry, http://www.processing.org/tutorials/overview/, 2007