p5.js：使用 beginShape() 进行渐变描边

Question

以下代码在随机位置生成单个粒子。粒子向右移动，一旦完全离开屏幕，就会再次向左移动。

粒子创建了一条漂亮的轨迹。但是，我希望踪迹淡出。
我尝试在设置顶点时设置描边颜色 stroke(random(255))，但它改变了整个形状的颜色。

您将在评论中找到相关行
// draw particle and history（大约第 76 行）

https://codepen.io/normanwink/project/editor/XJoRYa

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="framerate"></div>
        <!-- scripts -->
        <script src="https://github.com/processing/p5.js/releases/download/0.5.14/p5.min.js"></script>
        <script>
            function setup() {
                frameRate(30);
                createCanvas(1000, 500, 'WEBGL');

                particle = new Particle();
            }

            function draw() {
                background(0);

                particle.update();
                particle.edges();
                particle.show();

                var output = '';
                output += floor(frameRate()) + 'fps';

                document.getElementById('framerate').innerHTML = output;
            }

            function Particle(mX = random(width), mY = random(height)) {
                this.pos = createVector(mX,mY);
                this.vel = createVector(8,0);
                this.acc = createVector(0,0);
                this.maxSpeed = 8;
                this.trail = 60; // how long to track history
                this.history = [];

                this.update = function() {
                    this.vel.add(this.acc);
                    this.vel.limit(this.maxSpeed);
                    this.pos.add(this.vel);
                    this.acc.mult(0);

                    this.history.push(this.pos.copy());

                    if (this.history.length > this.trail) {
                        this.history.splice(0,1);
                    }
                }

                this.show = function() {
                    stroke(255);
                    strokeWeight(5);

                    // draw particle and history
                    beginShape();
                    for (var i=0; i<this.history.length; i++) {
                        var pos = this.history[i];
                        // stroke(random(255))
                        curveVertex(pos.x, pos.y);
                    }
                    endShape();

                    noStroke();
                    fill(255);
                    ellipse(this.pos.x, this.pos.y, 10);

                }

                // if particle hits the edge
                this.edges = function() {
                    if (this.history[0].x > width && this.pos.x > width) {
                        this.pos.x = 0;
                        this.history = [];
                        return false;
                    }
                    if (this.history[0].x < 0 && this.pos.x < 0) {
                        this.pos.x = width;
                        this.history = [];
                        return false;
                    }
                    if (this.history[0].y > height && this.pos.y > height) {
                        this.pos.y = 0;
                        this.history = [];
                        return false;
                    }
                    if (this.history[0].y < 0 && this.pos.y < 0) {
                        this.pos.y = height;
                        this.history = [];
                        return false;
                    }
                }
            }
        </script>
    </body>
</html>

不幸的是，它需要较小的物理和处理粒子与边缘的碰撞才能工作，因此这是代码的最简化版本。
对于那些有兴趣的人，这里有一个完整的例子：https://codepen.io/normanwink/pen/jLdpez

Answer 1

如果您 post MCVE 展示您尝试过的内容以及特定的技术问题，您的运气会更好。这是一个例子：

function setup(){
  createCanvas(200, 200);
}
  
function draw(){
  background(220);

  noFill();
  stroke(255);
  beginShape();
  curveVertex(84,  91);
  curveVertex(84,  91);
  curveVertex(68,  19);

  stroke(128);
  curveVertex(21,  17);

  stroke(0);
  curveVertex(32, 100);
  curveVertex(32, 100);
  endShape();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>

我们可能希望这会在路径上显示非常基本的渐变。（注意这比整个项目更容易考虑！）但是如果我们运行它，那么我们会看到它只采用最后一种颜色，在本例中为黑色。

为了解决这个问题，我们需要将您的路径分解成多个形状。这是相同的路径，分成多个形状，所以我们可以给路径的每个部分一个不同的形状：

function setup() { 
  createCanvas(200, 200);
} 

function draw() { 
  background(220);
 
  noFill();
 
 
  stroke(0);
  beginShape();
  curveVertex(84,  91);
  curveVertex(84,  91);
  curveVertex(68,  19);
  curveVertex(21,  17);
  endShape();
 
  stroke(128);
  beginShape();
  curveVertex(84,  91);
  curveVertex(68,  19);
  curveVertex(21,  17);
  curveVertex(32, 100);
  endShape();
 
  stroke(255);
  beginShape();
  curveVertex(68,  19);
  curveVertex(21,  17);
  curveVertex(32, 100);
  curveVertex(32, 100);
  endShape();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>

如果我们运行那，我们会看到路径确实有不同的颜色。

你需要做一些非常相似的事情，将你的路径分解成多个形状。然后你只需要修改传递给 stroke() 函数的颜色来创建你的渐变。

p5.js：使用 beginShape() 进行渐变描边

p5.js: Make a Gradient Stroke with beginShape()

vertex

p5.js

perlin-noise