Usando SVG

Até agora, desenvolvemos programas que constroem desenhos baseados em elementos como segmentos de reta, círculos e polígonos. Entretanto, o p5.js também possui a capacidade de ler arquivos de desenhos vetoriais no formato SVG e exibir as formas na tela.

Denominamos desenhos vetoriais as imagens descritas por sequências de objetos matemáticos, tais como curvas, segmentos de reta, polígonos etc. Dessa forma, o que fizemos até agora foi construir desenhos vetoriais a partir de comandos de programação. No entanto, diferentes softwares, tais como Adobe Illustrator, Figma e Inkscape fornecem interfaces visuais para a criação dessas imagens.

Em p5.js, um arquivo SVG é carregado da mesma forma que uma imagem comum, usando a função loadImage() dentro da função especial preload() — que roda antes de setup(), garantindo que o arquivo termine de carregar antes do programa começar a desenhar. O exemplo a seguir demonstra como um desenho vetorial pode ser carregado e exibido em p5.js:

let figura;

function preload() {
  // Carrega a figura a partir do caminho do arquivo
  figura = loadImage('minha_figura.svg');
}

function setup() {
  createCanvas(400, 400);
  background(220, 220, 240);
  // Apresenta a imagem na janela do programa
  image(figura, 0, 0);
}

Para carregar um arquivo SVG próprio, basta colocá-lo na pasta do seu projeto (em geral dentro de uma subpasta como assets) e referenciar seu caminho relativo em loadImage(), dentro de preload(), como no exemplo acima.

Na forma apresentada, a função image() recebeu três parâmetros: a variável com a imagem/desenho vetorial a ser apresentado e dois valores numéricos correspondentes à posição do canto superior esquerdo do desenho na janela (da mesma forma que retângulos são especificados na função rect()). Nesse caso, o desenho é apresentado em seu tamanho original.

Também é possível especificar mais dois parâmetros para a função image(), indicando a largura e altura do desenho. Por exemplo, se modificarmos a última linha do programa anterior para:

function setup() {
  createCanvas(400, 400);
  background(220, 220, 240);
  image(figura, 0, 0, 200, 300);
}

o desenho será apresentado com 200 pixels de largura e 300 pixels de altura. Observe que, como essas dimensões não seguem a proporção original da figura, o desenho é distorcido.

Atividade 1

Crie um desenho vetorial em um editor (por exemplo, Inkscape ou Adobe Illustrator) e modifique o Código 3.1 para apresentar esse novo desenho, carregando-o de um arquivo (em vez do SVG embutido no código).

Obs: se não tiver acesso a um editor de desenhos vetoriais que grave arquivos SVG, procure um arquivo existente em repositórios como o freesvg.org.

Atividade 2

Modifique o Código 3.1 para apresentar o desenho do tamanho da janela.

Atividade 3

Modifique o Código 3.1 para obter um resultado como mostrado a seguir, utilizando um dos comandos de repetição estudados no capítulo anterior.