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


　　第1章　Processing
　　1.1　Hello Processing
　　Processing開發(fā)環(huán)境（Processing Development Environment），簡稱PDE，可以從它的官方網(wǎng)站（https://www.processing.org/download/）下載安裝。PDE主要有運行窗口和編輯窗口兩個窗口。運行窗口用來運行你的程序效果，編輯窗口主要用來編輯代碼和發(fā)布程序。編輯窗口包括工具欄、標簽欄、代碼編輯區(qū)、消息區(qū)、控制臺。
　　工具欄 ：包括運行、停止運行、新建、打開、保存、發(fā)布等按鈕。
　　運行：點擊“運行”按鈕可以運行你的程序。運行時會彈出“運行窗口”，你可以通過“運行窗口”來觀察程序的視覺效果和交互效果。
　　停止運行：點擊“停止運行”按鈕可以關(guān)閉“運行窗口”。
　　新建：新建一個Processing工程文件，會彈出一個新的未保存的代碼編輯窗口。在開發(fā)過程中，可以利用它來新建代碼編輯窗口，測試某一段程序代碼單獨運行的效果。
　　打開：打開一個指定路徑的Processing工程文件，還可以打開最近的工程或者是Processing事例代碼。
　　保存：保存目前的工程文件。
　　開發(fā)模式：點擊右上角“Java”按鈕可以切換開發(fā)模式。Processing支持很多種開發(fā)模式，可以通過點擊“Add Mode”來添加新的開發(fā)模式（JavaScript、Android等），添加后需要重新運行Processing才能顯示。
　　標簽欄：打開標簽欄向下箭頭的彈出菜單，可以點擊“New Tab”新建標簽。如果代碼有很多行的話可以用它來擴展程序。不過一般我們會用它來定義一個單獨的類，在后面的第7章我們會詳細講到。
　　代碼編輯區(qū)：所有的程序代碼都在這里編輯。會用不同顏色來區(qū)分數(shù)據(jù)類型、系統(tǒng)變量、系統(tǒng)常量、系統(tǒng)函數(shù)、語句等。
　　消息區(qū)：顯示程序編譯時的錯誤（語法錯誤），還有一些提示消息。
　　控制臺：顯示程序運行時的錯誤，還可以用print()或println()函數(shù)在這里輸出信息。
　　1.2　Hello world
　　我們開始寫第一行代碼，讓你的Processing向世界問聲好。打開Processing，在代碼編輯區(qū)輸入下面的代碼：
　　println("Hello， world!");
　　點擊“運行”后，在控制臺會輸出“Hello，world!”（不包含雙引號）。
　　我們在程序開發(fā)的過程中，可能會追蹤某個變量在某個時刻的值，或者輸出一些有用的信息來分析程序。這時可以使用print()和println()函數(shù)，在程序運行的時候通過控制臺輸出信息。print()和println()函數(shù)的區(qū)別是，println()函數(shù)輸出完信息后會換行，而print()函數(shù)不會，例如：
　　println("Hello，");
　　println("world!");
　　/* 輸出：
　　Hello，
　　world!
　　*/


　　print("Hello，");
　　print("world!");
　　//輸出：Hello，world!
　　有時候我們在寫代碼時為了便于閱讀和理解會給代碼添加一些標注，但是我們知道在代碼編輯器里寫的任何非程序語法的文字，程序都會報錯。在Processing里可以使用注釋，注釋是不會被當作執(zhí)行代碼的。用“//”來添加單行注釋，用“/* ”開始符號和“*/”結(jié)束符號來添加多行注釋：
　　//單行注釋


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


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