第1部分 語(yǔ)言基礎(chǔ)
第1章 Processing
1.1 Hello Processing
Processing開發(fā)環(huán)境（Processing Development Environment），簡(jiǎn)稱PDE，可以從它的官方網(wǎng)站（https://www.processing.org/download/）下載安裝。PDE主要有運(yùn)行窗口和編輯窗口兩個(gè)窗口。運(yùn)行窗口用來(lái)運(yùn)行你的程序效果，編輯窗口主要用來(lái)編輯代碼和發(fā)布程序。編輯窗口包括工具欄、標(biāo)簽欄、代碼編輯區(qū)、消息區(qū)、控制臺(tái)。
工具欄 ：包括運(yùn)行、停止運(yùn)行、新建、打開、保存、發(fā)布等按鈕。
運(yùn)行：點(diǎn)擊“運(yùn)行”按鈕可以運(yùn)行你的程序。運(yùn)行時(shí)會(huì)彈出“運(yùn)行窗口”，你可以通過“運(yùn)行窗口”來(lái)觀察程序的視覺效果和交互效果。
停止運(yùn)行：點(diǎn)擊“停止運(yùn)行”按鈕可以關(guān)閉“運(yùn)行窗口”。
新建：新建一個(gè)Processing工程文件，會(huì)彈出一個(gè)新的未保存的代碼編輯窗口。在開發(fā)過程中，可以利用它來(lái)新建代碼編輯窗口，測(cè)試某一段程序代碼單獨(dú)運(yùn)行的效果。
打開：打開一個(gè)指定路徑的Processing工程文件，還可以打開最近的工程或者是Processing事例代碼。
保存：保存目前的工程文件。
開發(fā)模式：點(diǎn)擊右上角“Java”按鈕可以切換開發(fā)模式。Processing支持很多種開發(fā)模式，可以通過點(diǎn)擊“Add Mode”來(lái)添加新的開發(fā)模式（JavaScript、Android等），添加后需要重新運(yùn)行Processing才能顯示。
標(biāo)簽欄：打開標(biāo)簽欄向下箭頭的彈出菜單，可以點(diǎn)擊“New Tab”新建標(biāo)簽。如果代碼有很多行的話可以用它來(lái)擴(kuò)展程序。不過一般我們會(huì)用它來(lái)定義一個(gè)單獨(dú)的類，在后面的第7章我們會(huì)詳細(xì)講到。
代碼編輯區(qū)：所有的程序代碼都在這里編輯。會(huì)用不同顏色來(lái)區(qū)分?jǐn)?shù)據(jù)類型、系統(tǒng)變量、系統(tǒng)常量、系統(tǒng)函數(shù)、語(yǔ)句等。
消息區(qū)：顯示程序編譯時(shí)的錯(cuò)誤（語(yǔ)法錯(cuò)誤），還有一些提示消息。
控制臺(tái)：顯示程序運(yùn)行時(shí)的錯(cuò)誤，還可以用print()或println()函數(shù)在這里輸出信息。
1.2 Hello world
我們開始寫第一行代碼，讓你的Processing向世界問聲好。打開Processing，在代碼編輯區(qū)輸入下面的代碼：
println("Hello， world!");
點(diǎn)擊“運(yùn)行”后，在控制臺(tái)會(huì)輸出“Hello，world!”（不包含雙引號(hào)）。
我們?cè)诔绦蜷_發(fā)的過程中，可能會(huì)追蹤某個(gè)變量在某個(gè)時(shí)刻的值，或者輸出一些有用的信息來(lái)分析程序。這時(shí)可以使用print()和println()函數(shù)，在程序運(yùn)行的時(shí)候通過控制臺(tái)輸出信息。print()和println()函數(shù)的區(qū)別是，println()函數(shù)輸出完信息后會(huì)換行，而print()函數(shù)不會(huì)，例如：
println("Hello，");
println("world!");
/* 輸出：
Hello，
world!
*/
print("Hello，");
print("world!");
//輸出：Hello，world!
有時(shí)候我們?cè)趯懘a時(shí)為了便于閱讀和理解會(huì)給代碼添加一些標(biāo)注，但是我們知道在代碼編輯器里寫的任何非程序語(yǔ)法的文字，程序都會(huì)報(bào)錯(cuò)。在Processing里可以使用注釋，注釋是不會(huì)被當(dāng)作執(zhí)行代碼的。用“//”來(lái)添加單行注釋，用“/* ”開始符號(hào)和“*/”結(jié)束符號(hào)來(lái)添加多行注釋：
//單行注釋
/*
多行注釋
多行注釋
*/
1.3 第一個(gè)圖形
以畫面中心為原點(diǎn)畫一個(gè)直徑為100像素的圓，如圖1.2所示。
ellipse(50，50，100，100); //畫一個(gè)橢圓，x、y坐標(biāo)都為50，寬和高都為100
Processing提供了大量有關(guān)繪圖的函數(shù)，這些函數(shù)就好比是各種各樣的繪圖工具。而且還可以添加圖片，支持疊加和濾鏡功能，如果你之前學(xué)習(xí)過圖形編輯軟件的話，比如Adobe Photoshop，那么在學(xué)習(xí)Processing的時(shí)候，會(huì)發(fā)現(xiàn)有很多概念都似曾相識(shí)。沒錯(cuò)！圖形編輯軟件其實(shí)就是把繪圖操作可視化。而程序繪圖是使用程序語(yǔ)言來(lái)描述繪圖。所謂描述繪圖就是，概括出圖形的所有特征屬性，用相應(yīng)的屬性值來(lái)描述它。比如畫一個(gè)圓，圓的特征屬性是半徑和位置，那么我們只要告訴Processing這個(gè)圓的半徑和位置，Processing就會(huì)在屏幕幫我們畫出這個(gè)圓。是不是很簡(jiǎn)單，就好像你在告訴一個(gè)使用繪圖軟件的人，讓他幫你畫出你想要的東西一樣。只不過你和他溝通的時(shí)候，需要和他說(shuō)他能聽得懂的語(yǔ)言——Processing程序語(yǔ)言。本書將教你如何使用Processing程序語(yǔ)言，讓你學(xué)會(huì)和他溝通，繪制出各種各樣的圖形。
1.4 第一個(gè)動(dòng)畫
以畫面中心為原點(diǎn)畫一個(gè)圓，讓圓的直徑從0開始逐漸變大，如圖1.3所示。
int diameter = 0; //聲明一個(gè)直徑變量，初始值為0
//draw()函數(shù)會(huì)不斷地循環(huán)執(zhí)行
void draw() {
//畫一個(gè)圓，直徑為diameter變量
ellipse(50， 50， diameter， diameter);
diameter++; //每次循環(huán)，讓直徑變量增加1
}
上面的圓形可以隨著時(shí)間逐漸變大，是因?yàn)榘阉奶卣鲗傩浴爸睆健痹O(shè)置成了隨著時(shí)間變化的量，這樣就形成了動(dòng)畫。這種把特征屬性設(shè)置為隨著時(shí)間而變化的方法，是程序動(dòng)畫的基本實(shí)現(xiàn)機(jī)制。和我們傳統(tǒng)的逐幀動(dòng)畫不同，傳統(tǒng)逐幀動(dòng)畫需要在每一幀都重畫，而程序動(dòng)畫只需要改變它的特征屬性，計(jì)算機(jī)就會(huì)幫我們重繪，這也是為什么我們?cè)诶L圖的時(shí)候用描述圖形特征屬性的方法來(lái)繪制。
1.5?第一個(gè)交互
不斷以鼠標(biāo)x、y坐標(biāo)為原點(diǎn)畫直徑為100像素的圓，你可以移動(dòng)鼠標(biāo)來(lái)進(jìn)行交互，如圖1.4所示。
//draw()函數(shù)會(huì)不斷循環(huán)執(zhí)行
void draw() {
//畫一個(gè)圓，位置為鼠標(biāo)的x、y坐標(biāo)
ellipse(mouseX， mouseY， 100， 100);
}
上面的圓形可以隨著鼠標(biāo)的移動(dòng)而改變位置，是因?yàn)榘阉奶卣鲗傩浴拔恢谩痹O(shè)置成了隨著時(shí)間變化的量，并且變化的量由鼠標(biāo)位置來(lái)決定，這就是在程序動(dòng)畫的基礎(chǔ)上添加交互因素的設(shè)計(jì)方法。
我們已經(jīng)學(xué)習(xí)了第一個(gè)圖形、第一個(gè)動(dòng)畫、第一個(gè)交互。在這里我想告訴讀者，本章不要求你理解上面所有例子中每一行代碼的原理，主要目的是讓你對(duì)交互動(dòng)畫有個(gè)初步的理解，并且能夠帶著交互動(dòng)畫的概念來(lái)完成本書的學(xué)習(xí)。下面是構(gòu)成交互動(dòng)畫的三個(gè)過程：
�。�1）圖形：用特征描述繪圖。
�。�2）動(dòng)畫：把特征屬性定義為隨時(shí)間變化的量。
（3）交互：設(shè)置變化量的決定因素。
……
書單推薦
