title: how to offset squares in a loop?
body: <p>I'm creating a sketch of the cafe wall illusion and need help coming up with a way to offset the checkerboard effect in Processing. The row below the previous one cannot be too close to the the row above it. basically I need it too look offset by half a tile each row going down but random starting points.</p>
  
  <pre class="lang-java prettyprint-override"><code>void setup(){
      size (500, 500);
      strokeWeight(3);
      stroke(127);
      tileSize = height/ROW_NUM;
      drawTiles();
  }
  
  void draw() {
  }
  
  void drawTiles() {
      for (int i=0; i&lt;ROW_NUM; i++) {
          squareX = int(random(-tileSize, 0)); 
  
          int counter = 0;
          while (squareX &lt; 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;
      }
  }
  </code></pre>