Processing 網格紋理製做（棋盤格）

寫在前面的話

好久沒有寫博文了。最近在整理Processing有關文檔，看到以前作的一些例子，想着分享在互聯網上，固然和之前同樣，目前也僅爲了給初學者有個學習參考，筆者能力有限。廢話很少說，幹就完事了。
來作個紋理怎麼樣？基本紋理不少樣式，咱們慢慢嘗試去實現，今天搞一個網格紋理，準確的說是棋盤格，就像下圖所示：

開始

首先寫好Processing該有的樣子，定義settings(),setup(),draw()等函數：

void settings(){
   size(800,800);
}
void setup() {
   
}

void draw() {
   
}

這個settings()我會單獨去作講解，這裏簡單說一下：它是早於setup()初始化的處理函數，有點像Unity腳本系統中Start()和Awake()的關係，可是邏輯層面是不同的。不少PApplet類中的函數在這裏是不能被調用的，除了size()和smooth()兩個函數。並且，一旦寫了settings(),就必須得把上述兩個函數寫在settings()裏頭！你們之後均可以養成習慣這麼去填寫，由於Processing系統這麼設定，有它的道理，不過若是是純碎學習，那不碼這個settings()也無妨。還有個值得說的，由於只是要作個圖，其實draw()不必寫上。

小試牛刀

咱們先試一試畫一個矩形框，以下：

noStroke();
fill(255);
rect(150,150,100,100);

這樣會在畫布上出現一個白色矩形框，ok,接下來要作的是把這個事情給過程化（面向過程），寫個函數封裝其過程：

void drawRect(int c, int x, int y, int w, int h) {
  noStroke();
  fill(c);
  rect(x, y, w, h);
}

drawRect()能夠被傳入五個參數，分別表明其顏色、座標信息x,y、矩形長寬大小。爲何能這麼去封裝它，這要求思考問題自己。細細觀察棋盤格的特色，黑白方塊相隔，若是抽象出它的屬性，那麼就不難想獲得有諸如上述的參數，咱們把它稱之爲屬性（固然這個說法實際上是不嚴謹的，由於如今咱們的編程思路僅僅是面向過程，在OOP面向對象中這個特色會更加明顯）[哦對，有讀者感興趣的話也能找找有關函數式編程的資料，絕對會讓你開拓眼界，在思考問題的方式上會有不同的感覺哦，參考https://www.zhihu.com/question/28292740?sort=created]。

再接再礪

有了這個函數就能夠在外頭傳進參數來繪製想要的結果，那問題來了，如何傳進去？首先是顏色，顏色好辦，

int c = color(200,20,20);  //這裏能夠將color類型當作是int 類型，其實在計算機裏顏色這概念也就是一個數值而已

這樣就結束了。而後是位置，若是你以前學過或者感覺過循環結構（編程是要多多感覺的，你說編程有沒有套路，其實不少時候是能夠憑經驗辦事的），那麼就不難想到兩個for循環遍從來繪製佈滿整個畫布的圖形的例子，那在這裏，一樣是作這樣的處理（這就是所謂的算法）:

for (int x = 0; x  < width; x += increW)
  {
    for (int y = 0; y < height; y += increH)
    {
      int c = color(255);
      drawRect(c, x, y, increW, increH);
    }
  }

而對於矩形大小，咱們作一假設，設想要在畫布上繪製10*10個方塊陣列，那麼每一個方塊的大小，即位置偏移增量increW和increH(increment表示增量，通常咱們會使用經常使用的英文縮寫定義變量名)就能夠這麼計算得出：

increW = width / WCOUNT;   //   WCOUNT、HCOUNT表明數量十、10  你能夠寫成 increW=width/WCOUNT;這樣，沒問題！
  increH = height / HCOUNT;  //   可是養成良好的編程習慣和修養，加上些空格，你本身也以爲便於閱讀，還haokanmeiguan

在for語句的第三個表達式中寫明x自加increW，y自加increH，獲得的結果即是每次傳入drawRect()函數中的位置有了相應偏移，大小也有了定義，即每次位移的數值。若是你按照這一步驟敲碼執行，你會獲得全白的畫布，爲何呢？很簡單，事實上Processing已經幫你繪製了這麼多方塊，只是顏色統一，位置統一，完美無瑕得散步在畫布上了，沒有任何縫隙。而要想實現間隔黑白效果，是否是還得加上黑色方塊呢。是的，就得是要繪製這樣的rect:

noStroke();
fill(0);
rect(150,150,100,100);

可是，如何把它整合在for循環體裏呢？這就又要談到簡單的算法技巧，咱們能夠引入一個開關變量來處理間隔繪製不一樣顏色的流程，對於"開關變量"這一說法，讀者請參考https://blog.csdn.net/fddxsyf123/article/details/62848357這一篇以前寫的。在這裏你腦力應是以下的邏輯：

if（k == 0）
{
   fill(255);
   rect(150,150,100,100);
}
if（k == 1）
{
   fill(0);
   rect(150,150,100,100);
}

結成正果

咱們進一步把它簡化，當作是奇數和偶數差異，這樣只要定義一個int值，每次繪畫完畢，至關於狀態要改變了，就得切換，這個值自加一個值或者自減就能夠達成了。有機整合進循環體，能夠這樣表示：

int k = 0;   // k表明狀態，具體數值表明什麼意思得看上下文
int c = 0;
for (int x = 0; x  < width; x += increW)
{
  for (int y = 0; y < height; y += increH)
  {
    if(k % 2 == 0)  //注意這個判斷條件是關鍵的，判斷是否被2整除，若是真，則是偶數，反之奇數，這就達成了兩種狀態互切效果
      c = color(255);
    else 
      c = color(0);
    drawRect(c, x, y, increW, increH);
    k++;   //一個狀態完畢，切換
  }
  k++;   //如今是一列一列遍歷繪製，所以沒換一列也得切換狀態，造成棋盤網格效果
}

好了基本圖形已經展示出來了~~~ 完整代碼以下：

int increW;
int increH;
int WCOUNT = 10;
int HCOUNT = 10;

void drawRect(int c, int x, int y, int w, int h) {
  noStroke();
  fill(c);
  rect(x, y, w, h);
}

void settings() {
  size(800, 800);
}
void setup() {
  increW = width/WCOUNT;
  increH = height/HCOUNT;
  int k = 0;
  int c = 0;
  for (int x = 0; x  < width; x += increW)
  {
    for (int y = 0; y < height; y += increH)
    {
      if (k % 2 == 0)
        c = color(255);
      else 
      c = color(0);
      drawRect(c, x, y, increW, increH);
      k++;
    }
    k++;
  }
}

void draw() {
}

呈現的效果

寫在最後的話

很久沒寫了，是該多分享多交流，我會同步更新於CSDN上，請多多支持鼓勵，有問題留言，感謝。