JavaScript教程：使用P5.js创建带纹理的纸张背景

上周，我介绍了生成艺术的概念P5.js，以及有关P5.js的一些设置问题。我给您留下了一个脚手架的存储库，该存储库使所有项目设置麻烦事都消除了，但是我们还没有研究任何东西。本周，我们将开始实际制作一些艺术品。

我们将通过介绍一些基本的API概念开始简单的工作，并在为水彩效果创建“纸”时建立适当数量的随机性。正确使用纸张水彩对于任何水彩都很重要。它还将帮助我们进入在数字空间中模拟现实世界的思维方式。这篇文章其余部分的目的是为水彩背景创造真实的纸张效果。我希望我们的纸张为米白色，奶油色或米色，并且应该有一点质感。

请注意，我称背景为“纸”（我要模仿的东西），而不是“画布元素”（实现术语）。用现实世界而不是数字空间来思考是使我脱离实现细节并帮助指导我的直觉的一个小脑力把戏。

在P5.js中创建彩色背景

我们的脚手架中已经包含了一些P5代码，因此我们可以使用现有的设置功能开始使用。

p5.setup = () => {    p5.createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);    p5.colorMode(p5.HSB, 100);    p5.frameRate(5);    p5.background(10);    p5.textSize(46);    p5.fill(90);    p5.text('Hello (Info)World!', 120, 280);};

因为我们不需要编写文本，所以不需要p5.setup函数主体的最后三行，因此让我们删除这些行并逐步执行其余代码。

首先，我们创建一个具有一定宽度和高度的画布，该画布由前面在文件中定义的常量指定。此代码实际上创建了canvas元素并将其添加到DOM中。接下来，我们将P5的颜色模式设置为HSB，范围为0到100。

作为开发人员，您可能对十六进制颜色代码（＃FF2304）更加熟悉，但是十六进制代码很难推理。例如，如何使十六进制代码更轻一点？ HSB代表色相，饱和度和亮度，它为您提供了一种更直观的颜色处理机制。

色相会更改颜色，而饱和度会更改颜色的显示深度（请考虑柔和的黄色与荧光笔的黄色）。亮度与颜色发出的光量有关。这有点像将您的颜色（例如，荧光笔黄色）放在充满光线的房间里的调光器上。您看到的荧光笔的颜色是黄色的，而灯光却一直调到最高还是半暗？如果关闭灯，每种颜色都会变成黑色。

我为我们的帆布，，纸选择了一种芥末黄色调，这种色在非常低的饱和度下可以为我提供所需的乳白色。

我们可以使用现有的p5.background方法，该方法p5.background灰度背景使用一个参数，但对于P5处于的色彩模式，也可以使用三个参数。

p5.background(15, 10, 100);

在P5.js中向纹理背景添加纹理

我们的浅芥末色背景很好，但我希望它有点像自制纸，您可以在其中实际看到纤维在各个方向上的运动。例如：

为了模拟纸纤维，让我们在整个位置随机散布短线，每条短线都指向随机方向。线条的颜色和长度应有所不同，因此我们也要在其中添加随机性成分。我们将使用JavaScript提供的Math.random()函数。

Math.random()生成一个介于0和1之间的随机伪数。如果我们想要一个介于10和15之间的随机值，我们可以将Math.random()的输出乘以两个数字之间的差5这将为我们提供一个介于0到5之间的随机数。然后，我们只需将10加到10到15之间的一个随机数即可。

10 + Math.random() * 5; // Gives you a random number between 10 and 15

创建指向不同方向的线段需要一定的三角函数，因此，为了隔离随机性方程，让我们首先绘制一堆随机点。我们希望将这些点的X和Y位置随机化，分别在0和画布的宽度和高度之间。该代码如下所示：

    const NUM_DOTS = 400;    for(let i = 0; i < NUM_DOTS; i++) {      let x = Math.random() * CANVAS_WIDTH;      let y = Math.random() * CANVAS_HEIGHT;      p5.ellipse(x, y, 10, 10);    }

您可以增加NUM_DOTS常数以增加圆的密度。

然后，您可以通过创建另一个随机数（例如5到15），并将其插入P5.ellipse()函数的第三个和第四个参数，而不是上面的示例中的硬编码值，来将一些变化引入圆的大小。结果：

在P5.js中创建论文背景

让我们回到纸纤维。我将为您省去三角学课，但足以说明一般过程是这样的：

计算线段起点的随机x和y坐标。
计算直线将在0到2 pi之间的随机角度。
计算线段的随机长度。
给定起点，长度和角度，请进行数学运算以得出终点。

该代码如下所示：

    let x1 = Math.random() * CANVAS_WIDTH;    let y1 = Math.random() * CANVAS_HEIGHT;    let theta = Math.random() * 2 * Math.PI;    let segmentLength = Math.random() * 5 + 2;    let x2 = Math.cos(theta) * segmentLength + x1;    let y2 = Math.sin(theta) * segmentLength + y1;

然后，我们使用p5.line()函数，传入四个坐标。

    p5.line(x1, y1, x2, y2);

这是绘制30,000条细线所得到的示例：

那就是我们想要的，但是线条太过分了，因为它们是纯黑色。为了更改线条的颜色，我们可以在调用p5.stroke()方法之前以新的颜色调用p5.line()方法。

为了获得美纹纸效果，我们需要在之前选择的基础颜色周围加入一些颜色变化。我希望色相大致相同，所以我只玩饱和度和亮度。我在p5.stroke()方法中添加了一个可选的第四个参数，该参数也增加了不透明度。

    p5.stroke(      BASE_H,      BASE_S - Math.random() * 5,      BASE_B - Math.random() * 8,      Math.random() * 10 + 75    );

Etvoilà ：

我们有纸！下周之前，您可以随意使用此代码，当我们不得不尝试更多的数学方法来尝试从纸上移到墨水上时。有任何问题，评论或很酷的变化吗？请在评论中或在Twitter上分享它们： @freethejazz 。

From: https://www.infoworld.com/article/3332676/javascript-tutorial-create-a-textured-paper-background-with-p5js.html