Classes e objetos

Quando escrevemos programas em p5.js, muitas vezes queremos repetir a mesma forma várias vezes. O comando rect() já funciona como uma função pronta para desenhar retângulos. No entanto, em alguns casos, queremos criar desenhos mais complexos, como um homem palito ou uma xícara, e usar essa estrutura várias vezes. Nesse tipo de situação, as classes e os objetos ajudam bastante.

Uma classe funciona como uma “receita” para criar um tipo de desenho. A partir dessa receita, podemos criar vários objetos diferentes, cada um com suas próprias características. Isso torna o código mais organizado, mais fácil de reutilizar e mais parecido com a ideia de criar formas personalizadas.

Vantagem de usar classes e objetos

Ao criar uma classe, você define uma estrutura geral para um desenho. Depois, cada objeto criado a partir dessa classe representa uma instância específica desse desenho. Em vez de repetir o mesmo bloco de código várias vezes, você escreve a classe uma única vez e usa ela sempre que quiser.

Essa abordagem é útil porque:

• organiza melhor o código;
• permite criar vários desenhos iguais ou parecidos;
• facilita alterar o comportamento de todos os objetos ao mesmo tempo;
• deixa o programa mais próximo de uma representação de elementos do mundo real.

Exemplo 1: homem palito

Podemos criar uma classe para desenhar um homem palito. A classe define a cabeça, o corpo e os membros. Depois, basta criar objetos com posições diferentes.

class HomemPalito {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  desenhar() {
    ellipse(this.x, this.y - 40, 40, 40);
    line(this.x, this.y - 20, this.x, this.y + 80);
    line(this.x, this.y, this.x - 40, this.y + 40);
    line(this.x, this.y, this.x + 40, this.y + 40);
    line(this.x, this.y + 80, this.x - 30, this.y + 130);
    line(this.x, this.y + 80, this.x + 30, this.y + 130);
  }
}

function setup() {
  createCanvas(400, 400);
  background(255);

  let pessoa1 = new HomemPalito(120, 140);
  let pessoa2 = new HomemPalito(280, 160);

  pessoa1.desenhar();
  pessoa2.desenhar();
}

Exemplo 2: árvore

Também podemos criar uma classe para desenhar uma árvore. Nesse caso, a classe define a forma básica do tronco e das folhas, e a partir dela podemos criar várias árvores em posições diferentes. Isso é semelhante ao que acontece quando usamos rect(): a função define a forma, enquanto os parâmetros indicam onde e como ela deve aparecer.

class Arvore {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  desenhar() {
    noStroke();

    // tronco
    fill(101, 67, 33);
    rect(this.x - 10, this.y, 20, 70);

    // copa em camadas, da mais escura (base) para a mais clara (topo)
    fill(34, 100, 34);
    ellipse(this.x, this.y - 10, 100, 100);

    fill(46, 130, 46);
    ellipse(this.x - 30, this.y - 50, 70, 70);
    ellipse(this.x + 30, this.y - 50, 70, 70);

    fill(60, 160, 60);
    ellipse(this.x, this.y - 90, 85, 85);
  }
}

function setup() {
  createCanvas(400, 400);
  background(255);

  let arvore1 = new Arvore(120, 300);
  let arvore2 = new Arvore(280, 280);

  arvore1.desenhar();
  arvore2.desenhar();
}