1.3 灰度模式
正如1.2节所讨论的,在屏幕上构建图形至少要知道像素坐标。你已经非常礼貌地指导计算机在某个特定的位置绘制了特定大小的图形。但是,还有一个非常关键的内容没有介绍—颜色。
在数字化的世界里,精确性是非常重要的。比如,“嗨,你能将那个圆设定为蓝绿色吗?”之类的话是没有意义的。因为,颜色是通过一系列具体的数值来定义的。下面举一个最简单的例子:灰度(grayscale)。为灰度指定数值的方法如下:数值0代表黑色,数值255代表白色,而在此之间的其他数值(50、87、162、209等)代表的是由黑色逐渐到白色的过渡色,如图1-13所示。
你是否感觉0~255的取值看上去太随意?
对于某个指定图形的颜色信息,它是存储在计算机内存中的。内存实质上是采用二进制系统,由0和1构成的一个长序列。每个0或1就是一个比特(bit),比特是数据存储的最小单位,8比特就称为一个字节(byte)。想象一下,如果你有8比特(也就是1字节),对它们按照顺序进行排列,那么总共有多少种排列方式?答案是256种(如果你对二进制数进行一点研究就会证明这一点),也就是0到255之间的一系列数字。Processing使用8位颜色描述灰度范围(grayscale range),使用24位颜色(红、绿和蓝三种颜色分别包含8位,详见1.4节内容)描述全彩色(full color)。
理解了颜色的工作机制,现在就可以回到1.2节,为你绘制的图形设置特定的灰度颜色了。在Processing中,每一个图形都有stroke()函数,或fill()函数,或者两者兼有。stroke()函数可以设置图形轮廓的颜色,fill()函数可以设置图形的填充颜色。很明显,线条和点只能使用stroke()函数。
如果你忘记指定颜色值,那么Processing默认使用黑色(0)作为线条颜色,白色(255)作为填充颜色。注意,由于我使用了尺寸为200×200像素,也就是一个相对大一些的窗口,因此,也要使用与窗口对应的合适大小的矩形坐标数值,如图1-14所示。
在绘制图形之前,通过增加strok()和fill()函数可以设置颜色。这很像指导你朋友用一只专用笔在绘图纸上画画,你应该在他开始画之前而不是之后告诉他选好颜色。
另外还有一个函数background(),它可以在图形渲染时设置窗口的背景色。
示例1-1:stroke()和fill()
使用noStroke()和noFill()函数可以禁用线条颜色stroke()和填充色fill(),前者使得轮廓线消失,后者使得填充色消失。你的直觉可能是想使用stroke(0)来禁用轮廓线,但是,要注意0并不是“什么都没有”,而是意味着黑色。此外,注意不要同时使用noFill()和noStroke(),否则不会显示任何东西!
示例1-2:noFill()
在绘制图形时,Processing总是使用最近设定的stroke()和fill(),从上到下逐行执行代码(见图1-17)。
练习1-4:猜想需要什么样的指令能够完成下面的图形。