trying to make overlapping rectangles on canvas grid

Question

I´m trying to make a grid with overlapping squares that change between black and white. So far I could do the grid responsive to the canvas, also assign a random color, but the overlapping part doesnt quite work out. I tried adding a black stroke to the black squares but somehow there are very small squares appearing. Any ideas? Here´s my code:

void setup() {  
  size(900, 900);
}



void draw() {
  fill(255);
  noStroke();
  int divW=width/6;
  int horS=divW/5*2;
  int divH=height/6;
  int verS=divH/5*2;
  
  
  for (int p = 0; p < width; p = p+divH-verS) {
    for (int q = 0; q < height; q = q+divW-verS) {
      push();
      
      int col = int(random(100));
      if (col <= 65) {
        fill(0);
      }
       
      rect(q, p, divW, divH);
      pop();
      
  
}
  }

if (frameCount == 10) {
    exit();
    }
   
    saveFrame("output/2grid65_o###.png");

}

IMG of what I was getting without the stroke

IMG of what I´m getting with the stroke

IMG of what I want (see the overlap between squares?)

Answer 1

It looks like the white squares are overlapping the strokes on the black squares, which gives you those little bits sticking out from behind.

Since your background is white, a simple solution would be to not draw the white squares (just let the background show through). Then you should be able to use your stroke method to have them overlap.

int col = int(random(100));
if (col <= 65) {
    // only draw the square if it's black
    fill(0);
    rect(q, p, divW, divH);
}