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

时间:2016-08-28 16:36:24

标签: javascript processing p5.js

我正在尝试将我的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]);
        }

1 个答案:

答案 0 :(得分:0)

第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()功能不存在,您仍会收到错误。摆脱它们以测试你的颜色是否有效,然后再继续编码下一件事。