javascript - p5.j​​s 中的淡化尾随笔画

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 节？重复该过程，直到您注意到一种模式。

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