在 p5.js 中显示地图的问题

Question

我目前正在尝试使用二维数组显示处理中的地图。目前我有这个：

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

function drawMap(map) {
  for (var x = 0; x < 5; x++) {
    for (var y = 0; y < 5; y++) {
      if (map[x][y] == 0) {
        fill(51, 153, 51);
        rect((10 + 50*x), (10 + 50*y), 50, 50);
      }
      else if (map[x][y] == 1) {
        fill(0, 102, 0);
        rect((10 + 50*x), (10 + 50*y), 50, 50);
      }
    }
  }
}

但是，虽然我确实显示了地图，但它似乎顺时针旋转了 90 度。是什么原因造成的，我该如何解决？

Answer 1

想想二维数组的索引是如何工作的。让我们看一个更简单的例子：

var map = [
  [1, 2],
  [3, 4]
];

map[0][1]在哪里？ map[1][0]在哪里？

二维数组是数组的数组。第一个索引 select 是该索引处的子数组，第二个索引 select 是该子数组中的元素。

所以在上面的简单示例中，map[0] select 是索引 0 处的子数组，即 [1, 2]。然后 map[0][1] select 是该子数组中索引 1 处的元素，即 2.

如果您将索引视为 x, y 对，这似乎有点令人惊讶。在那种情况下，您会期望 0, 1 给您 3，对吧？但它不是 x, y 对。它是外部数组的索引，然后是子数组的索引。

换句话说，它实际上是一对y, x。所以要解决你的问题，你实际上可以交换索引的顺序：

`map[y][x]`

现在您使用 y 值来 select 您想要的子数组（您想要的行），以及 x 值来 select 其中的元素你想要的子数组（你想要哪一列）。

在 p5.js 中显示地图的问题

Issues with displaying a map in p5.js

javascript

processing

multidimensional-array

p5.js