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

如果您发布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（）制作渐变笔画

1 个答案:

p5.j​​s：用beginShape（）制作渐变笔画

1 个答案:

p5.js：用beginShape（）制作渐变笔画