p5.js: Uncaught Error: [object Arguments]is not a valid color representation

Question

我正在使用二维数组创建书架，并希望为每本书分配随机颜色。我的代码有效，每次刷新时随机选择 14 种十六进制颜色，并应用于 14 本书中的每一本书。 但是我想改进我的代码，所以这个错误没有出现：

p5.min.js:7 Uncaught Error: [object Arguments]is not a valid color representation.
at d.Color._parseInputs (p5.min.js:7)
at new d.Color (p5.min.js:6)
at e.d.color (p5.min.js:6)
at d.Renderer2D.fill (p5.min.js:8)
at e.d.fill (p5.min.js:7)
at draw (sketch.js:38)
at e.redraw (p5.min.js:8)
at e.<anonymous> (p5.min.js:7)

const colors = [];
var randomColor;
var colorCounter;
var bookCounter;

function setup() {
  createCanvas(800, 600);
  background(200);

  colorCounter = 0;
  bookCounter = 1;

  for (var i = 0; i < 14; i++) {
    const randomColor = Math.floor(Math.random() * 16777215).toString(16);
    colors.push("#" + randomColor);
  };

  console.log(colors);
}

function draw() {
  stroke(0, 0, 200);
  strokeWeight(5);
  noFill()
  rect(45, 45, 360, 200);
  rect(45, 250, 360, 205);

  for (var k = 0; k < 14; k++) {
    noStroke();
    fill(colors[k]);
    rect(50 + k * 20, 550, 20, 20);
  }

  for (var i = 0; i < 2; i++) {
    for (var j = 0; j < 7; j++) {
      stroke(150, 0, 0);
      console.log("Before: " + colorCounter);
      fill(colors[colorCounter]);
      colorCounter += 1;
      console.log("After: " + colorCounter);
      rect(50 + j * 50, 50 + i * 200, 50, 200);
    }
  }

  for (var i = 0; i < 2; i++) {
    for (var j = 0; j < 7; j++) {
      noStroke();
      textSize(20);
      fill(255);
      text("B\no\no\nk\n \n" + bookCounter, 70 + j * 50, 80 + i * 200, 100);
      bookCounter += 1;
    }
  }
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>

Answer 1

当您将无效的颜色规范（数字、字符串或 Color 对象）传递给 fill() 函数时，会发生此错误。这包括传递 undefined.

在这种情况下引发的错误是 colorCounter 是一个全局变量的结果，它在 setup() 中仅设置为 0，而且默认情况下 draw()函数被重复调用。您可以从控制台日志输出中看到错误发生在显示“Before: 14”之后。因此 colorCounter 的值是 14，您尝试调用 fill(colors[colorCounter])。由于colors的长度为14，最后一个元素的索引为13，所以colors[colorCounter] returns undefined.

您可以通过以下两种方式之一修复此错误：1) 在 draw() 函数中重置值 colorCounter 和 bookCounter，或 2) 在您的设置函数中调用 noLoop() 以便草图只绘制一次。