[{"data":1,"prerenderedAt":461},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-geometrias":21,"-pcs3021-geometrias-surround":459},[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],{"title":15,"path":11,"stem":16},"Exemplo","pcs3021\u002Findex",{"title":18,"path":19,"stem":20},"Geometrias","\u002Fpcs3021\u002Fgeometrias","pcs3021\u002Fgeometrias",{"id":22,"title":18,"body":23,"categoria":451,"creditoLink":451,"creditos":451,"descricao":451,"description":452,"eaulas":453,"extension":454,"meta":455,"navigation":456,"path":19,"seo":457,"stem":20,"video":451,"youtube":451,"youtubeLink":451,"__hash__":458},"docs\u002Fpcs3021\u002Fgeometrias.md",{"type":24,"value":25,"toc":447},"minimark",[26,35,59,65,70,181,184,187,402,413,428,443],[27,28,29,30,34],"p",{},"Vimos anteriormente como desenhar algumas formas geométricas primitivas na plataforma Processing, tais como retângulos, triângulos, círculos e linhas. É possível construir desenhos pela composição dessas formas, mas seria conveniente poder ",[31,32,33],"strong",{},"desenhar polígonos irregulares e com qualquer número de lados",".",[27,36,37,38,42,43,46,47,50,51,54,55,58],{},"Há uma maneira de criar desenhos no Processing em que basta indicar os pontos (vértices) da forma geométrica desejada, que serão conectados por segmentos de reta. Para isso, devemos indicar que vamos especificar uma forma geométrica, utilizando o comando ",[39,40,41],"code",{},"beginShape",". A partir daí, o comando ",[39,44,45],{},"vertex (x, y)"," deve ser utilizado para definir cada vértice da forma, na ordem em que devem ser conectados, informando sua posição horizontal (",[39,48,49],{},"x",") e vertical (",[39,52,53],{},"y","). Após a definição de todos os pontos da figura, devemos utilizar o comando ",[39,56,57],{},"endShape( )"," para sinalizar que a forma está concluída. O Código 4.1 ilustra uma sequência de comandos descrita neste parágrafo.",[60,61],"quiz",{":alternativas":62,":correta":63,"pergunta":64},"[\"Processing não permite desenhar polígonos arbitrários; só há funções para formas primitivas fixas como rect() e ellipse().\",\"A função setup() é executada uma única vez no início, enquanto draw() é chamada repetidamente em loop.\",\"Processing foi criado por Casey Reas e Ben Fry no MIT Media Lab, com foco em ensino de programação para artistas e designers.\",\"O sistema de coordenadas tem a origem (0,0) no canto superior esquerdo, com o eixo Y crescendo para baixo.\"]","0","Analise as afirmações a seguir e identifique qual contém uma informação INCORRETA sobre o Processing",[66,67,69],"h2",{"id":68},"estrutura-básica","Estrutura básica",[71,72,73,74],"code-preview",{},"Código 4.1 - estrutura geral para definição de formas poligonais no Processing",[75,76,77],"template",{"v-slot:code":5},[78,79,83],"pre",{"className":80,"code":81,"language":82,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","beginShape();\n    vertex(x1,y1);\n    vertex(x2,y2);\n    vertex(x3,y3);\n    vertex(x4,y4);\n    \u002F\u002F etc;\nendShape(CLOSE);\n","js",[39,84,85,101,118,133,148,163,170],{"__ignoreMap":5},[86,87,90,93,97],"span",{"class":88,"line":89},"line",1,[86,91,41],{"class":92},"s2Zo4",[86,94,96],{"class":95},"sTEyZ","()",[86,98,100],{"class":99},"sMK4o",";\n",[86,102,104,107,110,113,116],{"class":88,"line":103},2,[86,105,106],{"class":92},"    vertex",[86,108,109],{"class":95},"(x1",[86,111,112],{"class":99},",",[86,114,115],{"class":95},"y1)",[86,117,100],{"class":99},[86,119,121,123,126,128,131],{"class":88,"line":120},3,[86,122,106],{"class":92},[86,124,125],{"class":95},"(x2",[86,127,112],{"class":99},[86,129,130],{"class":95},"y2)",[86,132,100],{"class":99},[86,134,136,138,141,143,146],{"class":88,"line":135},4,[86,137,106],{"class":92},[86,139,140],{"class":95},"(x3",[86,142,112],{"class":99},[86,144,145],{"class":95},"y3)",[86,147,100],{"class":99},[86,149,151,153,156,158,161],{"class":88,"line":150},5,[86,152,106],{"class":92},[86,154,155],{"class":95},"(x4",[86,157,112],{"class":99},[86,159,160],{"class":95},"y4)",[86,162,100],{"class":99},[86,164,166],{"class":88,"line":165},6,[86,167,169],{"class":168},"sHwdD","    \u002F\u002F etc;\n",[86,171,173,176,179],{"class":88,"line":172},7,[86,174,175],{"class":92},"endShape",[86,177,178],{"class":95},"(CLOSE)",[86,180,100],{"class":99},[66,182,15],{"id":183},"exemplo",[27,185,186],{},"Para um exemplo de como utilizar esses comandos, teste o Código 4.2 e veja que figura é formada.",[71,188,189,190],{},"Código 4.2 - Exemplo de definição de uma forma geométrica utilizando vértices",[75,191,192],{"v-slot:code":5},[78,193,195],{"className":80,"code":194,"language":82,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  beginShape();\n    vertex(300,100);\n    vertex(400,200);\n    vertex(500,100);\n    vertex(600,200);\n    vertex(600,250);\n    vertex(400,500);\n    vertex(200,250);\n    vertex(200,200);\n  endShape(CLOSE);\n}\n",[39,196,197,211,234,243,261,279,296,312,330,347,364,381,396],{"__ignoreMap":5},[86,198,199,203,206,208],{"class":88,"line":89},[86,200,202],{"class":201},"spNyl","function",[86,204,205],{"class":92}," setup",[86,207,96],{"class":99},[86,209,210],{"class":99}," {\n",[86,212,213,216,220,224,226,229,232],{"class":88,"line":103},[86,214,215],{"class":92},"  createCanvas",[86,217,219],{"class":218},"swJcz","(",[86,221,223],{"class":222},"sbssI","800",[86,225,112],{"class":99},[86,227,228],{"class":222},"600",[86,230,231],{"class":218},")",[86,233,100],{"class":99},[86,235,236,239,241],{"class":88,"line":120},[86,237,238],{"class":92},"  beginShape",[86,240,96],{"class":218},[86,242,100],{"class":99},[86,244,245,247,249,252,254,257,259],{"class":88,"line":135},[86,246,106],{"class":92},[86,248,219],{"class":218},[86,250,251],{"class":222},"300",[86,253,112],{"class":99},[86,255,256],{"class":222},"100",[86,258,231],{"class":218},[86,260,100],{"class":99},[86,262,263,265,267,270,272,275,277],{"class":88,"line":150},[86,264,106],{"class":92},[86,266,219],{"class":218},[86,268,269],{"class":222},"400",[86,271,112],{"class":99},[86,273,274],{"class":222},"200",[86,276,231],{"class":218},[86,278,100],{"class":99},[86,280,281,283,285,288,290,292,294],{"class":88,"line":165},[86,282,106],{"class":92},[86,284,219],{"class":218},[86,286,287],{"class":222},"500",[86,289,112],{"class":99},[86,291,256],{"class":222},[86,293,231],{"class":218},[86,295,100],{"class":99},[86,297,298,300,302,304,306,308,310],{"class":88,"line":172},[86,299,106],{"class":92},[86,301,219],{"class":218},[86,303,228],{"class":222},[86,305,112],{"class":99},[86,307,274],{"class":222},[86,309,231],{"class":218},[86,311,100],{"class":99},[86,313,315,317,319,321,323,326,328],{"class":88,"line":314},8,[86,316,106],{"class":92},[86,318,219],{"class":218},[86,320,228],{"class":222},[86,322,112],{"class":99},[86,324,325],{"class":222},"250",[86,327,231],{"class":218},[86,329,100],{"class":99},[86,331,333,335,337,339,341,343,345],{"class":88,"line":332},9,[86,334,106],{"class":92},[86,336,219],{"class":218},[86,338,269],{"class":222},[86,340,112],{"class":99},[86,342,287],{"class":222},[86,344,231],{"class":218},[86,346,100],{"class":99},[86,348,350,352,354,356,358,360,362],{"class":88,"line":349},10,[86,351,106],{"class":92},[86,353,219],{"class":218},[86,355,274],{"class":222},[86,357,112],{"class":99},[86,359,325],{"class":222},[86,361,231],{"class":218},[86,363,100],{"class":99},[86,365,367,369,371,373,375,377,379],{"class":88,"line":366},11,[86,368,106],{"class":92},[86,370,219],{"class":218},[86,372,274],{"class":222},[86,374,112],{"class":99},[86,376,274],{"class":222},[86,378,231],{"class":218},[86,380,100],{"class":99},[86,382,384,387,389,392,394],{"class":88,"line":383},12,[86,385,386],{"class":92},"  endShape",[86,388,219],{"class":218},[86,390,391],{"class":95},"CLOSE",[86,393,231],{"class":218},[86,395,100],{"class":99},[86,397,399],{"class":88,"line":398},13,[86,400,401],{"class":99},"}\n",[71,403,404,405],{},"Código 4.2 - Resultado visual",[75,406,407],{"v-slot:code":5},[408,409],"iframe",{"className":410,"src":412},[411],"video","https:\u002F\u002Feditor.p5js.org\u002Frenan-vinicius\u002Ffull\u002F5WlGTc01w",[414,415,416,417,419,420,423,424,427],"tip",{},"O parâmetro ",[39,418,391],{}," passado ao comando ",[39,421,422],{},"endShape(CLOSE)"," faz com que o último ponto indicado na sequência seja conectado por um segmento de reta ao primeiro. Dessa forma, vamos obter uma forma poligonal fechada, sem precisar adicionar um comando ",[39,425,426],{},"vertex()"," repetindo o primeiro ponto.",[27,429,430,431,434,435,438,439,442],{},"Experimente alterar a segunda linha do Código 4.2 para ",[39,432,433],{},"beginShape(POINTS)"," e veja que, assim, apenas os pontos vão ser desenhados, sem que eles sejam ligados por segmentos de reta. O comando ",[39,436,437],{},"strokeWeight"," pode ser usado para aumentar o tamanho da marcação desses pontos. Além de ",[39,440,441],{},"POINTS",", o comando beginShape também aceita outras opções como LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, e QUAD_STRIP. Cada uma dessas opções altera a forma como a sequência de vértices é interpretada. Mais detalhes e exemplos podem ser encontrados na referência do Processing.",[444,445,446],"style",{},"html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .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);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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}",{"title":5,"searchDepth":103,"depth":103,"links":448},[449,450],{"id":68,"depth":103,"text":69},{"id":183,"depth":103,"text":15},null,"Veja como criar uma forma geométrica customizada","17258","md",{},true,{"title":18,"description":452},"WbJlFYcVuegXZPt6JiALuTq-lz6Gcha8nbHZ3P3dXAk",[460,451],{"title":15,"path":11,"stem":16,"description":452,"children":-1},1783471988532]