[{"data":1,"prerenderedAt":623},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-imagens":183,"-pcs3021-imagens-surround":618},[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":158,"body":185,"categoria":612,"creditoLink":612,"creditos":612,"descricao":612,"description":613,"eaulas":612,"extension":614,"meta":615,"navigation":269,"path":154,"seo":616,"stem":155,"video":612,"youtube":612,"youtubeLink":612,"__hash__":617},"docs\u002Fpcs3021\u002F6.imagens\u002F1.index.md",{"type":186,"value":187,"toc":610},"minimark",[188,192,208,216,232,429,433,446,457,463,553,556,559,579,589,606],[189,190,191],"p",{},"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.",[189,193,194,195,199,200,207],{},"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 ",[196,197,198],"em",{},"softwares",", tais como Adobe Illustrator, Figma e ",[201,202,206],"a",{"href":203,"rel":204},"https:\u002F\u002Finkscape.org\u002F",[205],"nofollow","Inkscape"," fornecem interfaces visuais para a criação dessas imagens.",[209,210,211,215],"note",{},[212,213,214],"strong",{},"IMPORTANTE",": assim como qualquer navegador, o p5.js não consegue interpretar corretamente todas as formas, padrões de preenchimento etc. possíveis em um arquivo SVG. Assim, ele pode carregar e exibir incorretamente alguns arquivos mais complexos.",[189,217,218,219,223,224,227,228,231],{},"Em p5.js, um arquivo SVG é carregado da mesma forma que uma imagem comum, usando a função ",[220,221,222],"code",{},"loadImage()"," dentro da função especial ",[220,225,226],{},"preload()"," — que roda antes de ",[220,229,230],{},"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:",[233,234,235,236],"code-preview",{},"Código - Carregando e exibindo um desenho vetorial (SVG)",[237,238,239],"template",{"v-slot:code":5},[240,241,245],"pre",{"className":242,"code":243,"language":244,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","let figura;\n\nfunction preload() {\n  \u002F\u002F Carrega a figura a partir do caminho do arquivo\n  figura = loadImage('minha_figura.svg');\n}\n\nfunction setup() {\n  createCanvas(400, 400);\n  background(220, 220, 240);\n  \u002F\u002F Apresenta a imagem na janela do programa\n  image(figura, 0, 0);\n}\n","js",[220,246,247,264,271,287,294,324,330,335,347,369,394,400,424],{"__ignoreMap":5},[248,249,252,256,260],"span",{"class":250,"line":251},"line",1,[248,253,255],{"class":254},"spNyl","let",[248,257,259],{"class":258},"sTEyZ"," figura",[248,261,263],{"class":262},"sMK4o",";\n",[248,265,267],{"class":250,"line":266},2,[248,268,270],{"emptyLinePlaceholder":269},true,"\n",[248,272,274,277,281,284],{"class":250,"line":273},3,[248,275,276],{"class":254},"function",[248,278,280],{"class":279},"s2Zo4"," preload",[248,282,283],{"class":262},"()",[248,285,286],{"class":262}," {\n",[248,288,290],{"class":250,"line":289},4,[248,291,293],{"class":292},"sHwdD","  \u002F\u002F Carrega a figura a partir do caminho do arquivo\n",[248,295,297,300,303,306,310,313,317,319,322],{"class":250,"line":296},5,[248,298,299],{"class":258},"  figura",[248,301,302],{"class":262}," =",[248,304,305],{"class":279}," loadImage",[248,307,309],{"class":308},"swJcz","(",[248,311,312],{"class":262},"'",[248,314,316],{"class":315},"sfazB","minha_figura.svg",[248,318,312],{"class":262},[248,320,321],{"class":308},")",[248,323,263],{"class":262},[248,325,327],{"class":250,"line":326},6,[248,328,329],{"class":262},"}\n",[248,331,333],{"class":250,"line":332},7,[248,334,270],{"emptyLinePlaceholder":269},[248,336,338,340,343,345],{"class":250,"line":337},8,[248,339,276],{"class":254},[248,341,342],{"class":279}," setup",[248,344,283],{"class":262},[248,346,286],{"class":262},[248,348,350,353,355,359,362,365,367],{"class":250,"line":349},9,[248,351,352],{"class":279},"  createCanvas",[248,354,309],{"class":308},[248,356,358],{"class":357},"sbssI","400",[248,360,361],{"class":262},",",[248,363,364],{"class":357}," 400",[248,366,321],{"class":308},[248,368,263],{"class":262},[248,370,372,375,377,380,382,385,387,390,392],{"class":250,"line":371},10,[248,373,374],{"class":279},"  background",[248,376,309],{"class":308},[248,378,379],{"class":357},"220",[248,381,361],{"class":262},[248,383,384],{"class":357}," 220",[248,386,361],{"class":262},[248,388,389],{"class":357}," 240",[248,391,321],{"class":308},[248,393,263],{"class":262},[248,395,397],{"class":250,"line":396},11,[248,398,399],{"class":292},"  \u002F\u002F Apresenta a imagem na janela do programa\n",[248,401,403,406,408,411,413,416,418,420,422],{"class":250,"line":402},12,[248,404,405],{"class":279},"  image",[248,407,309],{"class":308},[248,409,410],{"class":258},"figura",[248,412,361],{"class":262},[248,414,415],{"class":357}," 0",[248,417,361],{"class":262},[248,419,415],{"class":357},[248,421,321],{"class":308},[248,423,263],{"class":262},[248,425,427],{"class":250,"line":426},13,[248,428,329],{"class":262},[430,431],"p5-sketch",{"code":432},"let figura;\n\nfunction preload() {\n  const svg = `\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"200\" height=\"200\">\n    \u003Cpolygon points=\"100,10 190,150 10,150\" fill=\"tomato\" stroke=\"black\" stroke-width=\"4\"\u002F>\n  \u003C\u002Fsvg>`;\n  figura = loadImage('data:image\u002Fsvg+xml;base64,' + btoa(svg));\n}\n\nfunction setup() {\n  createCanvas(400, 400);\n  background(220, 220, 240);\n  image(figura, 0, 0);\n}\n",[189,434,435,436,439,440,442,443,445],{},"Para carregar um arquivo SVG próprio, basta colocá-lo na pasta do seu projeto (em geral dentro de uma subpasta como ",[220,437,438],{},"assets",") e referenciar seu caminho relativo em ",[220,441,222],{},", dentro de ",[220,444,226],{},", como no exemplo acima.",[189,447,448,449,452,453,456],{},"Na forma apresentada, a função ",[220,450,451],{},"image()"," recebeu três parâmetros: a variável com a imagem\u002Fdesenho 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 ",[220,454,455],{},"rect()","). Nesse caso, o desenho é apresentado em seu tamanho original.",[189,458,459,460,462],{},"Também é possível especificar mais dois parâmetros para a função ",[220,461,451],{},", indicando a largura e altura do desenho. Por exemplo, se modificarmos a última linha do programa anterior para:",[233,464,465,466],{},"Código - Exibindo o desenho vetorial com dimensões diferentes das originais",[237,467,468],{"v-slot:code":5},[240,469,471],{"className":242,"code":470,"language":244,"meta":5,"style":5},"function setup() {\n  createCanvas(400, 400);\n  background(220, 220, 240);\n  image(figura, 0, 0, 200, 300);\n}\n",[220,472,473,483,499,519,549],{"__ignoreMap":5},[248,474,475,477,479,481],{"class":250,"line":251},[248,476,276],{"class":254},[248,478,342],{"class":279},[248,480,283],{"class":262},[248,482,286],{"class":262},[248,484,485,487,489,491,493,495,497],{"class":250,"line":266},[248,486,352],{"class":279},[248,488,309],{"class":308},[248,490,358],{"class":357},[248,492,361],{"class":262},[248,494,364],{"class":357},[248,496,321],{"class":308},[248,498,263],{"class":262},[248,500,501,503,505,507,509,511,513,515,517],{"class":250,"line":273},[248,502,374],{"class":279},[248,504,309],{"class":308},[248,506,379],{"class":357},[248,508,361],{"class":262},[248,510,384],{"class":357},[248,512,361],{"class":262},[248,514,389],{"class":357},[248,516,321],{"class":308},[248,518,263],{"class":262},[248,520,521,523,525,527,529,531,533,535,537,540,542,545,547],{"class":250,"line":289},[248,522,405],{"class":279},[248,524,309],{"class":308},[248,526,410],{"class":258},[248,528,361],{"class":262},[248,530,415],{"class":357},[248,532,361],{"class":262},[248,534,415],{"class":357},[248,536,361],{"class":262},[248,538,539],{"class":357}," 200",[248,541,361],{"class":262},[248,543,544],{"class":357}," 300",[248,546,321],{"class":308},[248,548,263],{"class":262},[248,550,551],{"class":250,"line":296},[248,552,329],{"class":262},[430,554],{"code":555},"let figura;\n\nfunction preload() {\n  const svg = `\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"200\" height=\"200\">\n    \u003Cpolygon points=\"100,10 190,150 10,150\" fill=\"tomato\" stroke=\"black\" stroke-width=\"4\"\u002F>\n  \u003C\u002Fsvg>`;\n  figura = loadImage('data:image\u002Fsvg+xml;base64,' + btoa(svg));\n}\n\nfunction setup() {\n  createCanvas(400, 400);\n  background(220, 220, 240);\n  image(figura, 0, 0, 200, 300);\n}\n",[189,557,558],{},"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.",[560,561,562,567,570],"blockquote",{},[189,563,564],{},[212,565,566],{},"Atividade 1",[189,568,569],{},"Crie um desenho vetorial em um editor (por exemplo, Inkscape ou Adobe Illustrator) e modifique o Código para apresentar esse novo desenho, carregando-o de um arquivo (em vez do SVG embutido no código).",[189,571,572,573,578],{},"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 ",[201,574,577],{"href":575,"rel":576},"https:\u002F\u002Ffreesvg.org\u002F",[205],"freesvg.org",".",[560,580,581,586],{},[189,582,583],{},[212,584,585],{},"Atividade 2",[189,587,588],{},"Modifique o Código para apresentar o desenho do tamanho da janela.",[560,590,591,596,599],{},[189,592,593],{},[212,594,595],{},"Atividade 3",[189,597,598],{},"Modifique o Código para obter um resultado como mostrado a seguir, utilizando um dos comandos de repetição estudados no capítulo anterior.",[189,600,601],{},[602,603],"img",{"alt":604,"src":605},"Resultado esperado da atividade 3",".\u002Fimg\u002F03-desenhos-vetoriais\u002Fativ3-resultado.png",[607,608,609],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":266,"depth":266,"links":611},[],null,"Aprenda a usar arquivos SVG","md",{},{"title":158,"description":613},"MiLfvKW4AyZkwBigzk88inJ8mXkUDMQAFBvNHQGLt-g",[619,621],{"title":148,"path":149,"stem":150,"description":620,"children":-1},"As funções setup() e draw(), variáveis locais e globais, animações e tratamento de eventos de mouse e teclado em p5.js",{"title":160,"path":161,"stem":162,"description":622,"children":-1},"Veja como exportar o conteúdo do Canvas em SVG",1786195204192]