三、p5.js 中的颜色
现在我们可以在 p5.js 中绘制形状，让我们看看如何在草图中控制颜色。通过将值220, 220, 220传递给background函数，我们已经给背景分配了浅灰色。
p5.js 中的颜色函数
p5.js 默认使用 RGB 颜色系统，其中 R 代表红色，G 代表绿色，B 代表蓝色。这意味着我们通常需要将这三个颜色分量传递给一个颜色接受函数来设置所需的颜色。这些颜色分量中的每一个都可以具有 0 到 255 之间的值。这意味着如果我们要将0, 0, 0传递给background函数，我们将得到黑色背景，如果我们要传递255, 255, 255，我们将得到白色背景。p5.js 是一个有用的库，当我们希望这三个值相等时，它允许我们传递一个值。这意味着不是通过0, 0, 0；我们也可以只传递一个 0。
每当我们有等量的这三种颜色成分时，最终的颜色将是白色、黑色或灰色。因此，如果我们想要一个灰度颜色，向颜色设置函数传递一个值是很有用的。但是如果我们想要颜色中的色调，那么我们需要传递所有这三个值，以便能够指定我们想要的每个分量的数量。数字 255 是颜色分量可以接受的最大值；因此，如果我们将255, 0, 0作为一种颜色传递给background函数，我们将得到一种纯红色。如果我们通过0, 255, 0，那么我们将得到纯绿色，等等。
RGB 颜色模型是一种加色模型，这意味着将这些颜色以最大强度相加将产生白色，而减色法是将所有颜色相加将产生深褐色。如果您不太熟悉使用加色 RGB 颜色，通过修改这些值来找到您想要的确切颜色可能会有点困难。如果是这种情况，你可以使用在线颜色挑选服务来帮助你找到想要的颜色。在线搜索“拾色器”一词会得到大量结果，您可以使用这些结果来识别所需颜色的 RGB 成分。这里有一个来自 Firefox 的示例服务(图 3-1 )。
图 3-1
Firefox color picker tool
使用这样的服务，您可以记下与您选择的颜色相对应的 RGB 值，并在 p5.js 中使用这些值。
我们实际上可以将第四个参数传递给一个颜色设置函数。第四个参数称为颜色的 alpha 分量，控制颜色的不透明度，同样接受 0 到 255 之间的值。0 表示完全透明，255 表示完全不透明。
因此，我们可以将单个值、三个值或四个值传递给颜色设置函数。我不想给你太多的信息，但是我们也只能传递两个参数。如果我们要这样做，我们将设置一个灰度颜色和一个灰度颜色的 alpha 组件。
如果这种丰富的选择看起来势不可挡，请记住它们是为了我们的方便。p5.js 可以将颜色函数限制为仅处理四个输入，这将覆盖所有情况，但当我们只需要像不透明白色这样的东西时，提供额外的数据将非常耗时，这种情况经常发生。看起来 p5.js 的开发人员足够聪明地构建了他们的函数，因此它们会基于不同数量的参数产生不同的输出。
更改形状颜色
知道 p5.js 中的颜色是如何工作的很好，但是我们目前只能改变背景的颜色。为了能够改变形状的颜色，我们将不得不使用更多的函数。
我们应该知道的第一个函数是fill。fill允许我们设置形状的填充颜色。填充颜色是填充形状内部的颜色，如果您想知道形状还有什么其他颜色控制，还有定义形状轮廓颜色的描边颜色。填充和描边的默认颜色分别是白色和黑色。除线条之外的所有形状都有填充和描边颜色。
如前所述，我们可以通过调用fill函数并将颜色参数传递给该函数来设置形状的填充颜色。fill功能会将当前颜色设置为选择的颜色，直到我们使用另一个fill功能将颜色设置为其他颜色。
stroke功能以类似的方式工作。我们给它传递颜色参数，它为所有形状设置笔画的颜色，直到下一个笔画函数。在前一个函数之后出现的fill或stroke函数会覆盖前一个函数的设置。
此时，需要知道的另一个有用的函数是strokeWeight，它允许我们设置轮廓的粗细。
清单 3-1 是一个小草图，它利用了我们在本章中学到的一些函数。在图 3-2 中可以看到 3-1 的列表结果。
图 3-2
Output showing the use of fill, stroke, and strokeWeight functions
function setup() {
createCanvas(800, 400);
}
function draw() {
background(220);
// circle 01
fill(51, 51, 51);
strokeWeight(2);
stroke(75);
ellipse(400, 200, 300, 300);
// circle 02
stroke(0);
fill(255, 53, 139);
ellipse(400, 200, 275, 275);
// circle 03
fill(1, 176, 240);
ellipse(400, 200, 250, 250);
// circle 04
fill(174, 238, 0);
ellipse(400, 200, 150, 150);
}
Listing 3-1Using fill, stroke, and strokeWeight functions
注意我们是如何在我想要设置颜色的形状前使用fill函数的。我们一直用它来切换不同椭圆的颜色。
另外两个值得一提的函数是noFill和noStroke函数。顾名思义，当被调用时，这些函数将分别去除形状的填充和描边。调用这些函数时没有任何参数。
noFill();
noStroke();
摘要
在这一章中，我们没有看到任何新的 JavaScript 功能或新的编程结构。我们刚刚看了 p5.js 库的一些操作原理和它附带的一些特定函数。特别是，我们了解了一些颜色设置函数在 p5.js 中是如何工作的，比如fill、stroke和strokeWeight。我们还学习了与填充和描边操作相关的其他功能，如noStroke和noFill。我们学到的另一件事是 RGB 颜色模型。
尽管这一章并没有真正提升我们的 JavaScript 编程知识，但我认为有一点非常有价值。你可能会对自己说，你对创造性编码不感兴趣，在学过编码之后，不需要这本书的 p5.js 具体信息。但是，这些操作原则(如使用加法 RGB 值)或概念(如填充和描边)是如此常用，以至于即使我们所学的内容可能看起来非常特定于 p5.js，它们也是许多其他绘图库或程序使用的一般原则或概念。理解它们将在我们学习如何编程的旅程中很好地为我们服务。
实践
构建清单 3-1 中的脚本，其中一个变量将控制所有圆的大小(意味着改变该变量将改变所有圆的大小)，另一个变量将控制所有圆的半径差(结果如图 3-3 和图 3-4 )。
图 3-4
Practice Image - 2
图 3-3
Practice image
版权属于：月萌API www.moonapi.com，转载请注明出处
