第1部分　語(yǔ)言基礎(chǔ)


　　第1章　Processing
　　1.1　Hello Processing
　　Processing開(kāi)發(fā)環(huán)境（Processing Development Environment），簡(jiǎn)稱(chēng)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)行、新建、打開(kāi)、保存、發(fā)布等按鈕。
　　運(yùn)行：點(diǎn)擊“運(yùn)行”按鈕可以運(yùn)行你的程序。運(yùn)行時(shí)會(huì)彈出“運(yùn)行窗口”，你可以通過(guò)“運(yùn)行窗口”來(lái)觀察程序的視覺(jué)效果和交互效果。
　　停止運(yùn)行：點(diǎn)擊“停止運(yùn)行”按鈕可以關(guān)閉“運(yùn)行窗口”。
　　新建：新建一個(gè)Processing工程文件，會(huì)彈出一個(gè)新的未保存的代碼編輯窗口。在開(kāi)發(fā)過(guò)程中，可以利用它來(lái)新建代碼編輯窗口，測(cè)試某一段程序代碼單獨(dú)運(yùn)行的效果。
　　打開(kāi)：打開(kāi)一個(gè)指定路徑的Processing工程文件，還可以打開(kāi)最近的工程或者是Processing事例代碼。
　　保存：保存目前的工程文件。
　　開(kāi)發(fā)模式：點(diǎn)擊右上角“Java”按鈕可以切換開(kāi)發(fā)模式。Processing支持很多種開(kāi)發(fā)模式，可以通過(guò)點(diǎn)擊“Add Mode”來(lái)添加新的開(kāi)發(fā)模式（JavaScript、Android等），添加后需要重新運(yùn)行Processing才能顯示。
　　標(biāo)簽欄：打開(kāi)標(biāo)簽欄向下箭頭的彈出菜單，可以點(diǎn)擊“New Tab”新建標(biāo)簽。如果代碼有很多行的話可以用它來(lái)擴(kuò)展程序。不過(guò)一般我們會(huì)用它來(lái)定義一個(gè)單獨(dú)的類(lèi)，在后面的第7章我們會(huì)詳細(xì)講到。
　　代碼編輯區(qū)：所有的程序代碼都在這里編輯。會(huì)用不同顏色來(lái)區(qū)分?jǐn)?shù)據(jù)類(lèi)型、系統(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
　　我們開(kāi)始寫(xiě)第一行代碼，讓你的Processing向世界問(wèn)聲好。打開(kāi)Processing，在代碼編輯區(qū)輸入下面的代碼：
　　println("Hello， world!");
　　點(diǎn)擊“運(yùn)行”后，在控制臺(tái)會(huì)輸出“Hello，world!”（不包含雙引號(hào)）。
　　我們?cè)诔绦蜷_(kāi)發(fā)的過(guò)程中，可能會(huì)追蹤某個(gè)變量在某個(gè)時(shí)刻的值，或者輸出一些有用的信息來(lái)分析程序。這時(shí)可以使用print()和println()函數(shù)，在程序運(yùn)行的時(shí)候通過(guò)控制臺(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è)趯?xiě)代碼時(shí)為了便于閱讀和理解會(huì)給代碼添加一些標(biāo)注，但是我們知道在代碼編輯器里寫(xiě)的任何非程序語(yǔ)法的文字，程序都會(huì)報(bào)錯(cuò)。在Processing里可以使用注釋?zhuān)�注釋是不�?huì)被當(dāng)作執(zhí)行代碼的。用“//”來(lái)添加單行注釋?zhuān)�用�?* ”開(kāi)始符號(hào)和“*/”結(jié)束符號(hào)來(lái)添加多行注釋?zhuān)?br /> 　　//單行注釋


