1、用 Processing 進行數據可視化，第 1 部分: 語言和環境簡介雖然很多開源項目的初衷都是為現有的應用程序構建替代方案，但是仍有大量的項目彰顯了創新性。Processing 就是其中的一個。Processing 在 2001 年誕生于麻省理工學院（MIT）的媒體實驗室，主創者為 Ben Fry 和 Casey Reas，當然還有來自 Carnegie Mellon、洛杉磯的加利福尼亞大學以及邁阿密大學等的貢獻。Processing 的最初目標是開發圖形的 sketchbook 和環境，用來形象地教授計算機科學的基礎知識。之后，它逐漸演變成了可用于創建圖形可視化專業項目的一種環境。如今，

2、圍繞它已經形成了一個專門的社區，致力于構建各種庫以供用這種語言和環境進行動畫、可視化、網絡編程以及很多其他的應用。在本文中，您會發現 Processing 是一個很棒的進行數據可視化的環境，具有一個簡單的接口、一個功能強大的語言以及一套豐富的用于數據以及應用程序導出的機制。Processing 運行于 GNU/Linux® 以及 Mac OS X 和 Windows® 上，并且支持將圖像導出成各種格式。對于動態應用程序，甚至可以將 Processing 應用程序作為 Java applet 導出以用在 Web 環境內。本文將先介紹 Processing IDE，然后再討論

3、Processing 語言的第一個層面。之后將會介紹一些關鍵的圖形原語，最后則探討幾個利用這些原語的應用程序。Processing 的起源Processing 最早是一個用于教授計算機編程的簡化編程語言。這些理念起源于 MIT Media Lab (John Maeda) 的 Design By Numbers 項目，目的是通過可視應用程序的開發來教授編程。雖然它供編程初學者使用，但該項目也針對藝術家及可視化設計者而設。有關 Processing 及衍生產品的更多信息，請參見 參考資料。Processing 環境第一步是安裝 Processing 環境。去到 Process

4、，單擊 Download Processing 并選擇您的操作系統。請注意，本文中的例子使用的是 Processing V1.2.1。下載了壓縮文件后，用tar xvfz processing-1.2.1.tgz 對其進行展開。此外，還需要確保 Java 技術已經可用。在 Ubuntu 上，只需鍵入 sudo apt-get install openjdk-6-jdk。安裝完成后，轉到之前解壓縮時創建的 processing-1.2.1 目錄并嘗試鍵入 ./processing。這應該會彈出 Processing Developm

5、ent Environment（PDE 或 Processing IDE），如圖 1 所示。占此窗口較大的部分是文本編輯器。如果輸入圖中所示的兩行代碼，然后單擊 Run（左上角的三角形），出現一個窗口，顯示您所輸入的簡單程序（或 Processing 術語所指的 sketch）的結果。單擊 Stop（左上角的方框）退出程序，窗口消失。圖 1. PDE 和 Results 窗口現在，讓我們先來深入研究 Processing 語言，探討它的主要特性，并且開發一些有趣的應用程序?；仨撌譖rocessing 語言Processing 是用 Java 編程語言寫的，并且 J

6、ava 語言也是在語言樹中最接近 Processing 的。所以，如果您熟悉 C 或 Java 語言，Processing 將很容易學。并且在程序如何構造方面，也作了一些簡化。Processing 并不包括 Java 語言的一些較為高級的特性，但這些特性中的很多特性均已集成到了 Processing， 所以您無需了解它們。之所以選擇 Java 語言是因為 Processing 應用程序被翻譯成 Java 代碼執行。選擇 Java 范型簡化了這種翻譯并讓開發和執行可視化程序變得十分簡單和直觀。若要對比 Processing 語言和 Java 語言，請參閱 參考資料。

7、回頁首圖形環境正如您在 圖 1 所見，在 Processing 內進行開發涉及到的是 PDE 和顯示窗口。2-D 圖形的坐標系如圖 2 所示。size 關鍵字以像素為單位定義了顯示窗口的大小并且通常都是 Processing 應用程序內的首要步驟。圖 2. 2-D 顯示窗口的坐標如圖 2 所示，size 關鍵字指定顯示窗口的 X 和 Y 坐標。line 關鍵字則會在兩個像素點之間繪制一條線（以 x1、y1 to x2、y2 的格式）。請注意，超出屏幕邊界（size 定義的邊界外）畫線并非不允許，只是被忽略了而已。本

