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

Question

我正在尝试制作一个带有重叠方块的网格，这些方块在黑色和白色之间变化。到目前为止，我可以做响应 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?)

Answer 1

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

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

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

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

trying to make overlapping rectangles on canvas grid

random

grid

processing

overlap