在 Processing 3 中创建可点击的网格

Question

我正在尝试制作一个方格网格，当点击时它们会改变填充（从黑色到白色，反之亦然）。我目前可以打开或关闭整个网格，但我无法弄清楚当鼠标在其边界内单击时如何指定应切换哪个特定方块。我之前使用 mouseX 和 mouseY 坐标创建了按钮，但它们适用于我可以手动调整的特定对象。我不知道如何使用 for 循环和数组来执行此操作。

有人告诉我创建一个布尔数组并将该数组的值传递给网格数组，但同样，我不知道如何指定它需要转到数组的哪一部分。例如，如何在 mousePressed 时更改正方形 [6][3] 的填充值？

到目前为止，这是我的代码：

int size = 100;
int cols = 8;
int rows = 5;
boolean light = false;
int a;
int b;

void setup() { 
  size (800, 600);
  background (0);
}

void draw() {
}

void mousePressed() {
  light = !light;

  int[][] box = new int[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      box[i][j] = i;
      int a = i*100;
      int b = j*100;


      if (light == true) {
        fill(255);
      } else {
        fill(0);
      }
      rect(a, b, 100, 100);

      println(i, j);
    }
  }
}

Answer 1

首先，只要按下鼠标，您当前正在重新创建整个板。您必须在鼠标点击之间保留该信息，因此使 box 与其他数组一起成为全局数组。此外，如果您只关心每个方块的 on/off 状态，那么将其设为 boolean 数组就足够了：

boolean[][] isSquareLight = new boolean[cols][rows];

而不是

if (light == true) {

你应该检查一下

if (isSquareLight[i][j] == true) {

（注意 == true 是多余的）。

现在，您已经编写了查找每个框坐标的代码：您将它传递给 rect！

rect(a, b, 100, 100);

剩下要做的就是检查鼠标是否在这个矩形内，即 mouseX 是否在 a 和 a+100 之间（和 mouseY 类似) - 如果是这种情况，则用户单击了当前 (i, j) 给出的框，因此您可以否定 isSquareLight[i][j] （在像上面那样检查之前）和它会起作用。

有一些方法可以不用每次都遍历整个网格来计算它，但也许上面的方法可以帮助您自己找到路径，而不仅仅是获取为您制作的代码。

PS：最上面的int a; int b;什么都不做，可以去掉。您在函数中使用了局部变量 a 和 b，这是正确的。

在 Processing 3 中创建可点击的网格

Creating a clickable grid in Processing 3

java

arrays

processing

for-loop

multidimensional-array