基礎部分

第1章
畫布、畫筆和顏色

1.1　第一個程序

你是否曾經為畫畫之前要準備一大堆畫筆、顏料而煩惱？一旦下載了Processing這個“神器”，你就立刻免去了這些麻煩，因為Processing開發環境已經在計算機上為你準備好了畫布、畫筆和所有顏色。【還可以做動畫哦！】

Processing是由麻省理工學院的Ben Fry和Casey Reas為藝術家、設計師、建筑師、學生開發的圖形化編程環境，它在全球掀起了一股編寫創意編碼的熱潮。Processing誕生于2001年，今年已經20周歲了。

Processing是一款免費的開源軟件，在Windows和Mac下運行的效果完全一致。Processing已經有好幾個版本了，但大家還是覺得2.2版本用起來更順手。下載安裝完成后打開Processing，在文本編輯器內迅速輸入六行神秘的代碼：

注意這些字符有不同的顏色。如果有些英文單詞沒有變成彩色，那么可能是因為拼寫錯誤。代碼里面的標點符號是必須的，而且字母的大小寫也不能搞錯哦！

Processing工具欄左側有兩個按鈕酷似老式錄音機上的播放鍵（run）和停止鍵（stop）。單擊播放鍵，代碼開始運行，這時有一個展示窗口（畫布）彈出來，鼠標就能不斷地在畫布上畫直線了，如圖1-1所示。

平復一下激動的心情，現在可以按停止鍵關閉程序了。單擊“文件/保存”選項保存代碼，給文件（.pde格式）取一個有意義的名字吧，譬如：

ManyLines_HuaHao_20200114.pde

這個名字明確了三點：程序內容、作者姓名和創作日期（yyyymmdd）。文件的命名十分重要！想象一下你已經寫了上百個程序，如果這些文件都沒有一個有含義的名字，你很難找到那個你想要的文件。當你和他人分享代碼時，為文件取名是一種基本的禮儀。此外，建議你在計算機里新建一個文件夾，專門存放你的程序。

回到那六行代碼，我們暫且無視void、setup、draw這些詞，只看和圖形有關的代碼：

你可以試著在代碼中改變展示窗口的大小和直線起點的位置，看結果是否和你想象的一樣。譬如，把畫線的那行代碼改成line(0, 0, mouseX, mouseY);。你也許會驚訝地發現屏幕的原點在左上角，而一般數學書里的坐標原點在左下角，但這不影響我們理解“坐標”。假如有一只青蛙從原點起跳，坐到了草地上，我們就能標出它的位置了。

用兩個數來表示一個點在平面內的位置，這是一項古老的發明，傳說是400多年前法國的勒內·笛卡兒（René Descartes）在生病臥床時受蜘蛛網啟發后發明的。笛卡兒坐標系把圖形與數字或變化的數字，聯系起來，并在程序中用“變量”（variable）來表示，這是所有數字化視覺藝術的基石。Processing中的笛卡兒坐標系可以是二維或三維的，本書專注于二維坐標系中的圖形藝術。

有時，你會發現程序莫名其妙地無法運行了。譬如，把mouseX這個關鍵詞寫成mousex，運行程序時文本編輯器下方的消息區域（會變成深褐色）內會出現一行白色的字：

Cannot find anything name “mousex”

意思是無法找到mousex。因為Java編程語言是一種嚴格區分字母大小寫的語言，因此mouseX和mousex是截然不同的。Processing內部已經定義了很多關鍵詞，如mouseX指鼠標在顯示窗口中的x坐標，這些關鍵字會自動變成彩色。常見的關鍵字還有：

width——展示窗口的寬度；

height——展示窗口的高度；

frameCount——整數，當前幀的序號。

注意代碼的顏色有助于減少錯誤。盡量不要在代碼里混入中文字符，否則容易出現一些難以發現的錯誤。

大部分編程語言允許無用的空行、空格夾雜在代碼里，Java編程語言也一樣。在代碼任意一處增加一個空行，不會對程序的運行產生任何影響。在各關鍵詞、數字前后增加空行也沒有任何問題。推薦大家經常用菜單欄的Edit / Auto Format 命令來使代碼整齊劃一，去掉那些多余的空格。

為了使代碼的可讀性更強，我們可以用//符號添加注釋。程序會忽略//后面的內容，同時這些內容會變成灰色。下面我們給第一個程序添加注釋：