p5.js 使用数组为每个矩形着色

Question

我这里有一个简单的 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>

Answer 1

使用color定义颜色数组：

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

设置填充颜色 fill:

fill(colors[x]);

var colours =[];

function setup() {
    createCanvas(1000, 700);
}
function draw() {
    background(220);
    
    let colors = [color(255, 0, 0), color(255, 255, 0), color(0, 0, 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>

p5.js 使用数组为每个矩形着色

p5.js colouring each rectange using array

javascript

processing

p5.js