【04】processing-色彩（中文）

色彩

 

Daniel Shiffman（丹尼尔老师）

 

在数字世界里，当我们想谈论一种颜色时，精度是必需的，颜色被定义为一系列数字。让我们从最简单的情况开始

 

0表示黑色，255表示白色。在0到255之间，每隔50、87、162、209等数字就是一个从黑到白的灰色阴影。

 

0-255在你看来是任意的吗？

 

给定形状的颜色需要存储在计算机的内存中。这个内存只是一个很长的0和1的序列（一堆开关），每个开关都有一个位，8个开关加起来就是一个字节。

 

想象一下，如果我们有8位（一个字节）的序列，我们可以用多少种方式配置这些交换机？

答案是（二进制只有0和1，所以每一位有2种可能性）2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256种可能性，

 

或者0到255之间的一系列数字。我们将使用8位颜色作为灰度范围，24位用于全色（红色、绿色和蓝色分量各8位）。

 

通过在绘制之前添加stroke（）和fill（）函数，我们可以设置任何给定形状的颜色。还有一个函数background（），它为窗口设置背景色。这里有一个例子。

 

size(200, 200);
background(255);    // 设置背景颜色为白色
stroke(0);          // 设置边框颜色为黑色
fill(150);          // 设置填充颜色为灰色
rect(50,50,75,100); // 绘制矩形

 

 

 

使用noStroke（）和noFill（）函数可以消除边框或填充。

stroke(0) 表示黑色，而不是消除边框。另外，记住不要用noStroke（）和noFill（）同时消除，看不到图形！

 

此外，如果我们绘制两个形状，处理将始终使用最近指定的笔划和填充，代码是从上到下读取代码。

 

 

background(150);

stroke(0);
line(0,0,100,100);

stroke(255);
noFill();
rect(25,25,50,50);

 

RGB颜色

 

还记得手指画吗？通过混合三种“原色”，可以产生任何颜色。把所有的颜色混合在一起形成了一种浑浊的棕色。

你加的油漆越多，颜色就越深。数字颜色也是由三种原色混合而成，但它的工作原理与油漆不同。

首先，原色是不同的：红色、绿色和蓝色（即“RGB”颜色）。屏幕上的颜色是混合光，而不是颜料，所以混合规则也不同。

 

 

• Red（红色） + Green（绿色） = Yellow（黄色）
• Red（红色） + Blue（蓝色） = Purple（紫色）
• Green（绿色） + Blue（蓝色） = Cyan (青色)
• Red（红色） + Green（绿色） + Blue（蓝色） = White（白色）
• No colors（没有颜色） = Black（黑色）

 

这假设所有的颜色都尽可能的明亮，但是当然，你有一个可用的颜色范围，所以一些红色加一些绿色加一些蓝色等于灰色，一点红色加一点蓝色等于深紫色。虽然这可能需要一些习惯，你越多的程序和实验与RGB的颜色，它将变得越本能，很像旋转的颜色与你的朋友。当然，你不能说“混合一些红色和一点蓝色”，你必须提供一个确切的数量。与灰度一样，单个颜色元素表示为从0（不包含该颜色）到255（尽可能多）的范围，它们按R、G和B的顺序列出。通过实验，您将了解RGB颜色混合的窍门，但接下来我们将介绍一些使用一些常见颜色的代码。

 

我们来看看颜色混合案例

 

 

 

background(255);  
noStroke(); 

// 纯 红色
fill(255,0,0);
ellipse(20,20,16,16);

// 暗 红色
fill(127,0,0);
ellipse(40,20,16,16);

// 粉 红色
fill(255,200,200);
ellipse(60,20,16,16);

 

处理也有一个颜色选择器来帮助选择颜色。通过菜单栏 【工具→颜色选择器】

 

 

 

颜色透明度

 

除了每种颜色的红色、绿色和蓝色分量外，还有一个附加的可选第四分量，称为颜色的“alpha”。

alpha表示透明度，当您要绘制在彼此上方部分透明的元素时，alpha特别有用，有时统称为图像的“alpha通道”。

重要的是要认识到像素不是字面上的透明，也无法实现透明图保存，是通过混合颜色实现的。如果想保存为透明图，那么需要使用PGraphics(具体使用方法：https://processing.org/reference/PGraphics.html)。在场景背后，处理过程接受颜色数字，并将一个数字的百分比与另一个数字的百分比相加，从而创建混合的光学感知。

（如果您对编程“玫瑰色”感兴趣，可以从这里开始。）

Alpha值的范围也从0到255，0是完全透明的（即0%不透明）和255是完全不透明的（即100%不透明）。

 

我们看一下以下透明颜色案例

 

 

 

size(200,200);
background(0);
noStroke();

// 如果没有写第四个透明度参数，默认完全不透明
fill(0,0,255);
rect(0,0,100,200);

// 第四个参数为255，表示完全不透明
fill(255,0,0,255);
rect(0,0,200,40);

// 第四个参数为191，75%透明度，我们也可以使用乘法（255 *0.75）
fill(255,0,0,191);
rect(0,50,200,40);

// 第四个参数为半透明127
fill(255,0,0,127);
rect(0,100,200,40);

// 第四个参数为很透明63
fill(255,0,0,63);
rect(0,150,200,40);

 

 

自定义颜色范围

 

RGB颜色的范围为0到255，这不是processing颜色设置的唯一方法。在计算机内存的幕后，颜色总是被称为24位的一系列（如果是带alpha的颜色，则为32位）。然而，processing可以让我们随心所欲地考虑颜色，并将我们的值转换成计算机能理解的数字。例如，您可能更喜欢将颜色视为介于0到100之间（如百分比）。可以通过指定自定义colorMode（）来完成此操作。

 

colorMode(RGB,100);

上面的函数说：“好的，我们想用红色、绿色和蓝色来考虑颜色。RGB值的范围为0到100。”

 

尽管这样做并不方便，但也可以为每个颜色组件设置不同的范围：

colorMode(RGB,100,500,10,255);

现在我们说的是“红色值从0到100，绿色值从0到500，蓝色值从0到10，alpha值从0到255。”

 

最后，虽然您可能只需要RGB颜色来满足所有编程需要，但您也可以在HSB（色调、饱和度和亮度）模式下指定颜色。在不涉及太多细节的情况下，HSB颜色的工作原理如下：

 

 

• Hue—颜色的类型，默认为0到255。
• Saturation—颜色的纯度，默认为0到255。
• Brightness—颜色的亮度，默认为0到255。

 

使用colorMode（）可以为这些值设置自己的范围。有些人更喜欢0-360的色调范围（想想色轮上的360度），0-100的饱和度和亮度范围（想想0-100%）。

 

//建议使用HSB颜色模式
colorMode(HSB,360,100,100)；

 

由于颜色是360，所以红，绿，蓝参数很好计算

红色 = 360 * 0/3 = 0

绿色 = 360 * 1/3 = 120

蓝色 = 360 * 2/3 = 240

红色 = 360 * 3/3 = 360      0和360都是红色

 

红色+绿色 = 黄色 = 120 /2 = 60

绿色+蓝色 = 青色 = 120 + 60 = 180

蓝色+红色 = 紫色 = 240 + 60 = 300

 

比RGB来说，我们更容易计算出我们所需的颜色。