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