Серпинский ковер в обработке

Question

Так что я сделал ковер Серпинского в обработке с использованием Square тип данных, который рисует квадрат и имеет функцию generate() который генерирует 9 равных квадратов из себя и возвращает ArrayList из (9-1)=8 квадратов, удаляя средний (он не добавляется к возвращенному ArrayList) для создания ковра Серпинского.

Вот классная площадь -

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() функция.

По умолчанию при обработке сглаживания рисунки выглядят более гладкими. Обычно это хорошая вещь, но она также может добавить некоторую размытость краям фигур. Если вы отключите сглаживание, ваши фигуры станут более четкими, и вы не увидите артефакты.

Вариант 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); 
}