Trying to figure out 2D arrays by creating a 3x3 board and then visualizing it, however, I'm meeting some hurdles

Question

What I'm trying to achieve is this - creating 2 dimensional array like this one:

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

and then create a 300px canvas in which there will be 3x3 rectangles with 100px width and height each that will have different colors based on the array element value.

When the value is 1, the color should be red and when the value is 0 it should be blue.

I was able to create a 3x3 board in the canvas by using a nested loop, however, I am creating the board using a hard coded numbers instead of finding the length of the 2d array and creating rows and columns according to the length.

The problem is that I know how to get the length of a normal array only and not 2d. The other problem is that I can't figure out how to decide the color of the rectangle based on the array element value.

My code so far is:

 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);
        }
    }
}

score 1 · Accepted Answer · answered Oct 14 '18 at 12:19

1

You can use this code

    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);
        }
    }
}

answered Oct 14 '18 at 12:19

maykl harutyunyan

76
1
1
9

I just have 1 question, as you can see in my 2d array, the [1, 0, 1] is the top row, however, when I visualize it, those 2 rectangles are on the left side of the canvas as if the canvas has been rotated -90 degrees left. Any idea why is that happening? – Onyx Oct 14 '18 at 12:28

score 1 · Answer 2 · answered Oct 14 '18 at 12:29

You can just use nested forEach loop and use indexes to get x and y position based on current index and cell size.

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>

Trying to figure out 2D arrays by creating a 3x3 board and then visualizing it, however, I'm meeting some hurdles

2 Answers2