Блог

Главная - Вопросы по программированию - p5.js раскрашивание каждого прямоугольника с использованием массива

p5.js раскрашивание каждого прямоугольника с использованием массива

#javascript #processing #p5.js

#javascript #обработка #p5.js

Вопрос:

У меня здесь простая сетка из прямоугольников размером 2×3. Я хотел бы заполнить каждый прямоугольник отдельно определенными цветами. Я довольно новичок, и я думаю, что для этого требуется массив. Это должно выглядеть примерно как это изображение.

 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>

Ответ №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>