是否可以更改粒子颜色?

时间:2021-05-01 09:10:19

标签: p5.js

是否可以将粒子颜色更改为任何颜色? 因为我只有一种颜色,我想改变它以使其更适合春天,有没有办法根据您的口味配置颜色,以下是我的功能代码:

function Particle() {
  this.pos = createVector(random(width), random(height));
  this.vel = createVector(0, 0);
  this.acc = createVector(0, 0);
  this.maxspeed = 4;
  this.h = 100;

  this.prevPos = this.pos.copy();

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

  this.follow = function(vectors) {
    var x = floor(this.pos.x / scl);
    var y = floor(this.pos.y / scl);
    var index = x + y * cols;
    var force = vectors[index];
    this.applyForce(force);
  }

  this.applyForce = function(force) {
    this.acc.add(force);
  }

  this.show = function() {
    strokeWeight(6);
    stroke(255, this.h, 10);
    this.h = this.h + 1;
    if (this.h > 255) {
      this.h = 100;
    }
    strokeWeight(8);
    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
    this.updatePrev();
  }

  this.updatePrev = function() {
    this.prevPos.x = this.pos.x;
    this.prevPos.y = this.pos.y;
  }

  this.edges = function() {
    if (this.pos.x > width) {
      this.pos.x = 0;
      this.updatePrev();
    }
    if (this.pos.x < 0) {
      this.pos.x = width;
      this.updatePrev();
    }
    if (this.pos.y > height) {
      this.pos.y = 0;
      this.updatePrev();
    }
    if (this.pos.y < 0) {
      this.pos.y = height;
      this.updatePrev();
    }
  }
}

1 个答案:

答案 0 :(得分:2)

在这种情况下,stroke(255, this.h, 10) 函数中对 show 的调用决定了 Particle 类绘制的线条的颜色。看起来它正在从红色循环到黄色。描边函数是well documented。您当然可以使用它使本示例中绘制的线条成为您想要的任何颜色。您可以在 p5js.org 上了解有关 p5js 中颜色的更多信息。