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

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

本文关键字：分配 数组 颜色 对象 p5 Javascript js      更新时间：2023-09-26

我试图将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:修改语法。代码末尾缺少右花括号。希望这只是复制粘贴错误。但是要小心这些，因为它们会让你更难回答!

步骤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()函数不存在。在继续编码下一件事之前，先去掉它们来测试你的颜色是否有效。

相关文章：