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，我们会从那里开始。祝你好运。

p5.js中的褪色拖尾行程

1 个答案:

p5.j​​s中的褪色拖尾行程

1 个答案:

p5.js中的褪色拖尾行程