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