将数组中的颜色分配给 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 的特定颜色。

第四步：现在你只需要使用col设置颜色即可。

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

请注意，您可以将它移动到 display() 函数中，但这更多的是个人喜好。

第 5 步： 修复后，您仍然会遇到错误，因为 edges() 和 move() 函数不存在。在尝试继续编码下一件事之前，摆脱它们以测试您的颜色是否有效。

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

Assigning colors in array to objects in p5.js/ Javascript

javascript

processing

p5.js