第一篇 入門基礎篇

第1章 Processing簡介

Processing是一種開源編程語言，專門為電子藝術和視覺交互設計而創(chuàng)建，其目的是通過可視化的方式輔助編程教學，并在此基礎之上表達數(shù)字創(chuàng)意。2001年，麻省理工學院（MIT）媒體實驗室的Casey Reas和Benjamin Fry發(fā)起了此計劃，其特定目標之一便是開發(fā)一個有效的工具，通過激勵性的可視化反饋，幫助非程序員進行編程的入門學習。Processing語言建立在Java語言的基礎之上，但使用簡化的語法和圖形編程模型。

Processing簡單易用的特點，以及其豐富的拓展讓學習者可以創(chuàng)造出很多富有想象力的作品。因為源自Java，所以大量的Java庫都可以添加進來調用，比如Box2D、Unity等引擎都可以在開發(fā)時調用。除了強大的Java庫，還可以結合Arduino，讓圖形化界面和硬件產生互動，添加Kinect或Xtion又可以識別人體的肢體動作并進行處理，這些豐富的拓展讓Processing的作品充滿了想象力。

1.1 初識環(huán)境

通過訪問Processing官網www.Processing.org/download，可以下載Processing，請根據自己的操作系統(tǒng)，選擇相應的Mac、Windows、Linux的版本。

相對于其他語言非常復雜的開發(fā)環(huán)境，Processing開發(fā)環(huán)境非常簡潔明了，如圖1-1所示。

Processing開發(fā)環(huán)境由代碼編輯區(qū)、消息區(qū)域、控制臺、管理文件的標簽欄、常用指令按鈕的工具欄和一排菜單構成。當程序運行時，會彈出一個新的窗口，稱為顯示窗口。

利用工具欄中的按鈕可以實現(xiàn)以下功能。

圖1-1 Processing開發(fā)界面

：用于完成程序的檢查和編譯，并運行程序。

：停止運行中的程序，但不關閉顯示窗口。

：新建一個Processing程序。

：打開文件。

：保存當前的文件。

：將當前程序以Java插件嵌入HTML文件內導出。

：建立新的標簽頁，可以用于創(chuàng)建新的類。

用Processing編寫的程序被稱作草圖（sketch），這些草圖是在文本編輯器里完成的。每個草圖有獨立的文件夾，文件擴展名．pde代表此文件是由Processing開發(fā)環(huán)境創(chuàng)建的。

1.2 繪制第一個圖形

Processing提供了很多默認的函數(shù)，用來繪制點、線、橢圓、矩形等。先來繪制一個簡單的圓，ellipse(x, y, width, height)是橢圓繪制函數(shù)，前兩個參數(shù)設置橢圓圓心的位置，第三個參數(shù)設置長軸，第四個參數(shù)設置短軸。當參數(shù)width和height相等時得到的就是正圓。

例如，以畫面中心為原點畫一個直徑為100像素的圓，如圖1-2所示。

示例：

                                                                            1-1
ellipse(50,50,100,100);

1.3 繪制第一個動畫

圖1-2 圓

Processing的文本編輯框中默認會有兩個函數(shù)：setup()和draw()。前者之中的內容只被執(zhí)行一次，后者內容會被循環(huán)執(zhí)行。如下例中，設置圓的半徑為連續(xù)增大的值，在畫板中連續(xù)繪畫呈現(xiàn)的結果就是一個圓逐漸變大的動畫效果，如圖1-3所示。

示例：

                                                                            1-2
int r = 0;
void draw()
{
    ellipse(50,50, r++, r++);
}

圖1-3 逐漸變大的圓

1.4 第一個交互

調用鼠標繪制一根直線，可以移動鼠標來進行交互，如圖1-4所示。

示例：

                                                                            1-3
void draw()
{
    line(mouseX, mouseY,0,0);     //繪制一條直線
}

圖1-4 繪制直線

mouseX和mouseY是系統(tǒng)變量，也是鼠標所在的坐標位置，后面會詳細說明。在繪畫過程中，不消除原有的繪畫留下的痕跡。此時如果想要消除原有的繪畫痕跡，需要每次載入一個空白頁面。只需加入一行代碼即可，如圖1-5所示。

圖1-5 無痕跡繪圖

示例：

                                                                            1-4
void draw()
{
        background(255);
        line(mouseX, mouseY,0,0);     //直線
}

以上例子介紹了一些基礎概念，并沒有做詳細解釋，主要目的是讓讀者對Processing有初步的認識。接下來將引導讀者從語言基礎開始，結合簡單圖案繪制，循序漸進，再進階到制作動畫和交互。為了能得到最大的收獲，需要讀者盡可能多地上機編程操作，以快速掌握這門語言。