Processing_如何用Processing繪製棋盤方格

其實一張表格的繪製可以有多種想法

1.一張大表格是由很多條橫線以及直線所匯集而成的
2.由很多方格所組成


1.一張大表格是由很多條橫線以及直線所匯集而成的

所以我先從劃一條直線開始

接著是第二條直線  和 第三條線

因此我們也慢慢很直觀發現
每次都相隔50且只要小於整張畫布之寬
就不停重複此循環 做相同畫線

換言之   我們其實也可以對  橫線做相同邏輯操作

程式碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

float x = 0; float y = 0; void setup(){ size(600 , 400); } void draw(){ background(0); stroke(255); strokeWeight(2); x = 50; while(x<width){ line(x,0,x,height); x+=50; } y = 50; while(y<height){ line(0,y,width,y); y+=50; } }

2.由很多方格所組成

一張表格其實是由一堆固定大小的小方塊格所組成!!!

假設我在  200*200的方格畫布中要畫出一個  3*3的米字宮格

結果就會如下

一開始我將
縱向的cols
橫向的 rows
設置為以每一方格大小劃分幾個畫布寬高等分來設置各自的數值

像我們這裡假若  寬高都是200的畫布好了

於 cols(垂直) 這樣劃分下來就能   分成   200/30 = 6個等分
於 rows(橫向) 這樣劃分下來就能   分成   200/30 = 6個等分

OK那這裡由於我們只要劃分成   3*3

所以可以將此演算法設計成

好那如果我不想要固定都只在最左上角繪製此張方格表的話
那其實我們也可以更改這部分

假若我今天是在一個某個不固定寬高的畫布中
我想在比方於座標位置  (20,20)劃出4*4的方格


(下圖是用直接圖片貼上的妙招!!)

其實只要更改  最終繪製棋盤方格的初始位置各加20即可!!

程式碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

int boxSize = 30; int cols , rows; void setup(){ size(600 , 400); cols = 90/boxSize; rows = 90/boxSize; } void draw(){ background(0); for(int i=0;i<cols;i++) for(int j=0;j<rows;j++){ int x = i*boxSize; int y = j*boxSize; rect(x+20,y+20,boxSize,boxSize); } }