如何在一个循环中偏移正方形？

Question

我正在绘制咖啡馆壁错觉的草图，需要帮助来提出一种抵消“处理”中棋盘格效果的方法。上一行下面的行不能太靠近上一行。基本上，我也需要它每行向下偏移一半，但起点随机。

void setup(){
    size (500, 500);
    strokeWeight(3);
    stroke(127);
    tileSize = height/ROW_NUM;
    drawTiles();
}

void draw() {
}

void drawTiles() {
    for (int i=0; i<ROW_NUM; i++) {
        squareX = int(random(-tileSize, 0)); 

        int counter = 0;
        while (squareX < width) {

            if (counter%2==0) {
                fill(0);
                rect(squareX, squareY, tileSize, tileSize);
            } else {
                fill(255);
                rect(squareX, squareY, tileSize, tileSize);
            }
            squareX += tileSize;
            counter ++;
        }
        squareY += tileSize;
    }
}

Answer 1

不是弄清楚如何移动矩形的坐标，而是使用translate“移动坐标系”：

final int rectSize = ...

void setup() {
    ...
    noLoop();
    strokeWeight(4);
    stroke(127);
}

在绘制中，而不是为每个矩形计算x / y坐标，而是从（0,0）开始“绘制一排图块”，然后更改（0,0）的含义< / em>，方法是使用translate，根据我们所在的行将其向下移动一排，然后向右或向左移动一点；我们要向右移动第1行和第2行，然后向左移动第3行和第4行，然后向右移动第5行和第6行，依此类推。因此，如果（行数/ 2）四舍五入为偶数，我们想向左移动，如果四舍五入到一个奇数。

void draw() {
  int steps = 4;
  for(int row=0; row < 1 + height/rectSize; row++) {
    drawTileRow();
    int step = rectSize / steps;
    if ((row / 2) % 2 == 0) {
      step = -step;
    }
    translate(step, rectSize);
  }
}

然后，您可以在drawTileRow函数中编写更简单的代码，尽管您确实想从-rectSize开始，并在以下位置结束，但是绘制的矩形开始于（0,0）并结束于（width，0）。 width+rectSize，以补偿整个全局坐标系偏移的事实：

void drawTileRow() {
  boolean negative = false;
  for(int x=-rectSize; x<width+rectSize; x+=rectSize) {
    fill(negative ? 255 : 0);
    rect(x,0,rectSize,rectSize);
    negative = !negative;
  }
}

结果很正确。