Exportando SVG

Além de carregar desenhos vetoriais em formato SVG, com p5.js também é possível gerar arquivos SVG a partir de sequências de comandos — mas isso requer uma biblioteca adicional, a p5.js-svg, que precisa ser incluída no projeto (por meio de uma tag <script> apontando para o arquivo da biblioteca, além do próprio p5.js). Diferente do carregamento de imagens, essa é uma funcionalidade que não faz parte do núcleo do p5.js.

Com essa biblioteca carregada, basta indicar SVG como terceiro parâmetro de createCanvas() para que o desenho seja renderizado como um documento SVG (em vez de pixels), e usar a função save() para gravar o resultado em um arquivo. O exemplo a seguir cria uma grade de quadrados com cores aleatórias e será utilizado para explicar essas diferenças:

function setup() {
  createCanvas(1000, 1000, SVG); // exige a biblioteca p5.js-svg
  console.log('vou começar o desenho');
  background(0);
  noStroke();
  for (let px = 0; px < width; px = px + 100) {
    for (let py = 0; py < height; py = py + 100) {
      // sorteia uma cor
      let vermelho = random(255);
      let verde = random(255);
      let azul = random(255);
      fill(vermelho, verde, azul);
      rect(px, py, 95, 95);
    }
  }
  console.log('terminei o desenho');
  save('desenho.svg'); // grava/baixa o arquivo SVG
}

Em primeiro lugar, a função createCanvas recebe um terceiro parâmetro, SVG, indicando que desejamos gerar o desenho como um documento SVG e não apenas como pixels em um canvas comum (isso só funciona com a biblioteca p5.js-svg carregada).

Em seguida, vemos uma linha que escreve uma mensagem no console com console.log(). Isso não é estritamente necessário, mas é útil para acompanhar o andamento do programa, especialmente em desenhos mais complexos e demorados.

As linhas seguintes usam normalmente funções de desenho do p5.js para compor a imagem; nesse aspecto, não há nenhuma diferença.

Depois que o desenho está completo, o programa chama a função save('desenho.svg'), que gera o arquivo e inicia seu download no navegador. Diferente do Processing (que exige uma chamada explícita a exit() para finalizar a gravação), em p5.js o save() já realiza a gravação/download imediatamente quando é chamado — não é necessário nenhum comando adicional para concluir o processo.

A figura a seguir apresenta um exemplo de arquivo SVG gerado por esse programa. Como se trata de um desenho vetorial, esse arquivo pode ser acessado e modificado em programas como Inkscape ou Adobe Illustrator.

Atividade 7

Modifique o Código 3.7 para construir e gravar um desenho com uma grade de círculos, em vez de quadrados. A modificação deve ser no programa, e não editando a imagem produzida.

Com isso concluímos o capítulo sobre desenhos vetoriais, incluindo dois cenários complementares: o caso em que desenhos editados em outros programas são utilizados em p5.js e o caso em que o p5.js é utilizado para gerar desenhos para outras aplicações.

DESAFIO

1. Faça um programa em que um desenho em formato SVG é carregado e desenhado 20 vezes em posições, tamanhos e rotações aleatórias.
2. Modifique o exemplo de folha (Atividade 6) para gerar um padrão semelhante a uma espiral.