　　/*
　　多行注釋
　　多行注釋
　　*/
　　1.3　第一個(gè)圖形
　　以畫(huà)面中心為原點(diǎn)畫(huà)一個(gè)直徑為100像素的圓，如圖1.2所示。
　　ellipse(50，50，100，100); //畫(huà)一個(gè)橢圓，x、y坐標(biāo)都為50，寬和高都為100
　　Processing提供了大量有關(guān)繪圖的函數(shù)，這些函數(shù)就好比是各種各樣的繪圖工具。而且還可以添加圖片，支持疊加和濾鏡功能，如果你之前學(xué)習(xí)過(guò)圖形編輯軟件的話，比如Adobe Photoshop，那么在學(xué)習(xí)Processing的時(shí)候，會(huì)發(fā)現(xiàn)有很多概念都似曾相識(shí)。沒(méi)錯(cuò)！圖形編輯軟件其實(shí)就是把繪圖操作可視化。而程序繪圖是使用程序語(yǔ)言來(lái)描述繪圖。所謂描述繪圖就是，概括出圖形的所有特征屬性，用相應(yīng)的屬性值來(lái)描述它。比如畫(huà)一個(gè)圓，圓的特征屬性是半徑和位置，那么我們只要告訴Processing這個(gè)圓的半徑和位置，Processing就會(huì)在屏幕幫我們畫(huà)出這個(gè)圓。是不是很簡(jiǎn)單，就好像你在告訴一個(gè)使用繪圖軟件的人，讓他幫你畫(huà)出你想要的東西一樣。只不過(guò)你和他溝通的時(shí)候，需要和他說(shuō)他能聽(tīng)得懂的語(yǔ)言——Processing程序語(yǔ)言。本書(shū)將教你如何使用Processing程序語(yǔ)言，讓你學(xué)會(huì)和他溝通，繪制出各種各樣的圖形。
　　1.4　第一個(gè)動(dòng)畫(huà)
　　以畫(huà)面中心為原點(diǎn)畫(huà)一個(gè)圓，讓圓的直徑從0開(kāi)始逐漸變大，如圖1.3所示。
　　int diameter = 0; //聲明一個(gè)直徑變量，初始值為0


　　//draw()函數(shù)會(huì)不斷地循環(huán)執(zhí)行
　　void draw() {
　　//畫(huà)一個(gè)圓，直徑為diameter變量
　　ellipse(50， 50， diameter， diameter);
　　diameter++; //每次循環(huán)，讓直徑變量增加1
　　}
　　上面的圓形可以隨著時(shí)間逐漸變大，是因?yàn)榘阉�的特征屬性“直徑”設(shè)置成了隨著時(shí)間變化的量，這樣就形成了動(dòng)畫(huà)。這種把特征屬性設(shè)置為隨著時(shí)間而變化的方法，是程序動(dòng)畫(huà)的基本實(shí)現(xiàn)機(jī)制。和我們傳統(tǒng)的逐幀動(dòng)畫(huà)不同，傳統(tǒng)逐幀動(dòng)畫(huà)需要在每一幀都重畫(huà)，而程序動(dòng)畫(huà)只需要改變它的特征屬性，計(jì)算機(jī)就會(huì)幫我們重繪，這也是為什么我們?cè)诶L圖的時(shí)候用描述圖形特征屬性的方法來(lái)繪制。
　　1.5?第一個(gè)交互
　　不斷以鼠標(biāo)x、y坐標(biāo)為原點(diǎn)畫(huà)直徑為100像素的圓，你可以移動(dòng)鼠標(biāo)來(lái)進(jìn)行交互，如圖1.4所示。
　　//draw()函數(shù)會(huì)不斷循環(huán)執(zhí)行
　　void draw() {
　　//畫(huà)一個(gè)圓，位置為鼠標(biāo)的x、y坐標(biāo)
　　ellipse(mouseX， mouseY， 100， 100);
　　}
　　上面的圓形可以隨著鼠標(biāo)的移動(dòng)而改變位置，是因?yàn)榘阉�的特征屬性“位置”設(shè)置成了隨著時(shí)間變化的量，并且變化的量由鼠標(biāo)位置來(lái)決定，這就是在程序動(dòng)畫(huà)的基礎(chǔ)上添加交互因素的設(shè)計(jì)方法。
　　我們已經(jīng)學(xué)習(xí)了第一個(gè)圖形、第一個(gè)動(dòng)畫(huà)、第一個(gè)交互。在這里我想告訴讀者，本章不要求你理解上面所有例子中每一行代碼的原理，主要目的是讓你對(duì)交互動(dòng)畫(huà)有個(gè)初步的理解，并且能夠帶著交互動(dòng)畫(huà)的概念來(lái)完成本書(shū)的學(xué)習(xí)。下面是構(gòu)成交互動(dòng)畫(huà)的三個(gè)過(guò)程：
　�。�1）圖形：用特征描述繪圖。
　�。�2）動(dòng)畫(huà)：把特征屬性定義為隨時(shí)間變化的量。
　�。�3）交互：設(shè)置變化量的決定因素。
　　……