试图在 canvas 网格上制作重叠的矩形

trying to make overlapping rectangles on canvas grid

我正在尝试制作一个带有重叠方块的网格,这些方块在黑色和白色之间变化。到目前为止,我可以做响应 canvas 的网格,也可以分配随机颜色,但重叠部分不太好。我尝试在黑色方块上添加黑色描边,但不知何故出现了非常小的方块。有任何想法吗?这是我的代码:

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?)

看起来白色方块与黑色方块上的笔画重叠,这让你从后面伸出了那些小点。

由于您的背景是白色的,一个简单的解决方案是不绘制白色方块(只让背景显示出来)。然后你应该可以使用你的笔触方法让它们重叠。

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