將數組中的顏色分配給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;的分配this.col = col; 所以現在col是特定SoftOrb的特定顏色。

第4步：現在您只需要使用col來設置顏色。

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

請注意，您可以將其移動到display()函數中，但這比任何事情更具個人偏好。

第5步：修復之后，仍然會出現錯誤，因為edges()和move()函數不存在。 擺脫它們來測試你的顏色是否有效，然后再繼續編碼下一件事。