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个方块阵列,那么每个方块的大小,即位置偏移增量increWincreH(increment表示增量,一般我们会使用常用的英文缩写定义变量名)就可以这么计算得出:

  increW = width / WCOUNT;   //   WCOUNT、HCOUNT代表数量10、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上,请多多支持鼓励,有问题留言,感谢。

原文地址:https://www.cnblogs.com/sharpeye/p/13732539.html