[{"data":1,"prerenderedAt":733},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-geometrias-arco":183,"-pcs3021-geometrias-arco-surround":728},[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":59,"body":185,"categoria":722,"creditoLink":722,"creditos":722,"descricao":722,"description":723,"eaulas":722,"extension":724,"meta":725,"navigation":558,"path":60,"seo":726,"stem":61,"video":722,"youtube":722,"youtubeLink":722,"__hash__":727},"docs\u002Fpcs3021\u002F2.geometrias\u002F7.arco.md",{"type":186,"value":187,"toc":717},"minimark",[188,197,236,241,309,313,316,441,444,466,470,491,694,696,713],[189,190,191,192,196],"p",{},"O arco é um segmento de uma elipse, definido por um ângulo inicial e um ângulo final. No p5.js, ele é criado com o comando ",[193,194,195],"code",{},"arc()",", útil para representar setores circulares, indicadores de progresso, relógios ou qualquer forma que dependa de uma porção de curva.",[189,198,199,200,203,204,207,208,211,212,215,216,219,220,223,224,227,228,231,232,235],{},"O comando ",[193,201,202],{},"arc(x, y, w, h, start, stop, [mode], [detail])"," recebe as coordenadas do centro (",[193,205,206],{},"x",", ",[193,209,210],{},"y","), a largura (",[193,213,214],{},"w",") e a altura (",[193,217,218],{},"h",") da elipse que contém o arco, e os ângulos inicial (",[193,221,222],{},"start",") e final (",[193,225,226],{},"stop","), medidos em radianos. Os parâmetros ",[193,229,230],{},"mode"," e ",[193,233,234],{},"detail"," são opcionais e controlam, respectivamente, a forma como o arco é fechado e o nível de detalhe da curva.",[237,238,240],"h2",{"id":239},"estrutura-básica","Estrutura básica",[242,243,244,245],"code-preview",{},"Código - estrutura geral para definição de arcos no p5.js",[246,247,248],"template",{"v-slot:code":5},[249,250,254],"pre",{"className":251,"code":252,"language":253,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","arc(x, y, w, h, start, stop, [mode], [detail]);\n","js",[193,255,256],{"__ignoreMap":5},[257,258,261,265,269,273,276,278,281,283,286,288,291,293,296,298,301,303,306],"span",{"class":259,"line":260},"line",1,[257,262,264],{"class":263},"s2Zo4","arc",[257,266,268],{"class":267},"sTEyZ","(x",[257,270,272],{"class":271},"sMK4o",",",[257,274,275],{"class":267}," y",[257,277,272],{"class":271},[257,279,280],{"class":267}," w",[257,282,272],{"class":271},[257,284,285],{"class":267}," h",[257,287,272],{"class":271},[257,289,290],{"class":267}," start",[257,292,272],{"class":271},[257,294,295],{"class":267}," stop",[257,297,272],{"class":271},[257,299,300],{"class":267}," [mode]",[257,302,272],{"class":271},[257,304,305],{"class":267}," [detail])",[257,307,308],{"class":271},";\n",[237,310,312],{"id":311},"exemplo","Exemplo",[189,314,315],{},"Para um exemplo de como utilizar esse comando, teste o Código e veja o arco formado.",[242,317,318,319],{},"Código - Exemplo de definição de um arco",[246,320,321],{"v-slot:code":5},[249,322,324],{"className":251,"code":323,"language":253,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  noFill();\n  strokeWeight(4);\n  arc(400, 300, 300, 200, 0, PI + HALF_PI);\n}\n",[193,325,326,341,365,375,390,435],{"__ignoreMap":5},[257,327,328,332,335,338],{"class":259,"line":260},[257,329,331],{"class":330},"spNyl","function",[257,333,334],{"class":263}," setup",[257,336,337],{"class":271},"()",[257,339,340],{"class":271}," {\n",[257,342,344,347,351,355,357,360,363],{"class":259,"line":343},2,[257,345,346],{"class":263},"  createCanvas",[257,348,350],{"class":349},"swJcz","(",[257,352,354],{"class":353},"sbssI","800",[257,356,272],{"class":271},[257,358,359],{"class":353},"600",[257,361,362],{"class":349},")",[257,364,308],{"class":271},[257,366,368,371,373],{"class":259,"line":367},3,[257,369,370],{"class":263},"  noFill",[257,372,337],{"class":349},[257,374,308],{"class":271},[257,376,378,381,383,386,388],{"class":259,"line":377},4,[257,379,380],{"class":263},"  strokeWeight",[257,382,350],{"class":349},[257,384,385],{"class":353},"4",[257,387,362],{"class":349},[257,389,308],{"class":271},[257,391,393,396,398,401,403,406,408,410,412,415,417,420,422,425,428,431,433],{"class":259,"line":392},5,[257,394,395],{"class":263},"  arc",[257,397,350],{"class":349},[257,399,400],{"class":353},"400",[257,402,272],{"class":271},[257,404,405],{"class":353}," 300",[257,407,272],{"class":271},[257,409,405],{"class":353},[257,411,272],{"class":271},[257,413,414],{"class":353}," 200",[257,416,272],{"class":271},[257,418,419],{"class":353}," 0",[257,421,272],{"class":271},[257,423,424],{"class":267}," PI",[257,426,427],{"class":271}," +",[257,429,430],{"class":267}," HALF_PI",[257,432,362],{"class":349},[257,434,308],{"class":271},[257,436,438],{"class":259,"line":437},6,[257,439,440],{"class":271},"}\n",[442,443],"p5-sketch",{"code":323},[445,446,447,448,231,450,452,453,207,456,207,459,231,462,465],"tip",{},"Os ângulos ",[193,449,222],{},[193,451,226],{}," são medidos em radianos, no sentido horário a partir do eixo horizontal. Em vez de calcular esses valores manualmente, use as constantes do p5.js, como ",[193,454,455],{},"PI",[193,457,458],{},"HALF_PI",[193,460,461],{},"QUARTER_PI",[193,463,464],{},"TWO_PI",", que tornam o código mais legível.",[237,467,469],{"id":468},"modos-de-fechamento","Modos de fechamento",[189,471,472,473,475,476,479,480,483,484,487,488,490],{},"O parâmetro ",[193,474,230],{}," define como as extremidades do arco se conectam ao centro da elipse. O p5.js oferece quatro opções: ",[193,477,478],{},"OPEN"," (o arco não é fechado), ",[193,481,482],{},"CHORD"," (as extremidades são ligadas por uma linha reta), ",[193,485,486],{},"PIE"," (as extremidades são ligadas ao centro, como uma fatia de pizza) e o padrão, quando nenhum modo é informado, que se comporta como ",[193,489,486],{}," quando há preenchimento.",[242,492,493,494],{},"Código - Exemplo com os modos OPEN, CHORD e PIE",[246,495,496],{"v-slot:code":5},[249,497,499],{"className":251,"code":498,"language":253,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  strokeWeight(2);\n  fill(200);\n\n  arc(150, 300, 180, 180, 0, PI + QUARTER_PI, OPEN);\n  arc(400, 300, 180, 180, 0, PI + QUARTER_PI, CHORD);\n  arc(650, 300, 180, 180, 0, PI + QUARTER_PI, PIE);\n}\n",[193,500,501,511,527,540,554,560,604,646,689],{"__ignoreMap":5},[257,502,503,505,507,509],{"class":259,"line":260},[257,504,331],{"class":330},[257,506,334],{"class":263},[257,508,337],{"class":271},[257,510,340],{"class":271},[257,512,513,515,517,519,521,523,525],{"class":259,"line":343},[257,514,346],{"class":263},[257,516,350],{"class":349},[257,518,354],{"class":353},[257,520,272],{"class":271},[257,522,359],{"class":353},[257,524,362],{"class":349},[257,526,308],{"class":271},[257,528,529,531,533,536,538],{"class":259,"line":367},[257,530,380],{"class":263},[257,532,350],{"class":349},[257,534,535],{"class":353},"2",[257,537,362],{"class":349},[257,539,308],{"class":271},[257,541,542,545,547,550,552],{"class":259,"line":377},[257,543,544],{"class":263},"  fill",[257,546,350],{"class":349},[257,548,549],{"class":353},"200",[257,551,362],{"class":349},[257,553,308],{"class":271},[257,555,556],{"class":259,"line":392},[257,557,559],{"emptyLinePlaceholder":558},true,"\n",[257,561,562,564,566,569,571,573,575,578,580,582,584,586,588,590,592,595,597,600,602],{"class":259,"line":437},[257,563,395],{"class":263},[257,565,350],{"class":349},[257,567,568],{"class":353},"150",[257,570,272],{"class":271},[257,572,405],{"class":353},[257,574,272],{"class":271},[257,576,577],{"class":353}," 180",[257,579,272],{"class":271},[257,581,577],{"class":353},[257,583,272],{"class":271},[257,585,419],{"class":353},[257,587,272],{"class":271},[257,589,424],{"class":267},[257,591,427],{"class":271},[257,593,594],{"class":267}," QUARTER_PI",[257,596,272],{"class":271},[257,598,599],{"class":267}," OPEN",[257,601,362],{"class":349},[257,603,308],{"class":271},[257,605,607,609,611,613,615,617,619,621,623,625,627,629,631,633,635,637,639,642,644],{"class":259,"line":606},7,[257,608,395],{"class":263},[257,610,350],{"class":349},[257,612,400],{"class":353},[257,614,272],{"class":271},[257,616,405],{"class":353},[257,618,272],{"class":271},[257,620,577],{"class":353},[257,622,272],{"class":271},[257,624,577],{"class":353},[257,626,272],{"class":271},[257,628,419],{"class":353},[257,630,272],{"class":271},[257,632,424],{"class":267},[257,634,427],{"class":271},[257,636,594],{"class":267},[257,638,272],{"class":271},[257,640,641],{"class":267}," CHORD",[257,643,362],{"class":349},[257,645,308],{"class":271},[257,647,649,651,653,656,658,660,662,664,666,668,670,672,674,676,678,680,682,685,687],{"class":259,"line":648},8,[257,650,395],{"class":263},[257,652,350],{"class":349},[257,654,655],{"class":353},"650",[257,657,272],{"class":271},[257,659,405],{"class":353},[257,661,272],{"class":271},[257,663,577],{"class":353},[257,665,272],{"class":271},[257,667,577],{"class":353},[257,669,272],{"class":271},[257,671,419],{"class":353},[257,673,272],{"class":271},[257,675,424],{"class":267},[257,677,427],{"class":271},[257,679,594],{"class":267},[257,681,272],{"class":271},[257,683,684],{"class":267}," PIE",[257,686,362],{"class":349},[257,688,308],{"class":271},[257,690,692],{"class":259,"line":691},9,[257,693,440],{"class":271},[442,695],{"code":498},[189,697,698,699,701,702,705,706,709,710,712],{},"Experimente animar o ângulo ",[193,700,226],{}," ao longo do tempo, usando uma variável global incrementada em ",[193,703,704],{},"draw()",", para criar indicadores de carregamento ou ponteiros de relógio. O arco também é a base conceitual usada internamente pelo p5.js para desenhar círculos e elipses, já que ambos podem ser entendidos como arcos completos, de ",[193,707,708],{},"0"," a ",[193,711,464],{},". Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[714,715,716],"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":343,"depth":343,"links":718},[719,720,721],{"id":239,"depth":343,"text":240},{"id":311,"depth":343,"text":312},{"id":468,"depth":343,"text":469},null,"Veja como desenhar arcos e trechos de curva","md",{},{"title":59,"description":723},"B4Jq_z0wQ9kAoOUXqsXOWxvql9wv4Y3jGSKnU2qG-6E",[729,731],{"title":55,"path":56,"stem":57,"description":730,"children":-1},"Veja como criar uma forma geométrica customizada",{"title":63,"path":64,"stem":65,"description":732,"children":-1},"Veja como combinar formas geométricas básicas para criar desenhos",1786195201719]