第一篇 入門基礎(chǔ)篇

第1章 Processing簡介

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

Processing簡單易用的特點(diǎn)，以及其豐富的拓展讓學(xué)習(xí)者可以創(chuàng)造出很多富有想象力的作品。因?yàn)樵醋訨ava，所以大量的Java庫都可以添加進(jìn)來調(diào)用，比如Box2D、Unity等引擎都可以在開發(fā)時(shí)調(diào)用。除了強(qiáng)大的Java庫，還可以結(jié)合Arduino，讓圖形化界面和硬件產(chǎn)生互動(dòng)，添加Kinect或Xtion又可以識(shí)別人體的肢體動(dòng)作并進(jìn)行處理，這些豐富的拓展讓Processing的作品充滿了想象力。

1.1 初識(shí)環(huán)境

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

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

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

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

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

：用于完成程序的檢查和編譯，并運(yùn)行程序。

：停止運(yùn)行中的程序，但不關(guān)閉顯示窗口。

：新建一個(gè)Processing程序。

：打開文件。

：保存當(dāng)前的文件。

：將當(dāng)前程序以Java插件嵌入HTML文件內(nèi)導(dǎo)出。

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

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

1.2 繪制第一個(gè)圖形

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

例如，以畫面中心為原點(diǎn)畫一個(gè)直徑為100像素的圓，如圖1-2所示。

示例：

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

1.3 繪制第一個(gè)動(dòng)畫

圖1-2 圓

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

示例：

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

圖1-3 逐漸變大的圓

1.4 第一個(gè)交互

調(diào)用鼠標(biāo)繪制一根直線，可以移動(dòng)鼠標(biāo)來進(jìn)行交互，如圖1-4所示。

示例：

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

圖1-4 繪制直線

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

圖1-5 無痕跡繪圖

示例：

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

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