[{"data":1,"prerenderedAt":743},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-geometrias-combinando":183,"-pcs3021-geometrias-combinando-surround":738},[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":63,"body":185,"categoria":732,"creditoLink":732,"creditos":732,"descricao":732,"description":733,"eaulas":732,"extension":734,"meta":735,"navigation":282,"path":64,"seo":736,"stem":65,"video":732,"youtube":732,"youtubeLink":732,"__hash__":737},"docs\u002Fpcs3021\u002F2.geometrias\u002F8.combinando.md",{"type":186,"value":187,"toc":728},"minimark",[188,192,197,200,494,497,501,504,718,720,724],[189,190,191],"p",{},"Até agora, você aprendeu a trabalhar com formas geométricas básicas, como retângulos, elipses, linhas e triângulos. Uma das maneiras mais interessantes de explorar o p5.js é combinar essas formas para montar figuras maiores e mais expressivas. Em vez de pensar em cada desenho como uma única forma pronta, você pode construir uma imagem a partir de várias partes simples.",[193,194,196],"h2",{"id":195},"exemplo-1-homem-palito","Exemplo 1: homem palito",[189,198,199],{},"Um exemplo clássico de composição é o desenho de um homem palito. Nesse caso, podemos usar uma elipse para a cabeça, linhas para os membros e mais linhas para o corpo. O Código mostra uma forma simples de montar essa figura.",[201,202,203,204],"code-preview",{},"Código - Exemplo de combinação de formas para desenhar um homem palito",[205,206,207],"template",{"v-slot:code":5},[208,209,213],"pre",{"className":210,"code":211,"language":212,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function setup() {\n  createCanvas(400, 400);\n  background(255);\n\n  stroke(0);\n  fill(255);\n\n  ellipse(200, 100, 60, 60);\n\n  line(200, 130, 200, 260);\n  line(200, 170, 150, 220);\n  line(200, 170, 250, 220);\n  line(200, 260, 160, 330);\n  line(200, 260, 240, 330);\n}\n","js",[214,215,216,236,262,277,284,299,313,318,347,352,381,409,435,462,488],"code",{"__ignoreMap":5},[217,218,221,225,229,233],"span",{"class":219,"line":220},"line",1,[217,222,224],{"class":223},"spNyl","function",[217,226,228],{"class":227},"s2Zo4"," setup",[217,230,232],{"class":231},"sMK4o","()",[217,234,235],{"class":231}," {\n",[217,237,239,242,246,250,253,256,259],{"class":219,"line":238},2,[217,240,241],{"class":227},"  createCanvas",[217,243,245],{"class":244},"swJcz","(",[217,247,249],{"class":248},"sbssI","400",[217,251,252],{"class":231},",",[217,254,255],{"class":248}," 400",[217,257,258],{"class":244},")",[217,260,261],{"class":231},";\n",[217,263,265,268,270,273,275],{"class":219,"line":264},3,[217,266,267],{"class":227},"  background",[217,269,245],{"class":244},[217,271,272],{"class":248},"255",[217,274,258],{"class":244},[217,276,261],{"class":231},[217,278,280],{"class":219,"line":279},4,[217,281,283],{"emptyLinePlaceholder":282},true,"\n",[217,285,287,290,292,295,297],{"class":219,"line":286},5,[217,288,289],{"class":227},"  stroke",[217,291,245],{"class":244},[217,293,294],{"class":248},"0",[217,296,258],{"class":244},[217,298,261],{"class":231},[217,300,302,305,307,309,311],{"class":219,"line":301},6,[217,303,304],{"class":227},"  fill",[217,306,245],{"class":244},[217,308,272],{"class":248},[217,310,258],{"class":244},[217,312,261],{"class":231},[217,314,316],{"class":219,"line":315},7,[217,317,283],{"emptyLinePlaceholder":282},[217,319,321,324,326,329,331,334,336,339,341,343,345],{"class":219,"line":320},8,[217,322,323],{"class":227},"  ellipse",[217,325,245],{"class":244},[217,327,328],{"class":248},"200",[217,330,252],{"class":231},[217,332,333],{"class":248}," 100",[217,335,252],{"class":231},[217,337,338],{"class":248}," 60",[217,340,252],{"class":231},[217,342,338],{"class":248},[217,344,258],{"class":244},[217,346,261],{"class":231},[217,348,350],{"class":219,"line":349},9,[217,351,283],{"emptyLinePlaceholder":282},[217,353,355,358,360,362,364,367,369,372,374,377,379],{"class":219,"line":354},10,[217,356,357],{"class":227},"  line",[217,359,245],{"class":244},[217,361,328],{"class":248},[217,363,252],{"class":231},[217,365,366],{"class":248}," 130",[217,368,252],{"class":231},[217,370,371],{"class":248}," 200",[217,373,252],{"class":231},[217,375,376],{"class":248}," 260",[217,378,258],{"class":244},[217,380,261],{"class":231},[217,382,384,386,388,390,392,395,397,400,402,405,407],{"class":219,"line":383},11,[217,385,357],{"class":227},[217,387,245],{"class":244},[217,389,328],{"class":248},[217,391,252],{"class":231},[217,393,394],{"class":248}," 170",[217,396,252],{"class":231},[217,398,399],{"class":248}," 150",[217,401,252],{"class":231},[217,403,404],{"class":248}," 220",[217,406,258],{"class":244},[217,408,261],{"class":231},[217,410,412,414,416,418,420,422,424,427,429,431,433],{"class":219,"line":411},12,[217,413,357],{"class":227},[217,415,245],{"class":244},[217,417,328],{"class":248},[217,419,252],{"class":231},[217,421,394],{"class":248},[217,423,252],{"class":231},[217,425,426],{"class":248}," 250",[217,428,252],{"class":231},[217,430,404],{"class":248},[217,432,258],{"class":244},[217,434,261],{"class":231},[217,436,438,440,442,444,446,448,450,453,455,458,460],{"class":219,"line":437},13,[217,439,357],{"class":227},[217,441,245],{"class":244},[217,443,328],{"class":248},[217,445,252],{"class":231},[217,447,376],{"class":248},[217,449,252],{"class":231},[217,451,452],{"class":248}," 160",[217,454,252],{"class":231},[217,456,457],{"class":248}," 330",[217,459,258],{"class":244},[217,461,261],{"class":231},[217,463,465,467,469,471,473,475,477,480,482,484,486],{"class":219,"line":464},14,[217,466,357],{"class":227},[217,468,245],{"class":244},[217,470,328],{"class":248},[217,472,252],{"class":231},[217,474,376],{"class":248},[217,476,252],{"class":231},[217,478,479],{"class":248}," 240",[217,481,252],{"class":231},[217,483,457],{"class":248},[217,485,258],{"class":244},[217,487,261],{"class":231},[217,489,491],{"class":219,"line":490},15,[217,492,493],{"class":231},"}\n",[495,496],"p5-sketch",{"code":211},[193,498,500],{"id":499},"exemplo-2-carro","Exemplo 2: carro",[189,502,503],{},"Outro exemplo interessante é a construção de um carro. Nesse caso, podemos usar retângulos para a carroceria e elipses para as rodas. O Código  mostra como essas formas podem ser combinadas para formar uma figura reconhecível.",[201,505,506,507],{},"Código  - Exemplo de combinação de formas para desenhar um carro",[205,508,509],{"v-slot:code":5},[208,510,512],{"className":210,"code":511,"language":212,"meta":5,"style":5},"function setup() {\n  createCanvas(400, 400);\n  background(255);\n\n  stroke(0);\n  fill(255);\n\n  rect(100, 220, 200, 70);\n  rect(150, 180, 90, 60);\n  ellipse(150, 290, 60, 60);\n  ellipse(250, 290, 60, 60);\n  line(180, 210, 220, 210);\n}\n",[214,513,514,524,540,552,556,568,580,584,611,638,663,688,714],{"__ignoreMap":5},[217,515,516,518,520,522],{"class":219,"line":220},[217,517,224],{"class":223},[217,519,228],{"class":227},[217,521,232],{"class":231},[217,523,235],{"class":231},[217,525,526,528,530,532,534,536,538],{"class":219,"line":238},[217,527,241],{"class":227},[217,529,245],{"class":244},[217,531,249],{"class":248},[217,533,252],{"class":231},[217,535,255],{"class":248},[217,537,258],{"class":244},[217,539,261],{"class":231},[217,541,542,544,546,548,550],{"class":219,"line":264},[217,543,267],{"class":227},[217,545,245],{"class":244},[217,547,272],{"class":248},[217,549,258],{"class":244},[217,551,261],{"class":231},[217,553,554],{"class":219,"line":279},[217,555,283],{"emptyLinePlaceholder":282},[217,557,558,560,562,564,566],{"class":219,"line":286},[217,559,289],{"class":227},[217,561,245],{"class":244},[217,563,294],{"class":248},[217,565,258],{"class":244},[217,567,261],{"class":231},[217,569,570,572,574,576,578],{"class":219,"line":301},[217,571,304],{"class":227},[217,573,245],{"class":244},[217,575,272],{"class":248},[217,577,258],{"class":244},[217,579,261],{"class":231},[217,581,582],{"class":219,"line":315},[217,583,283],{"emptyLinePlaceholder":282},[217,585,586,589,591,594,596,598,600,602,604,607,609],{"class":219,"line":320},[217,587,588],{"class":227},"  rect",[217,590,245],{"class":244},[217,592,593],{"class":248},"100",[217,595,252],{"class":231},[217,597,404],{"class":248},[217,599,252],{"class":231},[217,601,371],{"class":248},[217,603,252],{"class":231},[217,605,606],{"class":248}," 70",[217,608,258],{"class":244},[217,610,261],{"class":231},[217,612,613,615,617,620,622,625,627,630,632,634,636],{"class":219,"line":349},[217,614,588],{"class":227},[217,616,245],{"class":244},[217,618,619],{"class":248},"150",[217,621,252],{"class":231},[217,623,624],{"class":248}," 180",[217,626,252],{"class":231},[217,628,629],{"class":248}," 90",[217,631,252],{"class":231},[217,633,338],{"class":248},[217,635,258],{"class":244},[217,637,261],{"class":231},[217,639,640,642,644,646,648,651,653,655,657,659,661],{"class":219,"line":354},[217,641,323],{"class":227},[217,643,245],{"class":244},[217,645,619],{"class":248},[217,647,252],{"class":231},[217,649,650],{"class":248}," 290",[217,652,252],{"class":231},[217,654,338],{"class":248},[217,656,252],{"class":231},[217,658,338],{"class":248},[217,660,258],{"class":244},[217,662,261],{"class":231},[217,664,665,667,669,672,674,676,678,680,682,684,686],{"class":219,"line":383},[217,666,323],{"class":227},[217,668,245],{"class":244},[217,670,671],{"class":248},"250",[217,673,252],{"class":231},[217,675,650],{"class":248},[217,677,252],{"class":231},[217,679,338],{"class":248},[217,681,252],{"class":231},[217,683,338],{"class":248},[217,685,258],{"class":244},[217,687,261],{"class":231},[217,689,690,692,694,697,699,702,704,706,708,710,712],{"class":219,"line":411},[217,691,357],{"class":227},[217,693,245],{"class":244},[217,695,696],{"class":248},"180",[217,698,252],{"class":231},[217,700,701],{"class":248}," 210",[217,703,252],{"class":231},[217,705,404],{"class":248},[217,707,252],{"class":231},[217,709,701],{"class":248},[217,711,258],{"class":244},[217,713,261],{"class":231},[217,715,716],{"class":219,"line":437},[217,717,493],{"class":231},[495,719],{"code":511},[721,722,723],"tip",{},"Ao combinar formas básicas, você pode construir figuras bem mais complexas. Tente alterar as posições dos comandos, trocar cores e experimentar diferentes tamanhos para criar novos desenhos.",[725,726,727],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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}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);}",{"title":5,"searchDepth":238,"depth":238,"links":729},[730,731],{"id":195,"depth":238,"text":196},{"id":499,"depth":238,"text":500},null,"Veja como combinar formas geométricas básicas para criar desenhos","md",{},{"title":63,"description":733},"Hc3od8j8HSmxx5hHAaoWzLIHQgDD7-iBNuQBwTi8dko",[739,741],{"title":59,"path":60,"stem":61,"description":740,"children":-1},"Veja como desenhar arcos e trechos de curva",{"title":73,"path":74,"stem":75,"description":742,"children":-1},"Veja como definir a cor de preenchimento das formas",1786195201862]