8、文無意對此做深入探討，但 size 接受可選的第三個參數 mode。 mode 用來定義要使用的呈現引擎并支持 PDF（直接呈現為 Adobe® PDF 文檔）、OPENGL （利用一個可用的 Open-GL 圖形適配器）、P3D（為了迅速的 3-D 呈現）等。默認的是 JAVA2D，它最適合于高質量的 2-D 成像。現在，我們來看一些基本的圖形原語，然后再深入探討幾個示例應用程序?；仨撌讏D形原語Processing 包含了大量各種各樣的幾何形狀以及這些形狀的控件。本節會簡介一些基本的圖形原語。背景和顏色backg

9、round 功能被用來設置顯示窗口的顏色。此函數可以使用各種不同的參數（來定義一個灰度值或 Red-Green-Blue RGB 顏色）。清單 1 內的代碼片段會生成如 圖 3 所示的輸出，其中的 cell a）。清單 1. 使用 Background 函數size(100, 100);background( 0, 128, 0 );繪制像素點可以使用 set 函數繪制單個像素點。此函數接受顯示窗口內的 x,y 坐標以及作為顏色的第三個參數。Processing 也有一個類型，稱為 color，通過它，可以定義用于某個操作的顏色。在本

10、例中，我們創建了一個顏色實例并用它來設置顯示窗口內的某個像素點（參見清單 2 和 圖 3 中的 cell b）。清單 2. 設置像素點和顏色size(100, 100);for (int x = 0 ; x < 100 ; x+) for (int y = 0 ; y < 100 ; y+) color c = color( x*2, y*2, 128 ); set(x, y, c); 可以使用 get 操作來讀取顯示中的一個給定像素點的顏色。雖然 set 很簡單，但它不是操做顯示的最快方式。要想快速訪問，可以使用pixe

11、ls 數組（與 loadPixels 和 updatePixels 函數一致）。繪制形狀在 Processing 內使用單個函數繪制形狀十分簡單。要設置在繪制形狀時使用何種顏色，可以利用 stroke 函數。此函數可接受一個單獨的灰度參數或三個 RGB 參數。此外，還可以用 fill 命令定義這個形狀的填充色。清單 3 顯示了如何繪制線、矩形、圓（使用橢圓）及橢圓。line 函數接受四個參數，代表的是要在其間繪制線條的點。rect 函數可繪制一個矩形，并且前兩個點定義位置，而

12、后面兩個點則分別定義寬度和高度。ellipse 函數也接受四個參數，分別定義位置和寬/高度。當寬和高相等時，就是一個圓形。還可以使用 ellipseMode 函數定制橢圓，它指定 x,y 位置是否代表了橢圓的角（CORNER）或中心（CENTER）。參見 圖 3中的 cell C。清單 3. 線和形狀size(100, 100);stroke(0, 128, 0);line(10, 10, 90, 90);fill(20, 50, 150);rect(30, 30, 60, 40);fill(190, 0, 30);ellipse(30, 70, 20,

13、 20);fill(0, 150, 90);ellipse(70, 30, 30, 20);繪制四邊形在 Processing 內使用 quad 可以很容易地繪制有四個邊的多邊形。四邊形接受八個參數，代表的是這個四邊形的四個頂點。清單 4 內的示例創建了 10 個隨機的四邊形（其中這些點必須是順時針或逆時針順序。此代碼還會為每個四邊形創建一個隨機的灰度。清單 4. 繪制四邊形size(100, 100);for (int i = 0 ; i < 10 ; i+) int x1 = (int)random(50); int y1 = (int)random(50); i

14、nt x2 = (int)random(50) + 50; int y2 = (int)random(50); int x3 = (int)random(50) + 50; int y3 = (int)random(50) + 50; int x4 = (int)random(50); int y4 = (int)random(50) + 50; fill( color(int)random(255) ) ); quad( x1, y1, x2, y2, x3, y3, x4, y4 );圖 3. 清單 1 至 4 的圖形輸出其他形狀多得不勝枚舉，因此對于行寬及圖像平滑度的控制也是不計其數的。

