Arte Generativa: desenhando quadrados

O código a seguir explora diferentes maneiras de desenhar um quadrado usando a linguagem Processing, cada uma com suas próprias características e métodos. Cada abordagem é encapsulada em uma função separada para maior clareza.

void setup() {
  size(300, 300);
  background(220);
}

void draw() {
  rect(50, 50, 100, 100);
  desenharQuadradoLinhas(150, 150, 100);
  desenharQuadradoVertices(50, 150, 100);
  desenharQuadradoCentro(200, 100, 100);
  desQP(200, 150, 50); desQP(150, 200, 50); desQP(150, 150, 50);
}

// 2. Usando line() para desenhar com quatro linhas
void desenharQuadradoLinhas(int x, int y, int lado) {
  line(x, y, x + lado, y);
  line(x + lado, y, x + lado, y + lado);
  line(x + lado, y + lado, x, y + lado);
  line(x, y + lado, x, y);
}

// 3. Usando beginShape() e endShape() com vértices
void desenharQuadradoVertices(int x, int y, int lado) {
  beginShape();
  vertex(x, y);
  vertex(x + lado, y);
  vertex(x + lado, y + lado);
  vertex(x, y + lado);
  endShape(CLOSE);
}

// 4. Usando rectMode(CENTER) para desenhar centralizado
void desenharQuadradoCentro(int x, int y, int lado) {
  rectMode(CENTER);
  rect(x, y, lado, lado);
  rectMode(CORNER); // Restaura o modo padrão
}

// 5. Usando um laço para desenhar com pontos
void desQP(int x, int y, int lado) {
  strokeWeight(2); // Aumenta a espessura da linha para visualizar os pontos
  for (int i = 0; i < lado; i++) {
    point(x + i, y);
    point(x + lado, y + i);
    point(x + lado - i, y + lado);
    point(x, y + lado - i);
  }
  strokeWeight(1); // Restaura a espessura padrão
}

Inicialmente se utilizou a função rect() do Processing para desenhar um quadrado diretamente.

A função desenharQuadradoLinhas() desenha o quadrado usando quatro linhas separadas.

A função desenharQuadradoVertices() utiliza beginShape() e endShape() para desenhar o quadrado definindo seus vértices.

Por fim, a função desQP() desenha o quadrado usando uma série de pontos. Veja que essa função ficou com o nome fora do padrão para ficar melhor ajustada a “largura” do código.

O resultado do código é mostrado a seguir. A tela eu chamei de “Quadrado 7 + 1 + 1” como um brincadeira pelo número de quadrados da figura.