[{"data":1,"prerenderedAt":653},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-programacao-for":183,"-pcs3021-programacao-for-surround":648},[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":121,"body":185,"categoria":642,"creditoLink":642,"creditos":642,"descricao":642,"description":643,"eaulas":642,"extension":644,"meta":645,"navigation":370,"path":122,"seo":646,"stem":123,"video":642,"youtube":642,"youtubeLink":642,"__hash__":647},"docs\u002Fpcs3021\u002F5.programacao\u002F3.for.md",{"type":186,"value":187,"toc":638},"minimark",[188,197,203,216,222,284,287,292,298,473,476,480,486,621,623,634],[189,190,191,192,196],"p",{},"Em programação, muitas vezes precisamos repetir a mesma ação várias vezes. Em vez de escrever o mesmo código várias vezes, podemos usar um laço de repetição. O comando ",[193,194,195],"code",{},"for"," permite repetir um bloco de instruções enquanto uma condição for verdadeira.",[189,198,199,200,202],{},"A estrutura do ",[193,201,195],{}," tem três partes principais:",[204,205,206,210,213],"ol",{},[207,208,209],"li",{},"uma inicialização, que define o valor inicial da variável de controle;",[207,211,212],{},"uma condição, que indica enquanto a condição for verdadeira o bloco continua executando;",[207,214,215],{},"uma atualização, que altera o valor da variável a cada repetição.",[189,217,218,219,221],{},"O formato do comando ",[193,220,195],{}," é o seguinte:",[223,224,225,229,230,232,233],"code-preview",{},[226,227,228],"strong",{},"Estrutura",". Estrutura de declaração de um laço ",[193,231,195],{},":",[234,235,236],"template",{"v-slot:code":5},[237,238,242],"pre",{"className":239,"code":240,"language":241,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","for (inicialização; condição; atualização) {\n  \u002F\u002F bloco de instruções\n}\n","js",[193,243,244,271,278],{"__ignoreMap":5},[245,246,249,252,256,260,263,265,268],"span",{"class":247,"line":248},"line",1,[245,250,195],{"class":251},"s7zQu",[245,253,255],{"class":254},"sTEyZ"," (inicialização",[245,257,259],{"class":258},"sMK4o",";",[245,261,262],{"class":254}," condição",[245,264,259],{"class":258},[245,266,267],{"class":254}," atualização) ",[245,269,270],{"class":258},"{\n",[245,272,274],{"class":247,"line":273},2,[245,275,277],{"class":276},"sHwdD","  \u002F\u002F bloco de instruções\n",[245,279,281],{"class":247,"line":280},3,[245,282,283],{"class":258},"}\n",[189,285,286],{},"Nesse exemplo, a variável começa com um valor inicial, a condição é testada e, a cada volta do laço, ela é atualizada. Isso faz com que o bloco seja executado várias vezes de forma automática.",[288,289,291],"h2",{"id":290},"exemplo-1-criar-vários-retângulos-iguais","Exemplo 1: criar vários retângulos iguais",[189,293,294,295,297],{},"Uma das aplicações mais úteis do ",[193,296,195],{}," no p5.js é criar vários objetos iguais de uma vez. No exemplo abaixo, o laço desenha cinco retângulos em posições diferentes.",[223,299,300,301,303],{},"Código  - Criando vários retângulos com ",[193,302,195],{},[234,304,305],{"v-slot:code":5},[237,306,308],{"className":239,"code":307,"language":241,"meta":5,"style":5},"function setup() {\n  createCanvas(400, 400);\n  background(255);\n\n  for (let i = 0; i \u003C 5; i = i + 1) {\n    rect(50 + i * 60, 150, 40, 80);\n  }\n}\n",[193,309,310,326,351,365,372,422,462,468],{"__ignoreMap":5},[245,311,312,316,320,323],{"class":247,"line":248},[245,313,315],{"class":314},"spNyl","function",[245,317,319],{"class":318},"s2Zo4"," setup",[245,321,322],{"class":258},"()",[245,324,325],{"class":258}," {\n",[245,327,328,331,335,339,342,345,348],{"class":247,"line":273},[245,329,330],{"class":318},"  createCanvas",[245,332,334],{"class":333},"swJcz","(",[245,336,338],{"class":337},"sbssI","400",[245,340,341],{"class":258},",",[245,343,344],{"class":337}," 400",[245,346,347],{"class":333},")",[245,349,350],{"class":258},";\n",[245,352,353,356,358,361,363],{"class":247,"line":280},[245,354,355],{"class":318},"  background",[245,357,334],{"class":333},[245,359,360],{"class":337},"255",[245,362,347],{"class":333},[245,364,350],{"class":258},[245,366,368],{"class":247,"line":367},4,[245,369,371],{"emptyLinePlaceholder":370},true,"\n",[245,373,375,378,381,384,387,390,393,395,397,400,403,405,407,409,411,414,417,420],{"class":247,"line":374},5,[245,376,377],{"class":251},"  for",[245,379,380],{"class":333}," (",[245,382,383],{"class":314},"let",[245,385,386],{"class":254}," i",[245,388,389],{"class":258}," =",[245,391,392],{"class":337}," 0",[245,394,259],{"class":258},[245,396,386],{"class":254},[245,398,399],{"class":258}," \u003C",[245,401,402],{"class":337}," 5",[245,404,259],{"class":258},[245,406,386],{"class":254},[245,408,389],{"class":258},[245,410,386],{"class":254},[245,412,413],{"class":258}," +",[245,415,416],{"class":337}," 1",[245,418,419],{"class":333},") ",[245,421,270],{"class":258},[245,423,425,428,430,433,435,437,440,443,445,448,450,453,455,458,460],{"class":247,"line":424},6,[245,426,427],{"class":318},"    rect",[245,429,334],{"class":333},[245,431,432],{"class":337},"50",[245,434,413],{"class":258},[245,436,386],{"class":254},[245,438,439],{"class":258}," *",[245,441,442],{"class":337}," 60",[245,444,341],{"class":258},[245,446,447],{"class":337}," 150",[245,449,341],{"class":258},[245,451,452],{"class":337}," 40",[245,454,341],{"class":258},[245,456,457],{"class":337}," 80",[245,459,347],{"class":333},[245,461,350],{"class":258},[245,463,465],{"class":247,"line":464},7,[245,466,467],{"class":258},"  }\n",[245,469,471],{"class":247,"line":470},8,[245,472,283],{"class":258},[474,475],"p5-sketch",{"code":307},[288,477,479],{"id":478},"exemplo-2-criar-várias-elipses-iguais","Exemplo 2: criar várias elipses iguais",[189,481,482,483,485],{},"Também podemos usar o ",[193,484,195],{}," para criar vários círculos ou outras formas. No exemplo a seguir, o laço desenha cinco elipses alinhadas.",[223,487,488,489,491],{},"Código - Criando várias elipses com ",[193,490,195],{},[234,492,493],{"v-slot:code":5},[237,494,496],{"className":239,"code":495,"language":241,"meta":5,"style":5},"function setup() {\n  createCanvas(400, 400);\n  background(255);\n\n  for (let i = 0; i \u003C 5; i = i + 1) {\n    ellipse(60 + i * 60, 200, 40, 40);\n  }\n}\n",[193,497,498,508,524,536,540,578,613,617],{"__ignoreMap":5},[245,499,500,502,504,506],{"class":247,"line":248},[245,501,315],{"class":314},[245,503,319],{"class":318},[245,505,322],{"class":258},[245,507,325],{"class":258},[245,509,510,512,514,516,518,520,522],{"class":247,"line":273},[245,511,330],{"class":318},[245,513,334],{"class":333},[245,515,338],{"class":337},[245,517,341],{"class":258},[245,519,344],{"class":337},[245,521,347],{"class":333},[245,523,350],{"class":258},[245,525,526,528,530,532,534],{"class":247,"line":280},[245,527,355],{"class":318},[245,529,334],{"class":333},[245,531,360],{"class":337},[245,533,347],{"class":333},[245,535,350],{"class":258},[245,537,538],{"class":247,"line":367},[245,539,371],{"emptyLinePlaceholder":370},[245,541,542,544,546,548,550,552,554,556,558,560,562,564,566,568,570,572,574,576],{"class":247,"line":374},[245,543,377],{"class":251},[245,545,380],{"class":333},[245,547,383],{"class":314},[245,549,386],{"class":254},[245,551,389],{"class":258},[245,553,392],{"class":337},[245,555,259],{"class":258},[245,557,386],{"class":254},[245,559,399],{"class":258},[245,561,402],{"class":337},[245,563,259],{"class":258},[245,565,386],{"class":254},[245,567,389],{"class":258},[245,569,386],{"class":254},[245,571,413],{"class":258},[245,573,416],{"class":337},[245,575,419],{"class":333},[245,577,270],{"class":258},[245,579,580,583,585,588,590,592,594,596,598,601,603,605,607,609,611],{"class":247,"line":424},[245,581,582],{"class":318},"    ellipse",[245,584,334],{"class":333},[245,586,587],{"class":337},"60",[245,589,413],{"class":258},[245,591,386],{"class":254},[245,593,439],{"class":258},[245,595,442],{"class":337},[245,597,341],{"class":258},[245,599,600],{"class":337}," 200",[245,602,341],{"class":258},[245,604,452],{"class":337},[245,606,341],{"class":258},[245,608,452],{"class":337},[245,610,347],{"class":333},[245,612,350],{"class":258},[245,614,615],{"class":247,"line":464},[245,616,467],{"class":258},[245,618,619],{"class":247,"line":470},[245,620,283],{"class":258},[474,622],{"code":495},[624,625,626,627,629,630,633],"tip",{},"O ",[193,628,195],{}," é muito útil quando você quer repetir uma instrução de forma organizada. Ao combinar o laço com operações matemáticas, como ",[193,631,632],{},"i * 60",", é possível criar desenhos com vários objetos iguais sem precisar escrever o mesmo código várias vezes.",[635,636,637],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}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 pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":273,"depth":273,"links":639},[640,641],{"id":290,"depth":273,"text":291},{"id":478,"depth":273,"text":479},null,"Aprenda a usar o laço for para repetir instruções e criar vários objetos de forma organizada","md",{},{"title":121,"description":643},"QbLT2DN5g4SArcnXqpDXOpzAVOpB3_Um5lQO6ls3zI8",[649,651],{"title":117,"path":118,"stem":119,"description":650,"children":-1},"Aprenda a usar variáveis para gerar imagens no Processing",{"title":125,"path":126,"stem":127,"description":652,"children":-1},"Entenda como criar desenhos reutilizáveis no p5.js usando classes e objetos",1786195203242]