p5.js: сделать градиентный ход с помощью beginShape()

Следующий код генерирует одну частицу в случайной позиции. Частица движется вправо, как только она полностью исчезает с экрана, она снова появляется влево.

Частица создает хороший след. Тем не менее, я бы хотел, чтобы след исчез.
Я пытался установить цвет обводки 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 ответ

Решение

Вам повезет больше, если вы разместите 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() Функция для создания вашего градиента.

Источник
Другие вопросы по тегам