javascript - 将数组中的颜色分配给 p5.js/Javascript 中的对象

Question

我正在尝试将 c[] 颜色数组中的每种颜色分配给我的六个 Orb 对象中的每一个。我的循环只是将所有颜色分配给所有对象。非常感谢任何帮助。

var orb = [];
var c = ["#C460E0", 
         "#F469A9", 
         "#69F5E7", 
         "#687DF2", 
         "#69F591",             
         "#F1Ea67"];
var col;
var num;

function setup() {
    createCanvas(600, 600);
    for (var i = 0; i < 6; i++)
        orb[i] = new SoftOrb();
}

function draw() {
    background(1);
    for (var i = 0; i < orb.length; i++) {

        orb[i].colour(); // <-----???!
        orb[i].edges();
        orb[i].display();
        orb[i].move();
    }
}

function SoftOrb() {
    this.loc = createVector(random(width), random(height));
    this.vel = createVector(0, 0);

    this.col = col;
    this.display = function() {
        ellipse(this.loc.x, this.loc.y, 100, 100);
    }
    this.colour = function() {
        noStroke();
        for (var j = 0; j < c.length; j++) {
            var index = c.indexOf(j);
            fill(c[j]);
        }

Answer 1

第 1 步:修正语法。您在代码末尾缺少右大括号。希望这只是一个复制粘贴错误。但要小心这些，因为它们会让你更难回答你!

第 2 步:您需要将 c 数组中的颜色传递到 SoftOrb 构造函数中。可能看起来像这样:

function setup() {
  createCanvas(600, 600);
  for (var i = 0; i < 6; i++) {
    orb[i] = new SoftOrb(c[i]);
  }
}

第 3 步:您需要修改 SoftOrb 构造函数以实际接受颜色参数。

function SoftOrb(col) {

您已经完成了 this.col = col; 的分配，因此现在 col 是特定 SoftOrb 的特定颜色。

第4步:现在您只需使用col来设置颜色即可。

  this.colour = function() {
    noStroke();
    fill(col);
  }

请注意，您可以将其移至 display() 函数中，但这更多的是个人偏好。

第 5 步:解决该问题后，您仍然会收到错误，因为 edges() 和 move() 函数不会不存在。在尝试继续编写下一个内容之前，先去掉它们以测试您的颜色是否有效。