Processing程式設計學習指南1.2 繪制基本圖形

<b>1.2　繪制基本圖形</b>

<b></b>

本書絕大部分的程式設計示例都是自然可視的。不論你最終希望利用processing學習制作互動遊戲，還是藝術算法，還是動态logo設計（在這裡，思考一下你學習processing的目的），最核心的是，每一種視覺程式設計都包含像素的設定。了解processing運作方式的最簡單方法是首先學習繪制基本圖形。這和在國小裡學習繪畫并沒有太大差別，隻是這裡的工具由蠟筆變成了代碼。

首先，從圖1-4中的四個基本圖形開始。

針對每個圖形，先問下自己需要什麼資料資訊才能确定圖形的坐标和大小（後面還會增加顔色），然後思考下processing希望會以怎樣的方式接收這些資料資訊。下面圖表（從圖1-5到圖1-11）的視窗寬度和高度均為10像素。其實真正開始程式設計之後，你通常會使用更大的視窗（因為10×10像素隻占據螢幕幾毫米的空間）。但是，出于示範的目的，小尺寸的視窗更容易呈現出圖像在坐标紙上的效果，進而幫助我們了解每一行代碼。

點是構成圖形的最基本元素，要繪制一個點，隻需要一個坐标（x，y），如圖1-5所示。繪制一條直線也不是很困難，隻需要兩個點，如圖1-6所示。

開始繪制矩形後，就會稍微有點複雜了。在processing中，矩形由左上角點的坐标、矩形的寬度值，以及矩形的高度值三者确定，如圖1-7所示。

圖　1-7

繪制矩形的第二種方法是：确定矩形中心點坐标、矩形寬度值和高度值，如圖1-8所示。注意，在采用這種繪制方式之前，需要事先指定center模式，因為processing預設的模式是corner（見圖1-7）。另外注意processing是區分字母大小寫的。

圖　1-8

繪制矩形的第三種方法是确定矩形的兩個點坐标：矩形左上角點和右下角點。這種繪制模式是corners（見圖1-9）。

了解了矩形的繪制方法之後，橢圓的繪制也就很好了解了。實際上，橢圓繪制和矩形繪制rect()大同小異，繪制橢圓時，可以想象有一個矩形的邊界框（見圖1-10）。與矩形rect()的corner模式不同，橢圓ellipse()的預設繪制模式是center，如圖1-11所示。

必須承認，圖1-11中的橢圓看上去并不是特别圓滑。processing有一個選擇使用哪些像

圖　1-11

素建立圓的内置方法。放大後，你會發現有很多小方塊以近似圓的方式進行排列，但是縮小到一定程度後，你就會看到一個完美的圓。在後續章節，你會發現使用processing可以建立自己的算法，能讓你單獨對圖形的每個像素點進行着色（當然，有可能你已經想到可以使用point()指令逐點進行繪制），但是目前，最好使用ellipse()指令執行這個工作。

當然，processing函數庫中不僅僅隻有點、直線、橢圓和矩形的圖形繪制指令。在第2章，你會看到processing語言參考文檔提供了繪制函數的完整清單，以及對應的實參要求、句法示例和相應的圖形輸出。目前，作為練習，你可以嘗試想象一下其他的圖形應該需要什麼樣的實參，如圖1-12所示，依次為：triangle()、arc()、quad()和curve()。

練習1-2：使用下面的空白圖表，根據代碼粗略繪制出圖形。

練習1-3：根據下面的圖形，反向推導出初始的圖形繪制指令。