正在加工的谢尔宾斯基地毯

Question

所以我在处理中使用Square 数据类型制作了谢尔宾斯基地毯分形，该数据类型绘制一个正方形并具有一个函数generate()，它从自身生成9 个相等的正方形并返回一个ArrayList (9 -1)=8 去除中间的方块（它不会添加到返回的ArrayList）以生成谢尔宾斯基地毯。

这里是 Square 类 -

class Square {

  PVector pos;
  float r;

  Square(float x, float y, float r) {
    pos = new PVector(x, y);
    this.r = r;
  }
  void display() {
    noStroke();
    fill(120,80,220);
    rect(pos.x, pos.y, r, r);
  }
  ArrayList<Square> generate() {

    ArrayList<Square> rects = new ArrayList<Square>();

    float newR = r/3;

    for (int i=0; i<3; i++) {
      for (int j=0; j<3; j++) {
        if (!(i==1 && j==1)) {
          Square sq = new Square(pos.x+i*newR, pos.y+j*newR, newR);
          rects.add(sq);
        }
      }
    }

    return rects;
  }
}

这是通过鼠标单击向前生成的主要草图 -

ArrayList<Square> current;

void setup() {
  size(600, 600);
  current = new ArrayList<Square>();

  current.add(new Square(0, 0, width));
}

void draw() {
  background(255);
  for (Square sq : current) {
    sq.display();
  }
}

void mousePressed() {
  ArrayList<Square> next = new ArrayList<Square>();

  for(Square sq: current) {
    ArrayList<Square> rects = sq.generate();
    next.addAll(rects);
  }
  current = next;
}

问题：

我得到的输出有很细的白线，不应该在那里：

第一代 -

第二代 -

第三代 -

我的猜测是，这些线条只是由于generate() 中的计算偏离一两个像素而出现的白色背景。但是我不确定如何摆脱这些。任何帮助将不胜感激！

Answer 1

这是一个演示您的问题的较小示例：

size(1000, 100);
noStroke();
background(0);

float squareWidth = 9.9;
for(float squareX = 0; squareX < width; squareX += squareWidth){
 rect(squareX, 0, squareWidth, height); 
}

请注意，黑色背景通过方块显示。请尝试在将来发布这种最小的示例而不是您的整个草图。

无论如何，有三种方法可以解决这个问题：

选项1：调用noSmooth()函数。

默认情况下，Processing 使用抗锯齿功能使您的绘图看起来更平滑。通常这是一件好事，但它也会给形状的边缘添加一些模糊性。如果您禁用抗锯齿，您的形状将更加清晰，您将看不到伪影。

选项 2：使用与填充颜色相同的笔触。

正如您已经发现的那样，这会在形状周围绘制轮廓。

选项 3： 使用 int 值而不是 float 值。

您将坐标和大小存储在 float 值中，其中可以包含小数位。问题是，屏幕（显示器上的实际像素）没有小数位（没有半个像素之类的东西），所以它们由int 值表示。因此，当您将 float 值转换为 int 时，小数部分会被丢弃，这可能会导致您的形状出现小间隙。

如果您只是切换到使用 int 值，问题就会消失：

size(1000, 100);
noStroke();
background(0);

int squareWidth = 10;
for(int squareX = 0; squareX < width; squareX += squareWidth){
 rect(squareX, 0, squareWidth, height); 
}