JavaScript教程：使用P5.js创建水彩边缘-CSDN博客

上周，我们创建了一个带纹理的纸质画布，并使用了P5 API和JavaScript的Math.random()函数。这周，我们将研究水彩的特定元素，看看是否可以在画布上模仿它：边缘颜色。

如果您看一下上面水彩中的各种油漆斑点，您可能会注意到，在许多情况下，颜色的饱和度在边缘处急剧增加。饱和度的急剧增加将成为本周练习的目标。您还会注意到形状非常不规则，这是一个复杂的细节，我现在仅画一个完美的圆就省去了。

[也在InfoWorld上： 6个最佳JavaScript IDE和10个最佳JavaScript编辑器。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

我们从P5代码的基础开始，该代码绘制了纹理纸画布供我们使用：

首先，让我们创建一个函数，以给定位置，半径和色相绘制水彩点。 P5.js为我们提供了绘制上周已经使用的椭圆的功能。通过将其与一些定义填充颜色和笔触的功能配对，我们应该能够绘制一个点。首先，我将定义drawSpot函数以在我们传入的位置和色drawSpot绘制一个圆：

const drawSpot = (p5, x, y, radius, hue) => {
  p5.fill(
    hue,
    100,
    100
  );
  p5.ellipse(x, y, radius, radius);
};

接下来，我们将从draw方法中调用此函数，随意选择在画布中间绘制半径为200且呈蓝色的圆圈：

    drawSpot(p5, CANVAS_WIDTH/2, CANVAS_HEIGHT/2, 200, 70);

这是一个开始，但没有涵盖水彩的任何本质。水彩墨水不太浓密，以致看不到它后面的纸；实际上，在某些地方，墨水会完全消失。如果在对p5.fill()调用中添加第四个参数，则可以指定0到100之间的透明度值，其中0是不可见的，而100是完全不透明的。我将10设定为一个不错的起点：

现在，为了使圆的边缘更暗，我们可以简单地通过指定p5.noFill()并使用p5.stroke()定义笔触颜色来重p5.noFill()边缘，然后再调用p5.ellipse() 。现在，我刚刚决定使用与第一次填充相同的色相，饱和度，亮度和Alpha。结果是，叠加的轮廓将比圆本身稍微更不透明。

const drawSpot = (p5, x, y, radius, hue) => {
  p5.fill(
    hue,
    100,
    100,
    10
  );
  p5.ellipse(x, y, radius, radius);
  p5.noFill();
  p5.stroke(
    hue,
    100,
    100,
    50
  );
  p5.ellipse(x, y, radius, radius);
};

现在我们可以看到一些边缘定义，但是我们仍然缺少边缘处墨不透明性增加的效果。这让我开始思考不透明度如何混合，如果您继续在其自身上绘制10％的不透明线，它将变得越来越不透明。考虑到这一点，我还考虑了开始增加笔划宽度，然后在不透光的情况下缓慢减小笔划宽度的效果。为了给我一个例子一个例子，下图是我们的圆，有三个边缘笔触，一个笔触的宽度为15像素，一个笔触的宽度为5像素，一个笔划的宽度为单个像素。每个笔画都具有相同的不透明度：20。

看到在同一位置以相同的不透明度进行绘制会如何使颜色变暗？现在，而不是选择三个笔划宽度，让我们使用一个简单的for循环尝试以1像素为增量的笔划。在下面的代码中，请注意，我从绘制的椭圆半径中减去了笔划宽度。这是因为笔划是形状的轮廓，并且超出了半径。因为我们希望笔划包含在形状中，所以我们必须从半径中减去笔划宽度。我还将不透明度降低到3，因为我们要添加比以前更多的图层。

const drawSpot = (p5, x, y, radius, hue) => {
  p5.fill(
    hue,
    100,
    100,
    10
  );
  p5.ellipse(x, y, radius, radius);
  p5.noFill();
  for(let i = 6; i > 0; i--) {
    p5.stroke(
      hue,
      100,
      100,
      3
    );
    p5.strokeWeight(i);
    p5.ellipse(x, y, radius - i, radius - i);
  }
};

墨水密度的增加开始朝正确的方向发展。因为我想要更硬的边缘，所以在循环后添加了最后一个1像素笔画，不透明度为20％。现在，我们可以添加一些随机性，并在我们的draw函数中在画布上绘制一堆这样的斑点：

    for (let i = 0; i < 10; i++) {
      let hue = Math.random() * 100;
      let radius = Math.random() * 250 + 50;
      let x = Math.random() * CANVAS_WIDTH;
      let y = Math.random() * CANVAS_HEIGHT;
      drawSpot(p5, x, y, radius, hue);
    }