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上，请多多支持鼓励，有问题留言，感谢。