15、圖 4 顯示了來自 清單 4 的 quad 函數的例子，其中就調用了smooth 函數。此函數提供了去掉邊緣鋸齒的功能，雖然犧牲了速度，卻改進了圖像的質量。圖 4. 使用平滑函數回頁首Processing 應用程序的結構至此，通過幾個簡單的腳本，您已經對 Processing 語言有了大致的了解，但這些腳本是一些非結構化的代碼，只提供了應用程序的一些簡單元素。Processing 應用程序是有一定結構的，這一點在開發能夠持續運行且隨時更改顯示窗口的圖形應用程序（比如動畫）時非常重要。在這種情況下，就凸顯了 setup 和&#

16、160;draw 這兩個函數的重要性。setup 函數用于初始化，由 Processing 運行時執行一次。通常，setup 函數包含 size 函數（用于定義窗口的邊界）以及在操作期間要使用的變量的初始化。Processing 運行時會不斷執行 draw 函數。每次 draw 函數結束后，就會在顯示窗口繪制一個新的畫面，并且 draw 函數也會被再次調用。默認的繪制速度是每秒 60 個畫面，但是您也可以通過調用 frameRate 函數來更改這個速度。此外，還可以

17、使用 noLoop 和 draw 來控制在何時繪制畫面。noLoop 函數會導致繪制停止，而使用 loop 函數則可以重新開始繪制。通過調用redraw 可以控制 draw 在何時調用。現在，了解了如何開發一個 Processing 應用程序后，讓我們來看一個展示文本使用的簡單例子。使用文本Processing 不僅支持顯示窗口內的文本，還支持控制臺形式的用于調試的文本。要在顯示窗口內使用文本，需要一種字體。所以，第一步是創建一種字體（使用 PDE 的 Tools 選項）。選

18、擇了要創建的字體后，字體文件（VLW）就會顯示在項目的 ./data 子目錄內。之后，就可以使用loadFont 函數加載這個文件，然后再使用 textFont 將它定義為默認。這兩個步驟在 圖 5 的 setup 函數內有所顯示。還請注意我們已經將畫面速度減慢為每秒 1 個畫面 （因為這也是更新自然發生的頻率）。draw 函數展示了您在之前沒有見過的其他一些函數。首先是時間函數，它返回的是時鐘的小時、分和秒。請注意有一些傳統的函數可以返回年、月和日。存儲了時間數據后，就可以使用 nf 函數創建

19、一個字符串，它可以將數字轉變為字符串。為了將向時鐘添加一些花樣，可以使用background 和 fill 函數處理背景和時鐘的顏色。背景的顏色范圍是從 255（白）到 137（淡灰）。fill 函數可用于給文本上色，范圍是從 100 （淡灰）到 218（接近于黑色）。顏色設好后，text 函數就會向將時間字符串發送到顯示窗口已定義的坐標位置。也可以使用 println 函數將字符串發到控制臺（參見圖 5 左下角）。圖 5. 在 Processing 應用程序內使用文本回頁首構建簡單的應用程序現在，讓我們來看幾個用 Proc

20、essing 構建的模擬仿真。第一個是一個實現森林火災模型的 2-D 元胞自動機實現。這個模型來自 Chopard 和 Dro 的 “物理系統的元胞自動機建?！?，它提供了一個簡單系統，展示了樹的生長以及由雷擊導致的大火的蔓延。這個模擬包含了一組簡單規則，定義如下：· 在一個空場地（灰色），一棵樹以 pGrowth 的機率成長。· 如果其相鄰樹中有至少有一棵樹正在燃燒，那么這顆樹也會成為一棵燃燒樹（紅色）。· 一棵燃燒樹（紅色）成為一個空場地（灰色）。· 如果周圍沒有任何燃燒樹，那么這個樹成為燃燒樹的可能性為 pBurn。比如

21、由雷擊導致的燃燒，就是其中的一種可能。這些規則的代碼可以在 update 函數（參見 清單 5）內找到，它迭代 2-D 空間以決定根據已定義的規則，狀態如何轉換。請注意這個 2-D 空間實際上是 3-D 的，因為保存了此空間的兩個副本 一個針對的是當前迭代，一個針對的是上一個迭代。這么做是為了避免更改對空間的破壞。此空間然后會成為一個顯示空間（被顯示的東西） 和一個計算空間（規則的應用）。這些空間按每次生成對調。從很大程度上講，這個應用程序使用了極少的 Processing 圖形關鍵字。為空間定義的顏色只有幾個：stroke 用來更改顏色，point&#

