代码之家 › 专栏 › 技术社区 › Norman

p5.js:使用beginShape()绘制渐变笔划

perlin-noise p5.js vertex

Norman · 技术社区 · 7 年前

粒子创建了一条很好的轨迹。然而,我希望轨迹淡出。
我试着设置笔划颜色 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

1 回复 | 直到 7 年前

Kevin Workman 7 年前

如果你发布一个 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();
}

<脚本src=”https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js“>lt;/script>

你需要做一些非常类似的事情,把你的路径分解成多个形状。然后只需要修改传递到 stroke() 函数创建渐变。