Oh!Coder

Coding Life

有趣的Processing-颜色

| Comments

上一次,我们学习了如何用Processing画基本图形。但是呢,画出来的都是黑白照,那怎样才能将其变成彩色的呢?嗯,这一次我们就来一起学习一下,看如何解决这个问题。

grayscale

图片来源:Processing-tutorial

如上图所示,单一的颜色值,默认是0到255之间,其中0代表黑色,255代表白色,之间过度代表灰色,如上图所示。

在Processing里呢,有几个设置颜色的方法。一个是background(),一个是stroke,还有一个是fill()。其中background()设置的是整个窗口的背景色,stroke()设置的是图形的边框颜色,fill()填充的是图形内部的颜色。

举例来说。

1
2
3
4
5
6
7
8
9
10
// 设置窗口的大小为200*200
size(200, 200);
// 设置窗口背景色为255,白色
background(255);
// 设置线框颜色为0,黑色
stroke(0);
// 设置填充色为150,灰色
fill(150);
// 根据上述颜色的设置,画出矩形
rect(50, 50, 75, 100);

三基色

所有颜色里,有三种最基本的颜色,分别为红、绿、蓝,常用R、G、B来代表。所有常见颜色,都是由这三种颜色不同程度混合而成。所以也称这三种颜色为三基色。在上面提到的三种设置颜色的方法里,可以通过分别设置这三个数值,来最终得到想要的结果。比如:fill(255, 0, 0)填充色为红色,fill(127, 0, 0)填充色为深红色,fill(255, 200, 200)填充色为粉红色。以此类推,另外的background()stroke()设置颜色的形式也是如此。

除了手动设置数值以外,还可以通过Processing的PDE中颜色选择板来获取颜色数值。点开工具栏中的Tools,选择Color Selector,即可调出调色板,如下图所示。

color-selector

图片来源:Processing的PDE

Processing里,图形的填色采用的是临近原则,也就是说,在调用画图的基本方法时,颜色采用距离最近的那个作为填充色。比如:

1
2
3
4
5
6
7
// 填充黑色
fill(0);
// 填充白色
fill(255);
// 画矩形
// 此处填充的是白色
rect(50, 50, 75, 100);

上述例子中,所画矩形的填充色为白色,第一个fill(0)的效果,被第二个fill(255)所覆盖。所以上述示例中,最终画出的矩形填充的是白色。除此之外,还存在这样一对颜色,用来清空之前设置的颜色。一个是noFill(),这个是用来清空填充色的,另一个是noStroke(),这个是用来清空边框色的。清空之后的颜色,统一被设置成了白色。

颜色透明值

除了三基色以外,颜色设置里,还有一个透明值。它也是一个0到255的数值,0代表完全透明,255代表完全不透明,中间取值范围为半透明效果。也就是说,设置颜色的方法,可以设置四个参数,第四个参数即为透明值。例如,设置填充色fill(0, 255, 0, 125),其中125即为透明值。

画图

下面,我们就用一个综合的例子来演示我们上面提到的概念。

首先,打开Processing 3的编辑器,打开之后,默认会新建一个项目窗口,如下图所示。

processing-new-window

图片来源:Processing新项目窗口

然后,将下面的代码添加进去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup(){
  // 设定窗口的大小为200*200
  size(200, 200);
  // 设定窗口的背景色为黑色
  background(0);
  // 清空图形边框颜色,
  // 默认恢复为白色
  noStroke();
}
// 画图。
// 此方法被系统默认循环调用。
void draw(){
  // 填充颜色,
  // 缺省透明度值,
  // 默认为不透明
  fill(0, 0, 255);
  // 绘制矩形
  rect(0, 0, 100, 200);

  // 填充颜色,
  // 透明度值为255,
  // 效果为不透明
  fill(255, 0, 0, 255);
  // 绘制矩形
  rect(0, 0, 200, 40);

  // 填充颜色,
  // 透明度百分比为75%
  fill(255, 0, 0, 191);
  // 绘制矩形
  rect(0, 50, 200, 40);

  // 填充颜色,
  // 透明度百分比为55%
  fill(255, 0, 0, 127);
  // 绘制矩形
  rect(0, 100, 200, 40);

  // 填充颜色,
  // 透明度百分比为25%
  fill(255, 0, 0, 63);
  // 绘制矩形
  rect(0, 150, 200, 40);
}

好,以上就是示例代码。可以看出,每渲染一个矩形就用fill()方法重新填充一次颜色,由此也可见,绘制矩形的颜色,依据的是临近原则,也就是代码中所展示的,每条rect()方法上方最近的那个fill()方法。

processing-window-menu

图片来源:Processing新项目窗口中的菜单栏

然后点击新建项目点击新建项目窗口中菜单栏里三角图标,进行编译运行。

processing-fun-color

图片来源:Processing程序执行结果

最后,还有一个方法没有介绍,这个方法是colorMode(RGB, 100, 500, 10, 255),方法具体是用来设置颜色数值范围的,最左边的RGB为颜色的类型,随后的100代表的是R值的数值范围是0~100,500代表的是G值的数值范围是0~500,10代表的是B值的数值范围是0~10,最后的255代表的是透明值的数值范围是0~255。也就是说,调用了colorMode()方法之后,接下来对要设置颜色的数值范围,就要根据设定的数值范围限定了。不管是stroke()方法还是fill()方法,都要依照这个数值范围来进行设定。

总结

通过这次学习,我们了解了如何在Processing中对基本图形添加颜色,以及Processing中颜色的基本概念,比如三基色和透明度等。大题回顾一下,Processing中,对颜色设置的方法,主要包括stroke()用来设置线框的颜色,fill()用来填充图形内部的颜色,noStroke用来清除线框的颜色,效果就是将其设置为白色,noFill()用来清除图形内部的填充色,background()用来设置背景色,最后colorMode()来对颜色类型的数值进行设定。嗯,这次学习的基本方法就是这些。

下期预告

前两次我们学习了Processing中的基本图形和颜色。下一次,我们将进一步,学习Processing中的对象。嗯,不是男女对象的那个对象,是程序设计里的那个对象。没对象的可以自己创建对象,很神奇的哦!

Comments