22、160;用于繪制像素點。使用 Processing 模型，draw 函數調用 update 以應用規則；返回后，draw 將這個更新了的空間發到顯示窗口。清單 5. 元胞自動機森林火災模型int pix = new int2400400;int toDraw = 0;int tree = 0;int burningTree = 1;int emptySite = 2;int x_limit = 400;int y_limit = 400;color brown = color(80, 50, 10); / browncolor red = color(2

23、55, 0, 0); / red;color green = color(0, 255, 0); / greenfloat pGrowth = 0.01;float pBurn = 0.00006;boolean prob( float p ) if (random(0, 1) < p) return true; else return false;void setup() size(x_limit, y_limit); frameRate(60); /* Initialize to all empty sites */ for (int x = 0 ; x < x_limit ;

24、 x+) for (int y = 0 ; y < y_limit ; y+) pixtoDrawxy = emptySite; void draw() update(); for (int x = 0 ; x < x_limit ; x+) for (int y = 0 ; y < y_limit ; y+) if (pixtoDrawxy = tree) stroke( green ); else if (pixtoDrawxy = burningTree) stroke( red ); else stroke( brown ); point( x, y ); toDra

25、w = (toDraw = 0) ? 1 : 0;void update() int x, y, dx, dy, cell, chg, burningTreeCount; int toCompute = (toDraw = 0) ? 1 : 0; for (x = 1 ; x < x_limit-1 ; x+) for (y = 1 ; y < y_limit-1 ; y+) cell = pixtoDrawxy; / Survey area for burning trees burningTreeCount = 0; for (dx = -1 ; dx < 2 ; dx+

26、) for (dy = -1 ; dy < 2 ; dy+) if (dx = 0) && (dy = 0) continue; else if (pixtoDrawx+dxy+dy = burningTree) burningTreeCount+; / Determine next state if (cell = burningTree) chg = emptySite; else if (cell = emptySite) && (prob(pGrowth) chg = tree; else if (cell = tree) && (

27、prob(pBurn) chg = burningTree; else if (cell = tree) && (burningTreeCount > 0) chg = burningTree; else chg = cell; pixtoComputexy = chg; 圖 6 顯示了這個元胞自動機森林火災模型的迭代，跳躍恰當，很好地顯示了所設規則的效果。Time 0 包含的只有樹木在其中生長的空間。在 time 40，就可以開始看到大火在燃燒并最終占據整個空間。在大約 time 100，樹木生長更為明顯，但在 time 120 時， 起火更多，過程循環。圖 6. 元胞

28、自動機森林火災模型的輸出回頁首易染/感染/免疫模型易染/感染/免疫模型模擬的是疾病在醫院內的蔓延。與森林火災模型類似，SIR 也是通過一套簡單規則實現的，只不過添加了一些復雜性和有趣的行為。 在這個模型內，有一個由病人占據的病床組成的網格。在 time 0，所有病人都是某一種新疾病的易染人群，這意味著這些病人從未患過這種疾病，因此才有可能被感染。如果在某個病人的東/南/西/北的四個鄰居中有一個患了這種疾病，那么該病人受感染的可能性為 tau。一個受感染的病人的患病時間為 K 天，在此期間病人有感染其他病人的可能性。在 K 天后，該病人康復并有了

29、對這種疾病的免疫力。正如之前的例子所示，setup 函數先初始化這個醫院以及所有易染病人，只有最中心的這個病人是已經患病的。在該實現內，0 是易染病人，1-K 是感染病人，-1 是免疫病人。draw 函數將這種幾何分布發到顯示窗口，update 實施這些 SIR 規則。與之前一樣，可以用一個 3D 數組保存當前的這些幾何分布。清單 6 給出了此代碼。清單 6. Processing 內的 SIR 模型int beds = new int2200200;int toDraw = 0;int x_limit = 200;int y_lim

30、it = 200;color brown = color(80, 50, 10); / browncolor red = color(255, 0, 0); / red;color green = color(0, 255, 0); / greenint susceptible = 0;int recovered = -1;float tau = 0.2;int k = 4;boolean prob( float p ) if (random(0, 1) < p) return true; else return false;void setup() size(x_limit, y_limit); frameRate(50); for (int x = 0 ; x < x_limit ; x+) for (int y = 0 ; y < y_limit ; y+) bedstoDrawxy = susceptible; bedstoDraw100100 = 1;void draw() update(); for (int x = 0 ; x < x_limit ; x+) for (int y = 0 ; y <