[{"data":1,"prerenderedAt":681},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-imagens-exportando":139,"-pcs3021-imagens-exportando-surround":676},[4,8],{"title":5,"path":6,"stem":7},"","\u002F","index",{"title":9,"icon":10,"path":11,"stem":12,"children":13},"PCS3021","i-lucide-message-circle-code","\u002Fpcs3021","pcs3021",[14,17,48,74,92,108,124,133],{"title":15,"path":11,"stem":16},"Exemplo","pcs3021\u002Findex",{"title":18,"icon":19,"path":20,"stem":21,"children":22,"page":47},"Formas geométricas","i-lucide-drafting-compass","\u002Fpcs3021\u002Fgeometrias","pcs3021\u002F2.geometrias",[23,27,31,35,39,43],{"title":24,"path":25,"stem":26},"Retângulos","\u002Fpcs3021\u002Fgeometrias\u002Fretangulo","pcs3021\u002F2.geometrias\u002F1.retangulo",{"title":28,"path":29,"stem":30},"Elipses e Círculos","\u002Fpcs3021\u002Fgeometrias\u002Felipse","pcs3021\u002F2.geometrias\u002F2.elipse",{"title":32,"path":33,"stem":34},"Triângulos","\u002Fpcs3021\u002Fgeometrias\u002Ftriangulo","pcs3021\u002F2.geometrias\u002F3.triangulo",{"title":36,"path":37,"stem":38},"Linhas","\u002Fpcs3021\u002Fgeometrias\u002Flinha","pcs3021\u002F2.geometrias\u002F4.linha",{"title":40,"path":41,"stem":42},"Pontos","\u002Fpcs3021\u002Fgeometrias\u002Fponto","pcs3021\u002F2.geometrias\u002F5.ponto",{"title":44,"path":45,"stem":46},"Polígonos","\u002Fpcs3021\u002Fgeometrias\u002Fpoligonos","pcs3021\u002F2.geometrias\u002F6.poligonos",false,{"title":49,"icon":50,"path":51,"stem":52,"children":53,"page":47},"Transformações","i-lucide-rotate-3d","\u002Fpcs3021\u002Ftransformacoes","pcs3021\u002F2.transformacoes",[54,58,62,66,70],{"title":55,"path":56,"stem":57},"Rotação","\u002Fpcs3021\u002Ftransformacoes\u002Frotacao","pcs3021\u002F2.transformacoes\u002F1.rotacao",{"title":59,"path":60,"stem":61},"Translação","\u002Fpcs3021\u002Ftransformacoes\u002Ftranslacao","pcs3021\u002F2.transformacoes\u002F2.translacao",{"title":63,"path":64,"stem":65},"Escala","\u002Fpcs3021\u002Ftransformacoes\u002Fescala","pcs3021\u002F2.transformacoes\u002F3.escala",{"title":67,"path":68,"stem":69},"Cisalhamento","\u002Fpcs3021\u002Ftransformacoes\u002Fcisalhamento","pcs3021\u002F2.transformacoes\u002F4.cisalhamento",{"title":71,"path":72,"stem":73},"Push e Pop","\u002Fpcs3021\u002Ftransformacoes\u002Fpush-pop","pcs3021\u002F2.transformacoes\u002F5.push-pop",{"title":75,"icon":76,"path":77,"stem":78,"children":79,"page":47},"Programação","i-lucide-square-code","\u002Fpcs3021\u002Fprogramacao","pcs3021\u002F3.programacao",[80,84,88],{"title":81,"path":82,"stem":83},"Variáveis","\u002Fpcs3021\u002Fprogramacao\u002Fvariaveis","pcs3021\u002F3.programacao\u002F1.variaveis",{"title":85,"path":86,"stem":87},"Expressões numéricas","\u002Fpcs3021\u002Fprogramacao\u002Fexpressoes-numericas","pcs3021\u002F3.programacao\u002F2.expressoes-numericas",{"title":89,"path":90,"stem":91},"Laço FOR","\u002Fpcs3021\u002Fprogramacao\u002Ffor","pcs3021\u002F3.programacao\u002F3.for",{"title":93,"path":94,"stem":95,"children":96,"icon":107},"Imagens","\u002Fpcs3021\u002Fimagens","pcs3021\u002F4.imagens\u002F1.index",[97,99,103],{"title":98,"path":94,"stem":95},"Usando SVG",{"title":100,"path":101,"stem":102},"Exportando SVG","\u002Fpcs3021\u002Fimagens\u002Fexportando","pcs3021\u002F4.imagens\u002F4.exportando",{"title":104,"path":105,"stem":106},"Imagens Matriciais","\u002Fpcs3021\u002Fimagens\u002Fmatriciais","pcs3021\u002F4.imagens\u002F5.matriciais","i-lucide-pen-tool",{"title":109,"path":110,"stem":111,"children":112,"icon":123},"Animações","\u002Fpcs3021\u002Fanimacao","pcs3021\u002F5.animacao\u002F1.index",[113,115,119],{"title":114,"path":110,"stem":111},"Introdução à animação",{"title":116,"path":117,"stem":118},"Variáveis locais e globais","\u002Fpcs3021\u002Fanimacao\u002Fusando-variaveis","pcs3021\u002F5.animacao\u002F2.usando-variaveis",{"title":120,"path":121,"stem":122},"Eventos","\u002Fpcs3021\u002Fanimacao\u002Feventos","pcs3021\u002F5.animacao\u002F3.eventos","i-lucide-clapperboard",{"title":125,"icon":126,"path":127,"stem":128,"children":129,"page":47},"Vetores","i-lucide-spline-pointer","\u002Fpcs3021\u002Fvetores","pcs3021\u002F6.vetores",[130],{"title":125,"path":131,"stem":132},"\u002Fpcs3021\u002Fvetores\u002Fvetores","pcs3021\u002F6.vetores\u002F7.vetores",{"title":134,"path":135,"stem":136,"children":137,"icon":126},"Funções","\u002Fpcs3021\u002Ffuncoes","pcs3021\u002F7.funcoes\u002F1.index",[138],{"title":134,"path":135,"stem":136},{"id":140,"title":100,"body":141,"categoria":669,"creditoLink":669,"creditos":669,"descricao":669,"description":670,"eaulas":669,"extension":671,"meta":672,"navigation":673,"path":101,"seo":674,"stem":102,"video":669,"youtube":669,"youtubeLink":669,"__hash__":675},"docs\u002Fpcs3021\u002F4.imagens\u002F4.exportando.md",{"type":142,"value":143,"toc":667},"minimark",[144,161,177,577,587,594,597,611,614,621,632,635,663],[145,146,147,148,155,156,160],"p",{},"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 ",[149,150,154],"a",{"href":151,"rel":152},"https:\u002F\u002Fgithub.com\u002Fzenozeng\u002Fp5.js-svg",[153],"nofollow","p5.js-svg",", que precisa ser incluída no projeto (por meio de uma tag ",[157,158,159],"code",{},"\u003Cscript>"," 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.",[145,162,163,164,167,168,172,173,176],{},"Com essa biblioteca carregada, basta indicar ",[157,165,166],{},"SVG"," como terceiro parâmetro de ",[169,170,171],"strong",{},"createCanvas()"," para que o desenho seja renderizado como um documento SVG (em vez de pixels), e usar a função ",[169,174,175],{},"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:",[178,179,180,181],"code-preview",{},"Código 3.7 - Gerando um arquivo SVG com uma grade de quadrados coloridos (requer a biblioteca p5.js-svg)",[182,183,184],"template",{"v-slot:code":5},[185,186,190],"pre",{"className":187,"code":188,"language":189,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function setup() {\n  createCanvas(1000, 1000, SVG); \u002F\u002F exige a biblioteca p5.js-svg\n  console.log('vou começar o desenho');\n  background(0);\n  noStroke();\n  for (let px = 0; px \u003C width; px = px + 100) {\n    for (let py = 0; py \u003C height; py = py + 100) {\n      \u002F\u002F sorteia uma cor\n      let vermelho = random(255);\n      let verde = random(255);\n      let azul = random(255);\n      fill(vermelho, verde, azul);\n      rect(px, py, 95, 95);\n    }\n  }\n  console.log('terminei o desenho');\n  save('desenho.svg'); \u002F\u002F grava\u002Fbaixa o arquivo SVG\n}\n","js",[157,191,192,212,248,276,291,301,353,395,401,424,444,464,487,515,521,527,549,571],{"__ignoreMap":5},[193,194,197,201,205,209],"span",{"class":195,"line":196},"line",1,[193,198,200],{"class":199},"spNyl","function",[193,202,204],{"class":203},"s2Zo4"," setup",[193,206,208],{"class":207},"sMK4o","()",[193,210,211],{"class":207}," {\n",[193,213,215,218,222,226,229,232,234,238,241,244],{"class":195,"line":214},2,[193,216,217],{"class":203},"  createCanvas",[193,219,221],{"class":220},"swJcz","(",[193,223,225],{"class":224},"sbssI","1000",[193,227,228],{"class":207},",",[193,230,231],{"class":224}," 1000",[193,233,228],{"class":207},[193,235,237],{"class":236},"sTEyZ"," SVG",[193,239,240],{"class":220},")",[193,242,243],{"class":207},";",[193,245,247],{"class":246},"sHwdD"," \u002F\u002F exige a biblioteca p5.js-svg\n",[193,249,251,254,257,260,262,265,269,271,273],{"class":195,"line":250},3,[193,252,253],{"class":236},"  console",[193,255,256],{"class":207},".",[193,258,259],{"class":203},"log",[193,261,221],{"class":220},[193,263,264],{"class":207},"'",[193,266,268],{"class":267},"sfazB","vou começar o desenho",[193,270,264],{"class":207},[193,272,240],{"class":220},[193,274,275],{"class":207},";\n",[193,277,279,282,284,287,289],{"class":195,"line":278},4,[193,280,281],{"class":203},"  background",[193,283,221],{"class":220},[193,285,286],{"class":224},"0",[193,288,240],{"class":220},[193,290,275],{"class":207},[193,292,294,297,299],{"class":195,"line":293},5,[193,295,296],{"class":203},"  noStroke",[193,298,208],{"class":220},[193,300,275],{"class":207},[193,302,304,308,311,314,317,320,323,325,327,330,333,335,337,339,341,344,347,350],{"class":195,"line":303},6,[193,305,307],{"class":306},"s7zQu","  for",[193,309,310],{"class":220}," (",[193,312,313],{"class":199},"let",[193,315,316],{"class":236}," px",[193,318,319],{"class":207}," =",[193,321,322],{"class":224}," 0",[193,324,243],{"class":207},[193,326,316],{"class":236},[193,328,329],{"class":207}," \u003C",[193,331,332],{"class":236}," width",[193,334,243],{"class":207},[193,336,316],{"class":236},[193,338,319],{"class":207},[193,340,316],{"class":236},[193,342,343],{"class":207}," +",[193,345,346],{"class":224}," 100",[193,348,349],{"class":220},") ",[193,351,352],{"class":207},"{\n",[193,354,356,359,361,363,366,368,370,372,374,376,379,381,383,385,387,389,391,393],{"class":195,"line":355},7,[193,357,358],{"class":306},"    for",[193,360,310],{"class":220},[193,362,313],{"class":199},[193,364,365],{"class":236}," py",[193,367,319],{"class":207},[193,369,322],{"class":224},[193,371,243],{"class":207},[193,373,365],{"class":236},[193,375,329],{"class":207},[193,377,378],{"class":236}," height",[193,380,243],{"class":207},[193,382,365],{"class":236},[193,384,319],{"class":207},[193,386,365],{"class":236},[193,388,343],{"class":207},[193,390,346],{"class":224},[193,392,349],{"class":220},[193,394,352],{"class":207},[193,396,398],{"class":195,"line":397},8,[193,399,400],{"class":246},"      \u002F\u002F sorteia uma cor\n",[193,402,404,407,410,412,415,417,420,422],{"class":195,"line":403},9,[193,405,406],{"class":199},"      let",[193,408,409],{"class":236}," vermelho",[193,411,319],{"class":207},[193,413,414],{"class":203}," random",[193,416,221],{"class":220},[193,418,419],{"class":224},"255",[193,421,240],{"class":220},[193,423,275],{"class":207},[193,425,427,429,432,434,436,438,440,442],{"class":195,"line":426},10,[193,428,406],{"class":199},[193,430,431],{"class":236}," verde",[193,433,319],{"class":207},[193,435,414],{"class":203},[193,437,221],{"class":220},[193,439,419],{"class":224},[193,441,240],{"class":220},[193,443,275],{"class":207},[193,445,447,449,452,454,456,458,460,462],{"class":195,"line":446},11,[193,448,406],{"class":199},[193,450,451],{"class":236}," azul",[193,453,319],{"class":207},[193,455,414],{"class":203},[193,457,221],{"class":220},[193,459,419],{"class":224},[193,461,240],{"class":220},[193,463,275],{"class":207},[193,465,467,470,472,475,477,479,481,483,485],{"class":195,"line":466},12,[193,468,469],{"class":203},"      fill",[193,471,221],{"class":220},[193,473,474],{"class":236},"vermelho",[193,476,228],{"class":207},[193,478,431],{"class":236},[193,480,228],{"class":207},[193,482,451],{"class":236},[193,484,240],{"class":220},[193,486,275],{"class":207},[193,488,490,493,495,498,500,502,504,507,509,511,513],{"class":195,"line":489},13,[193,491,492],{"class":203},"      rect",[193,494,221],{"class":220},[193,496,497],{"class":236},"px",[193,499,228],{"class":207},[193,501,365],{"class":236},[193,503,228],{"class":207},[193,505,506],{"class":224}," 95",[193,508,228],{"class":207},[193,510,506],{"class":224},[193,512,240],{"class":220},[193,514,275],{"class":207},[193,516,518],{"class":195,"line":517},14,[193,519,520],{"class":207},"    }\n",[193,522,524],{"class":195,"line":523},15,[193,525,526],{"class":207},"  }\n",[193,528,530,532,534,536,538,540,543,545,547],{"class":195,"line":529},16,[193,531,253],{"class":236},[193,533,256],{"class":207},[193,535,259],{"class":203},[193,537,221],{"class":220},[193,539,264],{"class":207},[193,541,542],{"class":267},"terminei o desenho",[193,544,264],{"class":207},[193,546,240],{"class":220},[193,548,275],{"class":207},[193,550,552,555,557,559,562,564,566,568],{"class":195,"line":551},17,[193,553,554],{"class":203},"  save",[193,556,221],{"class":220},[193,558,264],{"class":207},[193,560,561],{"class":267},"desenho.svg",[193,563,264],{"class":207},[193,565,240],{"class":220},[193,567,243],{"class":207},[193,569,570],{"class":246}," \u002F\u002F grava\u002Fbaixa o arquivo SVG\n",[193,572,574],{"class":195,"line":573},18,[193,575,576],{"class":207},"}\n",[145,578,579,580,583,584,586],{},"Em primeiro lugar, a função ",[169,581,582],{},"createCanvas"," recebe um terceiro parâmetro, ",[157,585,166],{},", 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).",[145,588,589,590,593],{},"Em seguida, vemos uma linha que escreve uma mensagem no console com ",[169,591,592],{},"console.log()",". Isso não é estritamente necessário, mas é útil para acompanhar o andamento do programa, especialmente em desenhos mais complexos e demorados.",[145,595,596],{},"As linhas seguintes usam normalmente funções de desenho do p5.js para compor a imagem; nesse aspecto, não há nenhuma diferença.",[145,598,599,600,603,604,607,608,610],{},"Depois que o desenho está completo, o programa chama a função ",[169,601,602],{},"save('desenho.svg')",", que gera o arquivo e inicia seu download no navegador. Diferente do Processing (que exige uma chamada explícita a ",[157,605,606],{},"exit()"," para finalizar a gravação), em p5.js o ",[169,609,175],{}," já realiza a gravação\u002Fdownload imediatamente quando é chamado — não é necessário nenhum comando adicional para concluir o processo.",[145,612,613],{},"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.",[145,615,616],{},[617,618],"img",{"alt":619,"src":620},"Exemplo de SVG gerado com a grade de quadrados",".\u002Fimg\u002F03-desenhos-vetoriais\u002Fsvg-exportado-grade.png",[622,623,624,629],"blockquote",{},[145,625,626],{},[169,627,628],{},"Atividade 7",[145,630,631],{},"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.",[145,633,634],{},"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.",[622,636,637,642,652],{},[145,638,639],{},[169,640,641],{},"DESAFIO",[643,644,645,649],"ol",{},[646,647,648],"li",{},"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.",[646,650,651],{},"Modifique o exemplo de folha (Atividade 6) para gerar um padrão semelhante a uma espiral.",[145,653,654,658,659],{},[617,655],{"alt":656,"src":657},"Resultado de referência do desafio 1",".\u002Fimg\u002F03-desenhos-vetoriais\u002Fdesafio-resultado1.png"," ",[617,660],{"alt":661,"src":662},"Resultado de referência do desafio 2",".\u002Fimg\u002F03-desenhos-vetoriais\u002Fdesafio-resultado2.png",[664,665,666],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":5,"searchDepth":214,"depth":214,"links":668},[],null,"Veja como exportar o conteúdo do Canvas em SVG","md",{},true,{"title":100,"description":670},"6LBxC_4-E83tnNYV_ntBKCvXQlfgs-AJINcNBUjKbRM",[677,679],{"title":98,"path":94,"stem":95,"description":678,"children":-1},"Aprenda a usar arquivos SVG",{"title":104,"path":105,"stem":106,"description":680,"children":-1},"Carregando, exibindo, colorindo e transformando imagens matriciais (raster) em p5.js",1784150368966]