p5.js中如何为每个纸屑粒子选取独立随机颜色且不动态变化

这问题我做类似效果时也碰到过，核心是要让每个纸屑粒子自己存储专属颜色，而不是全局共用一个颜色或者每帧重新生成颜色。最靠谱的方式是用面向对象封装每个粒子的属性和行为，具体做法如下：

核心思路 #

给每个纸屑粒子创建独立对象，在对象初始化（创建粒子）时，就从颜色数组里随机选好颜色并存在对象中，之后这个粒子的颜色就固定不变，不会随帧更新而变化。

完整代码示例 #

// 定义颜色数组
var colors = ['red', 'green', 'blue', 'orange', 'yellow', 'purple', 'pink'];
// 存储所有纸屑粒子的数组
let confettiParticles = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  // 初始化一批纸屑粒子
  for (let i = 0; i < 50; i++) {
    confettiParticles.push(new Confetti());
  }
}

function draw() {
  background(255, 20); // 半透明背景实现拖尾效果
  // 遍历所有粒子，更新并显示
  for (let particle of confettiParticles) {
    particle.update();
    particle.display();
    // 可选：粒子超出屏幕后重新生成，保持数量
    if (particle.isOffScreen()) {
      confettiParticles[confettiParticles.indexOf(particle)] = new Confetti();
    }
  }
}

// 纸屑粒子类
class Confetti {
  constructor() {
    // 初始化位置
    this.x = random(width);
    this.y = random(-height, 0); // 从屏幕上方生成
    // 初始化运动参数
    this.vx = random(-2, 2);
    this.vy = random(3, 8);
    this.size = random(5, 15);
    // 关键：在创建粒子时就随机选取颜色并存储
    this.color = random(colors);
  }

  update() {
    // 更新位置
    this.x += this.vx;
    this.y += this.vy;
    // 可选：添加一点旋转效果
    this.rotation = random(-0.1, 0.1);
  }

  display() {
    push();
    translate(this.x, this.y);
    rotate(this.rotation);
    fill(this.color);
    noStroke();
    rectMode(CENTER);
    rect(0, 0, this.size, this.size);
    pop();
  }

  isOffScreen() {
    // 判断粒子是否超出屏幕范围
    return this.y > height + this.size || this.x < -this.size || this.x > width + this.size;
  }
}

关键细节解释 #

1. 颜色的时机：在Confetti类的constructor（构造函数）里执行this.color = random(colors)，意味着每个粒子在被创建的那一刻，就从颜色数组里随机选好了自己的颜色，之后这个值会一直存在粒子对象里，不会改变。
2. 为什么之前的方法不行：
   • 如果把颜色变量放在setup()里，整个程序只执行一次setup，所有粒子都会共用这个提前选好的单一颜色；
   • 如果把颜色变量放在draw()里，每帧都会重新生成随机颜色，导致每个粒子每帧都换色，出现闪烁/变色的问题。
3. 对象封装的优势：每个粒子的位置、速度、颜色都是独立属性，后续要调整粒子的其他特性（比如形状、旋转）也非常方便。

内容的提问来源于stack exchange，提问作者Samina