[{"data":1,"prerenderedAt":368},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-geometrias-triangulo":139,"-pcs3021-geometrias-triangulo-surround":363},[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":32,"body":141,"categoria":356,"creditoLink":356,"creditos":356,"descricao":356,"description":357,"eaulas":356,"extension":358,"meta":359,"navigation":360,"path":33,"seo":361,"stem":34,"video":356,"youtube":356,"youtubeLink":356,"__hash__":362},"docs\u002Fpcs3021\u002F2.geometrias\u002F3.triangulo.md",{"type":142,"value":143,"toc":352},"minimark",[144,153,168,173,231,234,237,330,333,337,348],[145,146,147,148,152],"p",{},"O triângulo é uma forma geométrica bastante versátil e frequente em desenhos digitais. No p5.js, ele é criado com o comando ",[149,150,151],"code",{},"triangle()",", que conecta três pontos por segmentos de reta, formando a figura fechada.",[145,154,155,156,159,160,163,164,167],{},"O comando ",[149,157,158],{},"triangle(x1, y1, x2, y2, x3, y3)"," recebe seis parâmetros, que correspondem às coordenadas dos três vértices do triângulo. Cada par de valores representa a posição horizontal (",[149,161,162],{},"x",") e vertical (",[149,165,166],{},"y",") de um vértice. Os três pontos são conectados automaticamente, sem que seja necessário indicar o fechamento da forma.",[169,170,172],"h2",{"id":171},"estrutura-básica","Estrutura básica",[174,175,176,177],"code-preview",{},"Código 4.1 - estrutura geral para definição de triângulos no p5.js",[178,179,180],"template",{"v-slot:code":5},[181,182,186],"pre",{"className":183,"code":184,"language":185,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","triangle(x1, y1, x2, y2, x3, y3);\n","js",[149,187,188],{"__ignoreMap":5},[189,190,193,197,201,205,208,210,213,215,218,220,223,225,228],"span",{"class":191,"line":192},"line",1,[189,194,196],{"class":195},"s2Zo4","triangle",[189,198,200],{"class":199},"sTEyZ","(x1",[189,202,204],{"class":203},"sMK4o",",",[189,206,207],{"class":199}," y1",[189,209,204],{"class":203},[189,211,212],{"class":199}," x2",[189,214,204],{"class":203},[189,216,217],{"class":199}," y2",[189,219,204],{"class":203},[189,221,222],{"class":199}," x3",[189,224,204],{"class":203},[189,226,227],{"class":199}," y3)",[189,229,230],{"class":203},";\n",[169,232,15],{"id":233},"exemplo",[145,235,236],{},"Para um exemplo de como utilizar esse comando, teste o Código 4.2 e veja a figura formada.",[174,238,239,240],{},"Código 4.2 - Exemplo de definição de um triângulo",[178,241,242],{"v-slot:code":5},[181,243,245],{"className":183,"code":244,"language":185,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  triangle(400,100,200,450,600,450);\n}\n",[149,246,247,262,286,324],{"__ignoreMap":5},[189,248,249,253,256,259],{"class":191,"line":192},[189,250,252],{"class":251},"spNyl","function",[189,254,255],{"class":195}," setup",[189,257,258],{"class":203},"()",[189,260,261],{"class":203}," {\n",[189,263,265,268,272,276,278,281,284],{"class":191,"line":264},2,[189,266,267],{"class":195},"  createCanvas",[189,269,271],{"class":270},"swJcz","(",[189,273,275],{"class":274},"sbssI","800",[189,277,204],{"class":203},[189,279,280],{"class":274},"600",[189,282,283],{"class":270},")",[189,285,230],{"class":203},[189,287,289,292,294,297,299,302,304,307,309,312,314,316,318,320,322],{"class":191,"line":288},3,[189,290,291],{"class":195},"  triangle",[189,293,271],{"class":270},[189,295,296],{"class":274},"400",[189,298,204],{"class":203},[189,300,301],{"class":274},"100",[189,303,204],{"class":203},[189,305,306],{"class":274},"200",[189,308,204],{"class":203},[189,310,311],{"class":274},"450",[189,313,204],{"class":203},[189,315,280],{"class":274},[189,317,204],{"class":203},[189,319,311],{"class":274},[189,321,283],{"class":270},[189,323,230],{"class":203},[189,325,327],{"class":191,"line":326},4,[189,328,329],{"class":203},"}\n",[331,332],"p5-sketch",{"code":244},[334,335,336],"tip",{},"A ordem em que você informa os vértices não altera o triângulo desenhado, já que os três pontos sempre são conectados entre si. No entanto, escolher uma ordem lógica (por exemplo, topo, base esquerda, base direita) ajuda a manter o código legível e fácil de ajustar.",[145,338,339,340,343,344,347],{},"Experimente combinar vários triângulos para compor formas mais complexas, como estrelas ou setas. Como o triângulo é uma das primitivas mais simples, muitos desenhos elaborados podem ser construídos apenas a partir da repetição e do posicionamento estratégico dessa forma. Para casos com mais de três vértices, considere usar ",[149,341,342],{},"beginShape()"," e ",[149,345,346],{},"vertex()",". Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[349,350,351],"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 .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":264,"depth":264,"links":353},[354,355],{"id":171,"depth":264,"text":172},{"id":233,"depth":264,"text":15},null,"Veja como criar triângulos","md",{},true,{"title":32,"description":357},"42oiAA5kiOSZEFqviAYnC_nV13YIS4tGdpETHaxzLdU",[364,366],{"title":28,"path":29,"stem":30,"description":365,"children":-1},"Veja como criar elipses e círculos",{"title":36,"path":37,"stem":38,"description":367,"children":-1},"Veja como criar linhas retas",1784150367219]