如何遍历颜色集并应用于 p5.js 中的 "fill"？

Question

对于 this 草图，我想让星星的颜色略有不同，以模拟真实的星星不仅仅是纯白光。我尝试了几种不同的方法来做到这一点，但都没有成功。你会如何完成这个？

希望修改第一个 fill(255) 以从一组不同的颜色中绘制每颗星星。我尝试使用大约 4 种颜色的数组并访问索引。我尝试使用 random() 选择与 255 相差几个数字的 rgb 值。我在这方面相当陌生，所以请原谅我缺乏适当的术语。我想我可能只是没有将循环遍历数组的正确位置。

完整代码为 here。提前致谢！

function starsMoon() { //create star cluster and moon
  randomSeed(300);
  translate(-width * 2, -height * 2);
  noStroke();
  fill(255);
  for (let i = 0; i < 300; i++) { // stars
      // this is where I initially put the fill(colorSet[i])
      ellipse(random(0,width * 4) + i, random(0,height * 4) + i, 2, 2);
  }
  fill(255);
  ellipse(width * 1.25, height * 2, 100, 100); // moon
}

Answer 1

是的，其中任何一个都可以！

随机偏移：

function starsMoon() { //create star cluster and moon
  randomSeed(300);
  translate(-width * 2, -height * 2);
  noStroke();
  for (let i = 0; i < 300; i++) { // stars
      fill(250 + ((random() - 0.5) * 2 * 5)) // random fill between 245 - 255
      ellipse(random(0,width * 4) + i, random(0,height * 4) + i, 2, 2);
  }
  fill(255);
  ellipse(width * 1.25, height * 2, 100, 100); // moon
}

要轮换列表中的颜色，您只需使用索引 mod 颜色数量：

function starsMoon() { //create star cluster and moon
  randomSeed(300);
  translate(-width * 2, -height * 2);
  noStroke();
  let colors = [
      color(210, 180, 170), 
      color(40, 100, 29), 
      color(100, 100, 110), 
      color(102, 210, 12)
  ]
  for (let i = 0; i < 300; i++) { // stars
      fill(colors[i % colors.length])  // loop through colors
      ellipse(random(0,width * 4) + i, random(0,height * 4) + i, 2, 2);
  }
  fill(255);
  ellipse(width * 1.25, height * 2, 100, 100); // moon
}

很酷的项目顺便说一句！

如何遍历颜色集并应用于 p5.js 中的 "fill"？

How to loop through color set and apply to "fill" in p5.js?

javascript

p5.js