Learn JavaScript with p5.js中文版第三章 p5.js中的颜色

总目录

第一章导学：对写代码和编程进行概述
第二章准备工作：学习JavaScript命令和操作的基础来开启p5.js的学习之旅
第三章 p5.js中的颜色：这一章是针对p5.js的，将学习如何在p5.js中定义颜色，并不适用于常规的JavaScript
第四章操作符和变量：在p5.js 中使用第二章所学的JavaScript知识
第五章条件语句和比较运算符：使用条件语句和比较运算符来编写不同条件下的分支程序
第六章 p5.js中的更多变量：本章也是针对p5.js的，将学习针对某些特定库的变量
第七章循环：学习编写可处理大量运算的循环程序
第八章函数：函数是JavaScript的基石，我们更深入的学习函数来创建可扩展、模块化的健壮程序
第九章对象，第十章数组：对象和数组是JavaScript的数据结构，通过它们可以更智能的方式组织代码及处理复杂问题
第十一章事件：事件处理让我们可以编写处理用户交互的程序
第十二章 p5.js扩展知识：这也是仅针对p5.js的一章，在进入最终的项目前更深入的学习函数库相关功能
第十三章最终项目：使用全书所学知识创建一款游戏

既然已经可以使用p5.js绘制各种图形了，就让我们来学习如何进行颜色的控制吧。我们已经在background函数中传入220, 220, 220来设置背景钯为浅灰色了。

p5.js中的颜色函数

默认情况下p5.js使用RGB色彩模式，其中R代表红色，G代表绿色，B代表蓝色。这表示我们需要向颜色函数中传入三个参数来设置指定颜色。每种色彩的值在0到255之间。也就是说如果我们向background函数中传入0, 0, 0，获取的背景将为黑色，而如果传入255, 255, 255，则为白色。p5.js这个库在我们只传入一个值时，会将三处色彩设为相同值。所以传入0, 0, 0和单个0是等价的。

只要三种色彩的值相同，获得的结果一定是白色、黑色或某种灰色。所以在设置颜色的函数中传入单一值有助于我们获取灰度颜色。但如果要在颜色中包含色调，就需要传入三个值来指定每种色彩的量。255是一种色彩可接受的最大值，如果传入255, 0, 0来作为background函数的参数，会得到纯红色，如果传入pass 0, 255, 0，就会得到纯绿色，以此类推。

RGB色彩模式是一种加法混合模式，这表示把这些色彩以最高的强度混合在一起会产生白色，与减法混合模式的涂料颜色形成对比，它们混合在一起会产生暗棕色。如果我们没熟悉RGB加法混合模式，通过修改这些值很难获取具体的颜色。这时我们可以使用在线颜色拾取器来帮助我们找到想要的颜色。在网上搜索“颜色拾取器”可以获取到一堆结果用于得到具体颜色的 RGB 组成。以下是来自火狐的一个服务示例（图3-1）。

颜色拾取工具

图3-1. Firefox颜色拾取工具

译者注：Alan 早年间曾使用过一个工具可以拾取颜色来获取对应的英文名称，感兴趣的读者可以试一下：英文颜色名称查询器

使用这类服务，我们可以记录下所选颜色的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-1

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(522, 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);
}

图3-2. 使用fill, stroke和strokeWeight函数来进行输出

注意我们是如何在形状前使用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-3. 练习图像

图3-4. 练习图像 - 2

译者补充：

function setup() {
    createCanvas(800, 400);
}

function draw() {
    var radius = 300;
    var difference = 40; // 图3-3
    // var difference = 80; // 图3-4
    background(220);

    // circle 01
    fill(51, 51, 51);
    strokeWeight(2);
    stroke(75);
    ellipse(400, 200, radius, radius);

    // circle 02
    radius = radius - difference;
    stroke(0);
    fill(522, 53, 139);
    ellipse(400, 200, radius, radius);

    // circle 03
    radius = radius - difference;
    fill(1, 176, 240);
    ellipse(400, 200, radius, radius);

    // circle 04
    radius = radius - difference;
    fill(174, 238, 0);
    ellipse(400, 200, radius, radius);
}

本文首发地址：Alan Hou的个人博客