p5.js数组对应图形颜色混乱：如何保持数据独立？

我有三个数组key_1、key_2、key_3，每个数组的元素包含x、y坐标值。运行代码后，期望得到9个分属三种不同颜色的圆形，但实际出现了颜色混乱的情况——比如key_1的红色圆里混进了绿色或蓝色，key_2的绿色圆也有颜色不对的情况。

错误代码如下：

let key_1 = [], key_2 = [], key_3 = [];

function setup() {
  createCanvas(790, 800);

  for (let i = 0; i < 5; i++) {
    let x = random(0, width);
    let y = random(0, height);
    key_1.push([i, x, y]);
  };

  for (let i = 0; i < 3; i++) {
    let x = random(0, width);
    let y = random(0, height);
    key_2.push([i, x, y]);
  };

  for (let i = 0; i < 3; i++) {
    let x = random(0, width);
    let y = random(0, height);
    key_3.push([i, x, y]);
  };
};

function draw() {
  background(0);

  for (let i = 0; i < 5; i++) {
    //期望5个红色圆形，实际第一个颜色不对
    ellipse(key_1[i][1], key_1[i][2], 5, 5);
    fill('rgba(100,0,0,1)'); noStroke()
  };

  for (let i = 0; i < 3; i++) {
    //期望3个绿色圆形，实际第一个颜色不对
    ellipse(key_2[i][1], key_2[i][2], 10, 10);
    fill('rgba(0,100,0,1)'); noStroke();
  };

  for (let i = 0; i < 3; i++) {
    //期望3个蓝色圆形，实际第一个颜色不对
    ellipse(key_3[i][1], key_3[i][2], 30, 30);
    fill('rgba(0,0,100,1)'); noStroke();
  };
};

问题原因 #

P5.js的绘图规则是先设置样式，再执行绘图动作。你现在的代码是先画椭圆，再设置填充色，导致：

• 第一个椭圆使用的是上一次残留的样式（初始默认是白色，或者前一个循环最后设置的颜色）
• 从第二个椭圆开始才会应用当前设置的填充色
  这就造成了每个数组的第一个图形颜色混乱，和预期不符。

修复方案 #

把fill()、noStroke()这类样式设置代码放在ellipse()绘图命令的前面。另外，样式设置不需要在循环里重复执行，放在循环外更高效。

修复后的代码 #

let key_1 = [], key_2 = [], key_3 = [];

function setup() {
  createCanvas(790, 800);

  for (let i = 0; i < 5; i++) {
    let x = random(0, width);
    let y = random(0, height);
    key_1.push([i, x, y]);
  };

  for (let i = 0; i < 3; i++) {
    let x = random(0, width);
    let y = random(0, height);
    key_2.push([i, x, y]);
  };

  for (let i = 0; i < 3; i++) {
    let x = random(0, width);
    let y = random(0, height);
    key_3.push([i, x, y]);
  };
};

function draw() {
  background(0);

  // 绘制红色圆形：先设置样式，再循环绘图
  fill('rgba(100,0,0,1)'); 
  noStroke();
  for (let i = 0; i < 5; i++) {
    ellipse(key_1[i][1], key_1[i][2], 5, 5);
  };

  // 绘制绿色圆形
  fill('rgba(0,100,0,1)'); 
  noStroke();
  for (let i = 0; i < 3; i++) {
    ellipse(key_2[i][1], key_2[i][2], 10, 10);
  };

  // 绘制蓝色圆形
  fill('rgba(0,0,100,1)'); 
  noStroke();
  for (let i = 0; i < 3; i++) {
    ellipse(key_3[i][1], key_3[i][2], 30, 30);
  };
};

内容的提问来源于stack exchange，提问作者Felix Gorczany