[{"data":1,"prerenderedAt":578},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-imagens":139,"-pcs3021-imagens-surround":574},[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":98,"body":141,"categoria":568,"creditoLink":568,"creditos":568,"descricao":568,"description":569,"eaulas":568,"extension":570,"meta":571,"navigation":225,"path":94,"seo":572,"stem":95,"video":568,"youtube":568,"youtubeLink":568,"__hash__":573},"docs\u002Fpcs3021\u002F4.imagens\u002F1.index.md",{"type":142,"value":143,"toc":566},"minimark",[144,148,164,172,188,385,389,402,413,419,509,512,515,535,545,562],[145,146,147],"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.",[145,149,150,151,155,156,163],{},"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 ",[152,153,154],"em",{},"softwares",", tais como Adobe Illustrator, Figma e ",[157,158,162],"a",{"href":159,"rel":160},"https:\u002F\u002Finkscape.org\u002F",[161],"nofollow","Inkscape"," fornecem interfaces visuais para a criação dessas imagens.",[165,166,167,171],"note",{},[168,169,170],"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.",[145,173,174,175,179,180,183,184,187],{},"Em p5.js, um arquivo SVG é carregado da mesma forma que uma imagem comum, usando a função ",[176,177,178],"code",{},"loadImage()"," dentro da função especial ",[176,181,182],{},"preload()"," — que roda antes de ",[176,185,186],{},"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:",[189,190,191,192],"code-preview",{},"Código 3.1 - Carregando e exibindo um desenho vetorial (SVG)",[193,194,195],"template",{"v-slot:code":5},[196,197,201],"pre",{"className":198,"code":199,"language":200,"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",[176,202,203,220,227,243,250,280,286,291,303,325,350,356,380],{"__ignoreMap":5},[204,205,208,212,216],"span",{"class":206,"line":207},"line",1,[204,209,211],{"class":210},"spNyl","let",[204,213,215],{"class":214},"sTEyZ"," figura",[204,217,219],{"class":218},"sMK4o",";\n",[204,221,223],{"class":206,"line":222},2,[204,224,226],{"emptyLinePlaceholder":225},true,"\n",[204,228,230,233,237,240],{"class":206,"line":229},3,[204,231,232],{"class":210},"function",[204,234,236],{"class":235},"s2Zo4"," preload",[204,238,239],{"class":218},"()",[204,241,242],{"class":218}," {\n",[204,244,246],{"class":206,"line":245},4,[204,247,249],{"class":248},"sHwdD","  \u002F\u002F Carrega a figura a partir do caminho do arquivo\n",[204,251,253,256,259,262,266,269,273,275,278],{"class":206,"line":252},5,[204,254,255],{"class":214},"  figura",[204,257,258],{"class":218}," =",[204,260,261],{"class":235}," loadImage",[204,263,265],{"class":264},"swJcz","(",[204,267,268],{"class":218},"'",[204,270,272],{"class":271},"sfazB","minha_figura.svg",[204,274,268],{"class":218},[204,276,277],{"class":264},")",[204,279,219],{"class":218},[204,281,283],{"class":206,"line":282},6,[204,284,285],{"class":218},"}\n",[204,287,289],{"class":206,"line":288},7,[204,290,226],{"emptyLinePlaceholder":225},[204,292,294,296,299,301],{"class":206,"line":293},8,[204,295,232],{"class":210},[204,297,298],{"class":235}," setup",[204,300,239],{"class":218},[204,302,242],{"class":218},[204,304,306,309,311,315,318,321,323],{"class":206,"line":305},9,[204,307,308],{"class":235},"  createCanvas",[204,310,265],{"class":264},[204,312,314],{"class":313},"sbssI","400",[204,316,317],{"class":218},",",[204,319,320],{"class":313}," 400",[204,322,277],{"class":264},[204,324,219],{"class":218},[204,326,328,331,333,336,338,341,343,346,348],{"class":206,"line":327},10,[204,329,330],{"class":235},"  background",[204,332,265],{"class":264},[204,334,335],{"class":313},"220",[204,337,317],{"class":218},[204,339,340],{"class":313}," 220",[204,342,317],{"class":218},[204,344,345],{"class":313}," 240",[204,347,277],{"class":264},[204,349,219],{"class":218},[204,351,353],{"class":206,"line":352},11,[204,354,355],{"class":248},"  \u002F\u002F Apresenta a imagem na janela do programa\n",[204,357,359,362,364,367,369,372,374,376,378],{"class":206,"line":358},12,[204,360,361],{"class":235},"  image",[204,363,265],{"class":264},[204,365,366],{"class":214},"figura",[204,368,317],{"class":218},[204,370,371],{"class":313}," 0",[204,373,317],{"class":218},[204,375,371],{"class":313},[204,377,277],{"class":264},[204,379,219],{"class":218},[204,381,383],{"class":206,"line":382},13,[204,384,285],{"class":218},[386,387],"p5-sketch",{"code":388},"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",[145,390,391,392,395,396,398,399,401],{},"Para carregar um arquivo SVG próprio, basta colocá-lo na pasta do seu projeto (em geral dentro de uma subpasta como ",[176,393,394],{},"assets",") e referenciar seu caminho relativo em ",[176,397,178],{},", dentro de ",[176,400,182],{},", como no exemplo acima.",[145,403,404,405,408,409,412],{},"Na forma apresentada, a função ",[176,406,407],{},"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 ",[176,410,411],{},"rect()","). Nesse caso, o desenho é apresentado em seu tamanho original.",[145,414,415,416,418],{},"Também é possível especificar mais dois parâmetros para a função ",[176,417,407],{},", indicando a largura e altura do desenho. Por exemplo, se modificarmos a última linha do programa anterior para:",[189,420,421,422],{},"Código 3.2 - Exibindo o desenho vetorial com dimensões diferentes das originais",[193,423,424],{"v-slot:code":5},[196,425,427],{"className":198,"code":426,"language":200,"meta":5,"style":5},"function setup() {\n  createCanvas(400, 400);\n  background(220, 220, 240);\n  image(figura, 0, 0, 200, 300);\n}\n",[176,428,429,439,455,475,505],{"__ignoreMap":5},[204,430,431,433,435,437],{"class":206,"line":207},[204,432,232],{"class":210},[204,434,298],{"class":235},[204,436,239],{"class":218},[204,438,242],{"class":218},[204,440,441,443,445,447,449,451,453],{"class":206,"line":222},[204,442,308],{"class":235},[204,444,265],{"class":264},[204,446,314],{"class":313},[204,448,317],{"class":218},[204,450,320],{"class":313},[204,452,277],{"class":264},[204,454,219],{"class":218},[204,456,457,459,461,463,465,467,469,471,473],{"class":206,"line":229},[204,458,330],{"class":235},[204,460,265],{"class":264},[204,462,335],{"class":313},[204,464,317],{"class":218},[204,466,340],{"class":313},[204,468,317],{"class":218},[204,470,345],{"class":313},[204,472,277],{"class":264},[204,474,219],{"class":218},[204,476,477,479,481,483,485,487,489,491,493,496,498,501,503],{"class":206,"line":245},[204,478,361],{"class":235},[204,480,265],{"class":264},[204,482,366],{"class":214},[204,484,317],{"class":218},[204,486,371],{"class":313},[204,488,317],{"class":218},[204,490,371],{"class":313},[204,492,317],{"class":218},[204,494,495],{"class":313}," 200",[204,497,317],{"class":218},[204,499,500],{"class":313}," 300",[204,502,277],{"class":264},[204,504,219],{"class":218},[204,506,507],{"class":206,"line":252},[204,508,285],{"class":218},[386,510],{"code":511},"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",[145,513,514],{},"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.",[516,517,518,523,526],"blockquote",{},[145,519,520],{},[168,521,522],{},"Atividade 1",[145,524,525],{},"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).",[145,527,528,529,534],{},"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 ",[157,530,533],{"href":531,"rel":532},"https:\u002F\u002Ffreesvg.org\u002F",[161],"freesvg.org",".",[516,536,537,542],{},[145,538,539],{},[168,540,541],{},"Atividade 2",[145,543,544],{},"Modifique o Código 3.1 para apresentar o desenho do tamanho da janela.",[516,546,547,552,555],{},[145,548,549],{},[168,550,551],{},"Atividade 3",[145,553,554],{},"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.",[145,556,557],{},[558,559],"img",{"alt":560,"src":561},"Resultado esperado da atividade 3",".\u002Fimg\u002F03-desenhos-vetoriais\u002Fativ3-resultado.png",[563,564,565],"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":222,"depth":222,"links":567},[],null,"Aprenda a usar arquivos SVG","md",{},{"title":98,"description":569},"HYUaE0OH-K9owHMiEOolW51Vlu3sPDYudNyFXjM0MJk",[575,576],{"title":89,"path":90,"stem":91,"description":568,"children":-1},{"title":100,"path":101,"stem":102,"description":577,"children":-1},"Veja como exportar o conteúdo do Canvas em SVG",1784150368598]