1.2　畫布與幀

我們的第一個程序由兩個方法（method）組成：setup()方法和draw()方法。有時人們通俗地把方法稱為函數或命令。我們想讓程序做事，就需要調用Processing自定義的方法（名字會自動變成藍色粗體）或自己定義的方法（將在第4章介紹）。

現在我們在line(400, 300, mouseX, mouseY);上面增添一行代碼：

再次按下播放鍵，鼠標在展示窗口內移動時的效果和之前不同了，只有一根線跟隨鼠標移動。這是怎么回事呢？實際上，程序中的draw()方法每秒會被調用60次左右，因此我們的程序會隨著鼠標不斷地畫直線。而新增的background(255)方法先把整個畫布（展示窗口）刷成了白色，然后畫一根直線，因此直線不會隨時間疊加在畫布上，如圖1-2所示。

1.1節的程序（線在畫布上疊加）與本節的畫線程序（線不疊加）代表了畫畫模式和動畫模式兩種動態模式，除此之外，靜態模式（不含draw()方法）也很常用。開始寫任何一個程序之前，首先要挑選一種模式。

Processing程序以setup()方法啟動，然后不斷運行draw()方法。所以我們把只需要在開頭運行一次的代碼放到setup()程序塊里，把需要反復運行的代碼放到draw()程序塊里。在每個程序塊內部，代碼會逐行依次運行。

以前美國有個做鐵路生意發家的富豪，他和人打賭說馬奔跑的某個瞬間四只蹄子都不著地。馬跑得太快，人眼無法分辨，于是他花錢聘了一位攝影師（Eadweard Muybridge）來拍攝馬飛奔過程中的所有瞬間。這個攝影師花了好幾年才成功，他的膠片放映機每秒會依次投射24張左右的膠片而人眼感受到的是馬飛奔的連貫動作。【特別浪費啊！】每張膠片稱為一幀（frame），其中的某一幀顯示：馬的四只蹄子確實都離開了地面。

Processing也使用了幀的概念，draw()（包括其后一對{}里面的所有代碼）會被程序連續調用，形成動畫效果。通常，我們在draw()方法的第一行把屏幕刷白：

這樣就形成了一張不斷更新的白色畫布（幀）。也許你更愛黑色背景，那就用background(0)；這一代碼。Processing采用0～255的整數來表示灰度，0代表黑色，255代表白色，中間的數字代表各種灰色。

那如何設置彩色背景呢？也很簡單，譬如background(255, 170, 0)、就是一個橙色背景，括號里的三個數字分別表示紅色、綠色、藍色的成分，我們會在1.3節詳細介紹顏色。

重要的事情再重復一遍！開始寫任何一個程序之前，【這里是第二遍！】首先要挑選一種模式。

（1）靜態模式。靜態模式只有setup()方法，沒有draw()方法，譬如：

（2）畫畫模式。在畫畫模式下，每幀畫的內容在一張畫布上不斷疊加（見1.1節程序）。

（3）動畫模式。在動畫模式下，每幀均在一張空白畫布上進行繪圖，即在draw()方法第一行用background()指定背景顏色。

靜態模式、畫畫模式和動畫模式使Processing視覺藝術變得豐富多彩。靜態模式可以輸出大幅精美圖像；畫畫模式像畫筆一樣，不斷在畫布上留下筆觸；動畫模式能產生無窮無盡的不重復的視頻。

有時一個程序可以寫成兩種模式，如畫畫模式：

以及動畫模式：

上面兩組代碼唯一的區別就是background(255, 160, 160)方法是在setup()程序塊中還是在draw()程序塊中。代碼中運用了模運算（%符號），當%符號前面的數字增加，直到等于width時，模運算的結果變為0。所以當橢圓移動到窗口最右側時，會跳回到窗口的最左側，如圖1-3所示。

我們可以用frameRate()方法來控制幀的更新速度，如在上面這個程序中，在setup()方法的內部加入“frameRate(5);”，小球的移動速度就會非常慢。Processing的默認速度是frameRate(60)，比電影的每移24幀快很多。還有一種特殊情況，當每幀需要繪制的內容（或所需的運算）特別多時，幀的實際更新速度會比設定的要慢。