[{"data":1,"prerenderedAt":715},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-geometrias-combinando":155,"-pcs3021-geometrias-combinando-surround":710},[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,52,78,94,124,140,149],{"title":15,"path":11,"stem":16},"Linguagem Computacional","pcs3021\u002Findex",{"title":18,"icon":19,"path":20,"stem":21,"children":22,"page":51},"Formas geométricas","i-lucide-drafting-compass","\u002Fpcs3021\u002Fgeometrias","pcs3021\u002F2.geometrias",[23,27,31,35,39,43,47],{"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",{"title":48,"path":49,"stem":50},"Combinando formas","\u002Fpcs3021\u002Fgeometrias\u002Fcombinando","pcs3021\u002F2.geometrias\u002F7.combinando",false,{"title":53,"icon":54,"path":55,"stem":56,"children":57,"page":51},"Transformações","i-lucide-rotate-3d","\u002Fpcs3021\u002Ftransformacoes","pcs3021\u002F2.transformacoes",[58,62,66,70,74],{"title":59,"path":60,"stem":61},"Rotação","\u002Fpcs3021\u002Ftransformacoes\u002Frotacao","pcs3021\u002F2.transformacoes\u002F1.rotacao",{"title":63,"path":64,"stem":65},"Translação","\u002Fpcs3021\u002Ftransformacoes\u002Ftranslacao","pcs3021\u002F2.transformacoes\u002F2.translacao",{"title":67,"path":68,"stem":69},"Escala","\u002Fpcs3021\u002Ftransformacoes\u002Fescala","pcs3021\u002F2.transformacoes\u002F3.escala",{"title":71,"path":72,"stem":73},"Cisalhamento","\u002Fpcs3021\u002Ftransformacoes\u002Fcisalhamento","pcs3021\u002F2.transformacoes\u002F4.cisalhamento",{"title":75,"path":76,"stem":77},"Push e Pop","\u002Fpcs3021\u002Ftransformacoes\u002Fpush-pop","pcs3021\u002F2.transformacoes\u002F5.push-pop",{"title":79,"path":80,"stem":81,"children":82,"icon":93},"Imagens","\u002Fpcs3021\u002Fimagens","pcs3021\u002F3.imagens\u002F1.index",[83,85,89],{"title":84,"path":80,"stem":81},"Usando SVG",{"title":86,"path":87,"stem":88},"Exportando SVG","\u002Fpcs3021\u002Fimagens\u002Fexportando","pcs3021\u002F3.imagens\u002F4.exportando",{"title":90,"path":91,"stem":92},"Imagens Matriciais","\u002Fpcs3021\u002Fimagens\u002Fmatriciais","pcs3021\u002F3.imagens\u002F5.matriciais","i-lucide-pen-tool",{"title":95,"icon":96,"path":97,"stem":98,"children":99,"page":51},"Programação","i-lucide-square-code","\u002Fpcs3021\u002Fprogramacao","pcs3021\u002F4.programacao",[100,104,108,112,116,120],{"title":101,"path":102,"stem":103},"Variáveis","\u002Fpcs3021\u002Fprogramacao\u002Fvariaveis","pcs3021\u002F4.programacao\u002F1.variaveis",{"title":105,"path":106,"stem":107},"Expressões numéricas","\u002Fpcs3021\u002Fprogramacao\u002Fexpressoes-numericas","pcs3021\u002F4.programacao\u002F2.expressoes-numericas",{"title":109,"path":110,"stem":111},"Laço FOR","\u002Fpcs3021\u002Fprogramacao\u002Ffor","pcs3021\u002F4.programacao\u002F3.for",{"title":113,"path":114,"stem":115},"Classes e objetos","\u002Fpcs3021\u002Fprogramacao\u002Fclasses-e-objetos","pcs3021\u002F4.programacao\u002F4.classes-e-objetos",{"title":117,"path":118,"stem":119},"Condicionais","\u002Fpcs3021\u002Fprogramacao\u002Fcondicionais","pcs3021\u002F4.programacao\u002F4.condicionais",{"title":121,"path":122,"stem":123},"While","\u002Fpcs3021\u002Fprogramacao\u002Fwhile","pcs3021\u002F4.programacao\u002F4.while",{"title":125,"path":126,"stem":127,"children":128,"icon":139},"Animações","\u002Fpcs3021\u002Fanimacao","pcs3021\u002F5.animacao\u002F1.index",[129,131,135],{"title":130,"path":126,"stem":127},"Introdução",{"title":132,"path":133,"stem":134},"Variáveis locais e globais","\u002Fpcs3021\u002Fanimacao\u002Fusando-variaveis","pcs3021\u002F5.animacao\u002F2.usando-variaveis",{"title":136,"path":137,"stem":138},"Eventos","\u002Fpcs3021\u002Fanimacao\u002Feventos","pcs3021\u002F5.animacao\u002F3.eventos","i-lucide-clapperboard",{"title":141,"icon":142,"path":143,"stem":144,"children":145,"page":51},"Vetores","i-lucide-spline-pointer","\u002Fpcs3021\u002Fvetores","pcs3021\u002F6.vetores",[146],{"title":141,"path":147,"stem":148},"\u002Fpcs3021\u002Fvetores\u002Fvetores","pcs3021\u002F6.vetores\u002F7.vetores",{"title":150,"path":151,"stem":152,"children":153,"icon":142},"Funções","\u002Fpcs3021\u002Ffuncoes","pcs3021\u002F7.funcoes\u002F1.index",[154],{"title":150,"path":151,"stem":152},{"id":156,"title":48,"body":157,"categoria":704,"creditoLink":704,"creditos":704,"descricao":704,"description":705,"eaulas":704,"extension":706,"meta":707,"navigation":254,"path":49,"seo":708,"stem":50,"video":704,"youtube":704,"youtubeLink":704,"__hash__":709},"docs\u002Fpcs3021\u002F2.geometrias\u002F7.combinando.md",{"type":158,"value":159,"toc":700},"minimark",[160,164,169,172,466,469,473,476,690,692,696],[161,162,163],"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.",[165,166,168],"h2",{"id":167},"exemplo-1-homem-palito","Exemplo 1: homem palito",[161,170,171],{},"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 4.1 mostra uma forma simples de montar essa figura.",[173,174,175,176],"code-preview",{},"Código 4.1 - Exemplo de combinação de formas para desenhar um homem palito",[177,178,179],"template",{"v-slot:code":5},[180,181,185],"pre",{"className":182,"code":183,"language":184,"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",[186,187,188,208,234,249,256,271,285,290,319,324,353,381,407,434,460],"code",{"__ignoreMap":5},[189,190,193,197,201,205],"span",{"class":191,"line":192},"line",1,[189,194,196],{"class":195},"spNyl","function",[189,198,200],{"class":199},"s2Zo4"," setup",[189,202,204],{"class":203},"sMK4o","()",[189,206,207],{"class":203}," {\n",[189,209,211,214,218,222,225,228,231],{"class":191,"line":210},2,[189,212,213],{"class":199},"  createCanvas",[189,215,217],{"class":216},"swJcz","(",[189,219,221],{"class":220},"sbssI","400",[189,223,224],{"class":203},",",[189,226,227],{"class":220}," 400",[189,229,230],{"class":216},")",[189,232,233],{"class":203},";\n",[189,235,237,240,242,245,247],{"class":191,"line":236},3,[189,238,239],{"class":199},"  background",[189,241,217],{"class":216},[189,243,244],{"class":220},"255",[189,246,230],{"class":216},[189,248,233],{"class":203},[189,250,252],{"class":191,"line":251},4,[189,253,255],{"emptyLinePlaceholder":254},true,"\n",[189,257,259,262,264,267,269],{"class":191,"line":258},5,[189,260,261],{"class":199},"  stroke",[189,263,217],{"class":216},[189,265,266],{"class":220},"0",[189,268,230],{"class":216},[189,270,233],{"class":203},[189,272,274,277,279,281,283],{"class":191,"line":273},6,[189,275,276],{"class":199},"  fill",[189,278,217],{"class":216},[189,280,244],{"class":220},[189,282,230],{"class":216},[189,284,233],{"class":203},[189,286,288],{"class":191,"line":287},7,[189,289,255],{"emptyLinePlaceholder":254},[189,291,293,296,298,301,303,306,308,311,313,315,317],{"class":191,"line":292},8,[189,294,295],{"class":199},"  ellipse",[189,297,217],{"class":216},[189,299,300],{"class":220},"200",[189,302,224],{"class":203},[189,304,305],{"class":220}," 100",[189,307,224],{"class":203},[189,309,310],{"class":220}," 60",[189,312,224],{"class":203},[189,314,310],{"class":220},[189,316,230],{"class":216},[189,318,233],{"class":203},[189,320,322],{"class":191,"line":321},9,[189,323,255],{"emptyLinePlaceholder":254},[189,325,327,330,332,334,336,339,341,344,346,349,351],{"class":191,"line":326},10,[189,328,329],{"class":199},"  line",[189,331,217],{"class":216},[189,333,300],{"class":220},[189,335,224],{"class":203},[189,337,338],{"class":220}," 130",[189,340,224],{"class":203},[189,342,343],{"class":220}," 200",[189,345,224],{"class":203},[189,347,348],{"class":220}," 260",[189,350,230],{"class":216},[189,352,233],{"class":203},[189,354,356,358,360,362,364,367,369,372,374,377,379],{"class":191,"line":355},11,[189,357,329],{"class":199},[189,359,217],{"class":216},[189,361,300],{"class":220},[189,363,224],{"class":203},[189,365,366],{"class":220}," 170",[189,368,224],{"class":203},[189,370,371],{"class":220}," 150",[189,373,224],{"class":203},[189,375,376],{"class":220}," 220",[189,378,230],{"class":216},[189,380,233],{"class":203},[189,382,384,386,388,390,392,394,396,399,401,403,405],{"class":191,"line":383},12,[189,385,329],{"class":199},[189,387,217],{"class":216},[189,389,300],{"class":220},[189,391,224],{"class":203},[189,393,366],{"class":220},[189,395,224],{"class":203},[189,397,398],{"class":220}," 250",[189,400,224],{"class":203},[189,402,376],{"class":220},[189,404,230],{"class":216},[189,406,233],{"class":203},[189,408,410,412,414,416,418,420,422,425,427,430,432],{"class":191,"line":409},13,[189,411,329],{"class":199},[189,413,217],{"class":216},[189,415,300],{"class":220},[189,417,224],{"class":203},[189,419,348],{"class":220},[189,421,224],{"class":203},[189,423,424],{"class":220}," 160",[189,426,224],{"class":203},[189,428,429],{"class":220}," 330",[189,431,230],{"class":216},[189,433,233],{"class":203},[189,435,437,439,441,443,445,447,449,452,454,456,458],{"class":191,"line":436},14,[189,438,329],{"class":199},[189,440,217],{"class":216},[189,442,300],{"class":220},[189,444,224],{"class":203},[189,446,348],{"class":220},[189,448,224],{"class":203},[189,450,451],{"class":220}," 240",[189,453,224],{"class":203},[189,455,429],{"class":220},[189,457,230],{"class":216},[189,459,233],{"class":203},[189,461,463],{"class":191,"line":462},15,[189,464,465],{"class":203},"}\n",[467,468],"p5-sketch",{"code":183},[165,470,472],{"id":471},"exemplo-2-carro","Exemplo 2: carro",[161,474,475],{},"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 4.2 mostra como essas formas podem ser combinadas para formar uma figura reconhecível.",[173,477,478,479],{},"Código 4.2 - Exemplo de combinação de formas para desenhar um carro",[177,480,481],{"v-slot:code":5},[180,482,484],{"className":182,"code":483,"language":184,"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",[186,485,486,496,512,524,528,540,552,556,583,610,635,660,686],{"__ignoreMap":5},[189,487,488,490,492,494],{"class":191,"line":192},[189,489,196],{"class":195},[189,491,200],{"class":199},[189,493,204],{"class":203},[189,495,207],{"class":203},[189,497,498,500,502,504,506,508,510],{"class":191,"line":210},[189,499,213],{"class":199},[189,501,217],{"class":216},[189,503,221],{"class":220},[189,505,224],{"class":203},[189,507,227],{"class":220},[189,509,230],{"class":216},[189,511,233],{"class":203},[189,513,514,516,518,520,522],{"class":191,"line":236},[189,515,239],{"class":199},[189,517,217],{"class":216},[189,519,244],{"class":220},[189,521,230],{"class":216},[189,523,233],{"class":203},[189,525,526],{"class":191,"line":251},[189,527,255],{"emptyLinePlaceholder":254},[189,529,530,532,534,536,538],{"class":191,"line":258},[189,531,261],{"class":199},[189,533,217],{"class":216},[189,535,266],{"class":220},[189,537,230],{"class":216},[189,539,233],{"class":203},[189,541,542,544,546,548,550],{"class":191,"line":273},[189,543,276],{"class":199},[189,545,217],{"class":216},[189,547,244],{"class":220},[189,549,230],{"class":216},[189,551,233],{"class":203},[189,553,554],{"class":191,"line":287},[189,555,255],{"emptyLinePlaceholder":254},[189,557,558,561,563,566,568,570,572,574,576,579,581],{"class":191,"line":292},[189,559,560],{"class":199},"  rect",[189,562,217],{"class":216},[189,564,565],{"class":220},"100",[189,567,224],{"class":203},[189,569,376],{"class":220},[189,571,224],{"class":203},[189,573,343],{"class":220},[189,575,224],{"class":203},[189,577,578],{"class":220}," 70",[189,580,230],{"class":216},[189,582,233],{"class":203},[189,584,585,587,589,592,594,597,599,602,604,606,608],{"class":191,"line":321},[189,586,560],{"class":199},[189,588,217],{"class":216},[189,590,591],{"class":220},"150",[189,593,224],{"class":203},[189,595,596],{"class":220}," 180",[189,598,224],{"class":203},[189,600,601],{"class":220}," 90",[189,603,224],{"class":203},[189,605,310],{"class":220},[189,607,230],{"class":216},[189,609,233],{"class":203},[189,611,612,614,616,618,620,623,625,627,629,631,633],{"class":191,"line":326},[189,613,295],{"class":199},[189,615,217],{"class":216},[189,617,591],{"class":220},[189,619,224],{"class":203},[189,621,622],{"class":220}," 290",[189,624,224],{"class":203},[189,626,310],{"class":220},[189,628,224],{"class":203},[189,630,310],{"class":220},[189,632,230],{"class":216},[189,634,233],{"class":203},[189,636,637,639,641,644,646,648,650,652,654,656,658],{"class":191,"line":355},[189,638,295],{"class":199},[189,640,217],{"class":216},[189,642,643],{"class":220},"250",[189,645,224],{"class":203},[189,647,622],{"class":220},[189,649,224],{"class":203},[189,651,310],{"class":220},[189,653,224],{"class":203},[189,655,310],{"class":220},[189,657,230],{"class":216},[189,659,233],{"class":203},[189,661,662,664,666,669,671,674,676,678,680,682,684],{"class":191,"line":383},[189,663,329],{"class":199},[189,665,217],{"class":216},[189,667,668],{"class":220},"180",[189,670,224],{"class":203},[189,672,673],{"class":220}," 210",[189,675,224],{"class":203},[189,677,376],{"class":220},[189,679,224],{"class":203},[189,681,673],{"class":220},[189,683,230],{"class":216},[189,685,233],{"class":203},[189,687,688],{"class":191,"line":409},[189,689,465],{"class":203},[467,691],{"code":483},[693,694,695],"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.",[697,698,699],"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":210,"depth":210,"links":701},[702,703],{"id":167,"depth":210,"text":168},{"id":471,"depth":210,"text":472},null,"Veja como combinar formas geométricas básicas para criar desenhos","md",{},{"title":48,"description":705},"ALutq-a4wsE4xi-ddEwTZ4Ke6iNa4kwxq7taZTjE-AM",[711,713],{"title":44,"path":45,"stem":46,"description":712,"children":-1},"Veja como criar uma forma geométrica customizada",{"title":59,"path":60,"stem":61,"description":714,"children":-1},"Veja como girar o sistema de coordenadas",1784591202884]