p5.js 中的淡化尾部笔画

Question

如何使用 p5.Vector 点数组有效地创建 curveVertex，这些点会在鼠标位置后淡化（降低不透明度）轨迹？

到目前为止，以下代码会在一定时间后删除尾随点，创建鼠标后尾随的效果，但不会创建半透明尾随。尾随笔画消失了。

const trail = sk => {

  let points = [];
  let fadeTime = 1000;

  sk.setup = () => {
    sk.createCanvas(300, 600);
    sk.noFill();
  };

  sk.draw = () => {
    sk.clear();
    sk.beginShape();

    for (let i = points.length - 1; i >= 0; i--) {
      let p = points[i];
      let timeAlive = sk.millis() - p.z;

      if (timeAlive > fadeTime) {
        // start removing last point
        points.shift();
      } else {
        sk.strokeWeight(10);
        sk.strokeJoin(sk.ROUND);
        sk.strokeCap(sk.ROUND);
        sk.stroke(255, 255, 255);
        sk.curveVertex(p.x, p.y);
      }
    }
    sk.endShape();
  }

  // Add more points forward when dragging mouse
  sk.touchMoved = () => {
    points.push(sk.createVector(sk.mouseX, sk.mouseY, sk.millis()));
    return false;
  }
};

let mySketch = new p5(trail, elementId);

Answer 1

问题是使用 beginShape() 和顶点函数（包括 curveVertex()）创建的形状只能有单一的描边和填充颜色。因此，您不能为形状的其他部分涂上不同的颜色。

为证明这一点，请尝试更改此行：

sk.stroke(255, 255, 255);

到这一行：

sk.stroke(random(256));

为了解决这个问题，您可以使曲线的每个部分都有自己的形状和颜色。首先将每个部分设为随机颜色。

然后您需要使每个部分的颜色基于当前索引。我建议举几个例子。如果一条曲线有 10 个部分，第 1 部分应该是什么颜色？第 2 节？第 10 节？重复该过程，直到您注意到一种模式。

如果您遇到困难，请 post 在一个新问题中更新 MCVE，我们将从那里开始。祝你好运。

p5.js 中的淡化尾部笔画

Fading trailing stroke in p5.js

javascript

processing

p5.js