[{"data":1,"prerenderedAt":391},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-geometrias-retangulo":139,"-pcs3021-geometrias-retangulo-surround":386},[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":24,"body":141,"categoria":379,"creditoLink":379,"creditos":379,"descricao":379,"description":380,"eaulas":379,"extension":381,"meta":382,"navigation":383,"path":25,"seo":384,"stem":26,"video":379,"youtube":379,"youtubeLink":379,"__hash__":385},"docs\u002Fpcs3021\u002F2.geometrias\u002F1.retangulo.md",{"type":142,"value":143,"toc":375},"minimark",[144,153,175,180,228,231,234,344,347,364,371],[145,146,147,148,152],"p",{},"Uma das formas geométricas mais utilizadas em desenhos digitais é o retângulo. No p5.js, essa forma é criada com o comando ",[149,150,151],"code",{},"rect()",", que permite desenhar tanto retângulos quanto quadrados de maneira simples e direta.",[145,154,155,156,159,160,163,164,167,168,163,171,174],{},"O comando ",[149,157,158],{},"rect(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 canto superior esquerdo do retângulo. Os dois últimos (",[149,169,170],{},"w",[149,172,173],{},"h",") indicam, respectivamente, a largura (width) e a altura (height) da forma. Quando a largura e a altura são iguais, obtemos um quadrado.",[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 retângulos 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","rect(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","rect",[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 retângulos",[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,600);\n  rect(100,100,300,150);\n  rect(500,300,150,150);\n}\n",[149,243,244,259,283,312,338],{"__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,278,281],{"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,277],{"class":271},"600",[196,279,280],{"class":267},")",[196,282,227],{"class":210},[196,284,286,289,291,294,296,298,300,303,305,308,310],{"class":198,"line":285},3,[196,287,288],{"class":202},"  rect",[196,290,268],{"class":267},[196,292,293],{"class":271},"100",[196,295,211],{"class":210},[196,297,293],{"class":271},[196,299,211],{"class":210},[196,301,302],{"class":271},"300",[196,304,211],{"class":210},[196,306,307],{"class":271},"150",[196,309,280],{"class":267},[196,311,227],{"class":210},[196,313,315,317,319,322,324,326,328,330,332,334,336],{"class":198,"line":314},4,[196,316,288],{"class":202},[196,318,268],{"class":267},[196,320,321],{"class":271},"500",[196,323,211],{"class":210},[196,325,302],{"class":271},[196,327,211],{"class":210},[196,329,307],{"class":271},[196,331,211],{"class":210},[196,333,307],{"class":271},[196,335,280],{"class":267},[196,337,227],{"class":210},[196,339,341],{"class":198,"line":340},5,[196,342,343],{"class":210},"}\n",[345,346],"p5-sketch",{"code":241},[348,349,350,351,354,355,358,359,163,361,363],"tip",{},"Você pode alterar o modo de posicionamento do retângulo utilizando o comando ",[149,352,353],{},"rectMode()",". Com ",[149,356,357],{},"rectMode(CENTER)",", os parâmetros ",[149,360,162],{},[149,362,166],{}," passam a indicar o centro da forma, em vez do canto superior esquerdo. Isso facilita quando você deseja centralizar um retângulo em uma posição específica.",[145,365,366,367,370],{},"Experimente adicionar dois parâmetros extras ao comando, como ",[149,368,369],{},"rect(100,100,300,150,20)",", e veja que o quinto valor arredonda os cantos do retângulo. É possível ainda informar quatro valores diferentes para arredondar cada canto individualmente, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[372,373,374],"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":376},[377,378],{"id":178,"depth":261,"text":179},{"id":230,"depth":261,"text":15},null,"Veja como criar retângulos e quadrados","md",{},true,{"title":24,"description":380},"-qjtlNGSWgvBASzSKi66hBlpBSHzfDbNanWg3gGh8eY",[387,389],{"title":15,"path":11,"stem":16,"description":388,"children":-1},"Veja como criar uma forma geométrica customizada",{"title":28,"path":29,"stem":30,"description":390,"children":-1},"Veja como criar elipses e círculos",1784150366953]