Combinando formas

Até agora, você aprendeu a trabalhar com formas geométricas básicas, como retângulos, elipses, linhas e triângulos. Uma das maneiras mais interessantes de explorar o p5.js é combinar essas formas para montar figuras maiores e mais expressivas. Em vez de pensar em cada desenho como uma única forma pronta, você pode construir uma imagem a partir de várias partes simples.

Exemplo 1: homem palito

Um exemplo clássico de composição é o desenho de um homem palito. Nesse caso, podemos usar uma elipse para a cabeça, linhas para os membros e mais linhas para o corpo. O Código 4.1 mostra uma forma simples de montar essa figura.

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

  stroke(0);
  fill(255);

  ellipse(200, 100, 60, 60);

  line(200, 130, 200, 260);
  line(200, 170, 150, 220);
  line(200, 170, 250, 220);
  line(200, 260, 160, 330);
  line(200, 260, 240, 330);
}

Exemplo 2: carro

Outro exemplo interessante é a construção de um carro. Nesse caso, podemos usar retângulos para a carroceria e elipses para as rodas. O Código 4.2 mostra como essas formas podem ser combinadas para formar uma figura reconhecível.

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

  stroke(0);
  fill(255);

  rect(100, 220, 200, 70);
  rect(150, 180, 90, 60);
  ellipse(150, 290, 60, 60);
  ellipse(250, 290, 60, 60);
  line(180, 210, 220, 210);
}