[{"data":1,"prerenderedAt":402},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-geometrias-elipse":139,"-pcs3021-geometrias-elipse-surround":397},[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":28,"body":141,"categoria":390,"creditoLink":390,"creditos":390,"descricao":390,"description":391,"eaulas":390,"extension":392,"meta":393,"navigation":394,"path":29,"seo":395,"stem":30,"video":390,"youtube":390,"youtubeLink":390,"__hash__":396},"docs\u002Fpcs3021\u002F2.geometrias\u002F2.elipse.md",{"type":142,"value":143,"toc":386},"minimark",[144,153,175,180,228,231,234,343,346,366,382],[145,146,147,148,152],"p",{},"Para desenhar formas arredondadas no p5.js, utilizamos o comando ",[149,150,151],"code",{},"ellipse()",". Com ele é possível criar tanto elipses (ovais) quanto círculos perfeitos, dependendo dos valores informados.",[145,154,155,156,159,160,163,164,167,168,163,171,174],{},"O comando ",[149,157,158],{},"ellipse(x, y, w, h)"," recebe quatro parâmetros. Os dois primeiros (",[149,161,162],{},"x"," e ",[149,165,166],{},"y",") indicam a posição do centro da elipse. Os dois últimos (",[149,169,170],{},"w",[149,172,173],{},"h",") indicam, respectivamente, a largura e a altura da forma. Quando a largura e a altura são iguais, obtemos um círculo. Note que, diferentemente do retângulo, a posição informada corresponde ao centro da forma.",[176,177,179],"h2",{"id":178},"estrutura-básica","Estrutura básica",[181,182,183,184],"code-preview",{},"Código 4.1 - estrutura geral para definição de elipses no p5.js",[185,186,187],"template",{"v-slot:code":5},[188,189,193],"pre",{"className":190,"code":191,"language":192,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ellipse(x, y, largura, altura);\n","js",[149,194,195],{"__ignoreMap":5},[196,197,200,204,208,212,215,217,220,222,225],"span",{"class":198,"line":199},"line",1,[196,201,203],{"class":202},"s2Zo4","ellipse",[196,205,207],{"class":206},"sTEyZ","(x",[196,209,211],{"class":210},"sMK4o",",",[196,213,214],{"class":206}," y",[196,216,211],{"class":210},[196,218,219],{"class":206}," largura",[196,221,211],{"class":210},[196,223,224],{"class":206}," altura)",[196,226,227],{"class":210},";\n",[176,229,15],{"id":230},"exemplo",[145,232,233],{},"Para um exemplo de como utilizar esse comando, teste o Código 4.2 e veja as figuras formadas.",[181,235,236,237],{},"Código 4.2 - Exemplo de definição de uma elipse e um círculo",[185,238,239],{"v-slot:code":5},[188,240,242],{"className":190,"code":241,"language":192,"meta":5,"style":5},"function setup() {\n  createCanvas(800,800);\n  ellipse(300,300,250,150);\n  ellipse(600,300,150,150);\n}\n",[149,243,244,259,282,311,337],{"__ignoreMap":5},[196,245,246,250,253,256],{"class":198,"line":199},[196,247,249],{"class":248},"spNyl","function",[196,251,252],{"class":202}," setup",[196,254,255],{"class":210},"()",[196,257,258],{"class":210}," {\n",[196,260,262,265,269,273,275,277,280],{"class":198,"line":261},2,[196,263,264],{"class":202},"  createCanvas",[196,266,268],{"class":267},"swJcz","(",[196,270,272],{"class":271},"sbssI","800",[196,274,211],{"class":210},[196,276,272],{"class":271},[196,278,279],{"class":267},")",[196,281,227],{"class":210},[196,283,285,288,290,293,295,297,299,302,304,307,309],{"class":198,"line":284},3,[196,286,287],{"class":202},"  ellipse",[196,289,268],{"class":267},[196,291,292],{"class":271},"300",[196,294,211],{"class":210},[196,296,292],{"class":271},[196,298,211],{"class":210},[196,300,301],{"class":271},"250",[196,303,211],{"class":210},[196,305,306],{"class":271},"150",[196,308,279],{"class":267},[196,310,227],{"class":210},[196,312,314,316,318,321,323,325,327,329,331,333,335],{"class":198,"line":313},4,[196,315,287],{"class":202},[196,317,268],{"class":267},[196,319,320],{"class":271},"600",[196,322,211],{"class":210},[196,324,292],{"class":271},[196,326,211],{"class":210},[196,328,306],{"class":271},[196,330,211],{"class":210},[196,332,306],{"class":271},[196,334,279],{"class":267},[196,336,227],{"class":210},[196,338,340],{"class":198,"line":339},5,[196,341,342],{"class":210},"}\n",[344,345],"p5-sketch",{"code":241},[347,348,349,350,353,354,357,358,361,362,365],"tip",{},"Quando você quer desenhar um círculo perfeito, pode usar diretamente o comando ",[149,351,352],{},"circle(x, y, d)",", que recebe apenas três parâmetros, sendo o terceiro (",[149,355,356],{},"d",") o diâmetro do círculo. Assim, ",[149,359,360],{},"circle(600,300,150)"," produz o mesmo resultado que ",[149,363,364],{},"ellipse(600,300,150,150)",", de forma mais concisa.",[145,367,368,369,372,373,376,377,163,379,381],{},"Experimente utilizar o comando ",[149,370,371],{},"ellipseMode()"," para alterar a interpretação dos parâmetros. Com ",[149,374,375],{},"ellipseMode(CORNER)",", por exemplo, os valores ",[149,378,162],{},[149,380,166],{}," passam a indicar o canto de um retângulo que envolve a elipse, comportamento semelhante ao do retângulo. Isso pode ser útil ao alinhar elipses com outras formas. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[383,384,385],"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":261,"depth":261,"links":387},[388,389],{"id":178,"depth":261,"text":179},{"id":230,"depth":261,"text":15},null,"Veja como criar elipses e círculos","md",{},true,{"title":28,"description":391},"QFeszhabqWVVPph92ts-e67cDf6agEq2gf8qtV6y340",[398,400],{"title":24,"path":25,"stem":26,"description":399,"children":-1},"Veja como criar retângulos e quadrados",{"title":32,"path":33,"stem":34,"description":401,"children":-1},"Veja como criar triângulos",1784150367033]