p5.j​​s使用数组为每个矩形着色

问题描述

我这里有一个简单的2x3矩形网格。我想用特定的颜色分别填充每个矩形。我还很新，我认为这需要一个数组。它应该看起来 something like this image。

var colours =[];

function setup() {
  createCanvas(1000,700);
}
function draw() {
  background(220);
  
  for (let y = 0; y < 2; y++) {
    for (let x = 0; x < 3; x++) {
      let xpos = x *200;
      let ypos = y *200;
      rect(xpos,ypos,200,200);

    }
  }
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

解决方法

使用color定义颜色数组：

let colors = [color(255,0),color(255,255,color(0,255)];

通过fill设置填充颜色：

fill(colors[x]);

var colours =[];

function setup() {
    createCanvas(1000,700);
}
function draw() {
    background(220);
    
    let colors = [color(255,255)];
    for (let y = 0; y < 2; y++) {
        for (let x = 0; x < 3; x++) {
            let xpos = x *200;
            let ypos = y *200;
            fill(colors[x]);
            rect(xpos,ypos,200,200);
        }
    }
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>