javascript - 如何从数组中选取一个随机值，而不需要在 p5/javascript 中不断更改该值？

Question

我正在使用 p5.js 创建彩色“五彩纸屑”，并从数组中选择随机颜色。

var color = ['红色', '绿色', '蓝色', '橙色', '黄色', '紫色', '粉色'];

我希望随机函数只选择一个，而不是一遍又一遍地循环数组以使颜色发生变化。如果我将 confettiColor 变量放入设置中，它会使所有粒子都相同。换句话说，如何从数组中为每个粒子选择一种随机颜色而不循环遍历所有粒子？

else if (changeConfetti.checked) {
  //var confettiSize = random(1,8);

  confettiColor = colors[Math.floor(Math.random() * colors.length)];
  stroke(confettiColor);
  strokeWeight(3);
  line(this.x,this.y,this.x+5,this.y-10);
}

我的完整代码位于 CodePen https://codepen.io/Fragile404/pen/gzbzXv

Answer 1

问题似乎在于每次粒子移动时都会重新选择颜色。违规区域是:

rainDrop.prototype.display = function()
{
    if (changeSeason.checked)
    {
        // ...
    }
    else if (changeConfetti.checked)
    {
        //var confettiSize = random(1,8);

        confettiColor = colors[Math.floor(Math.random() * colors.length)];
        stroke(confettiColor);
        // ...
    }
    // ...
}

请注意，此颜色选择是作为 display 调用的一部分进行的。相反，我认为您希望在创建雨滴时选择一次颜色，然后每次重新显示雨滴时都使用相同的颜色。一种解决方案是将颜色添加为雨滴的属性。例如，更改构造函数:

var rainDrop = function()
{
    this.x = random(canvasWidth+1000);
    this.y = random(-100,-50);
    // Add this:
    this.confettiColor = colors[Math.floor(Math.random() * colors.length)];
};

然后在显示方法中引用该值:

stroke(this.confettiColor)

这是a fork of your codePen修复后。