Пытаясь разобраться в двухмерных массивах, создав доску 3х3, а затем визуализируя ее, я сталкиваюсь с некоторыми препятствиями.

Question

Пытаясь разобраться в двухмерных массивах, создав доску 3х3, а затем визуализируя ее, я сталкиваюсь с некоторыми препятствиями.

1

То, что я пытаюсь достичь, - создание 2-мерного массива, подобного этому:

var board = [
    [1, 0, 1],
    [0, 0, 0],
    [1, 1, 1]
];

а затем создайте холст размером 300 пикселей, в котором будут 3x3 прямоугольники с шириной и высотой 100 пикселей, каждая из которых будет иметь разные цвета на основе значения элемента массива.

Когда значение равно 1, цвет должен быть красным, а когда значение равно 0, оно должно быть синим.

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

Проблема в том, что я знаю, как получить длину только обычного массива, а не 2d. Другая проблема заключается в том, что я не могу понять, как определить цвет прямоугольника на основе значения элемента массива.

Мой код пока:

 var board = [
    [1, 0, 1],
    [0, 0, 0],
    [1, 1, 1]
];

function setup() {
    createCanvas(300, 300);
}

function draw() {
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            var x = i*100;
            var y = j*100;
            fill(222);
            stroke(0);
            rect(x, y, 100, 100);
        }
    }
}

Bobimaru 14 окт. 2018, в 14:19

Источник

Теги:

javascript

p5.js

2 ответа

1

Вы можете просто использовать вложенный цикл forEach и использовать индексы для получения позиции x и y на основе текущего индекса и размера ячейки.

var data = [
  [1, 0, 1],
  [0, 0, 0],
  [1, 1, 1]
];

let board;

function setup() {
  createCanvas(200, 200);
  board = new Board(data, 50);
  board.create();
}

function draw() {
  board.show()
}

class Board {
  constructor(data, cellsize) {
    this.data = data;
    this.cells = [];
    this.cellsize = cellsize;
  }

  create() {
    this.data.forEach((arr, i) => {
      arr.forEach((type, j) => {
        let x = this.cellsize * j;
        let y = this.cellsize * i;
        this.cells.push(new Cell(type, x, y, this.cellsize))
      })
    })
  }

  show() {
    this.cells.forEach(cell => cell.show());
  }
}

class Cell {
  constructor(type, x, y, size) {
    this.type = type;
    this.x = x;
    this.y = y;
    this.size = size;
  }

  show() {
    fill(this.type == 1 ? "red" : "blue")
    rect(this.x, this.y, this.size, this.size)
  }
}

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

Nenad Vracar 14 окт. 2018, в 09:57

Ещё вопросы

maykl harutyunyan · Accepted Answer · 2018-10-14T10-40-00.000Z

Вы можете использовать этот код

    var board = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];

function setup() {
    createCanvas(300, 300);
}

function draw() {
    for (var i = 0; i < board.length ; i++) {
        for (var j = 0; j < board[i].length; j++) {
            var x = j*100;
            var y = i*100;
            if(board[i][j] == 0)
                fill(211);
            else
                fill(10);
            stroke(0);
            rect(x, y, 100, 100);
        }
    }
}

У меня только 1 вопрос, как вы можете видеть в моем 2d массиве, [1, 0, 1] - это верхняя строка, однако, когда я это визуализирую, эти 2 прямоугольника находятся на левой стороне холста, как если бы холст был повернут на -90 градусов влево. Есть идеи, почему это происходит?