[{"data":1,"prerenderedAt":700},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-programacao-while":183,"-pcs3021-programacao-while-surround":695},[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":133,"body":185,"categoria":689,"creditoLink":689,"creditos":689,"descricao":689,"description":690,"eaulas":689,"extension":691,"meta":692,"navigation":286,"path":134,"seo":693,"stem":135,"video":689,"youtube":689,"youtubeLink":689,"__hash__":694},"docs\u002Fpcs3021\u002F5.programacao\u002F4.while.md",{"type":186,"value":187,"toc":685},"minimark",[188,204,210,217,220,241,247,321,324,329,338,515,518,522,528,667,669,681],[189,190,191,192,196,197,200,201,203],"p",{},"Assim como o ",[193,194,195],"code",{},"for",", o ",[193,198,199],{},"while"," é um laço de repetição: ele executa um bloco de instruções várias vezes, sem que precisemos escrever o mesmo código repetidamente. A diferença é que, no ",[193,202,199],{},", a inicialização e a atualização da variável de controle ficam fora da estrutura do laço, e não dentro dela.",[189,205,206,207,209],{},"O ",[193,208,199],{}," tem uma única parte obrigatória:",[211,212,213],"ol",{},[214,215,216],"li",{},"uma condição, que é testada antes de cada repetição; enquanto ela for verdadeira, o bloco continua executando.",[189,218,219],{},"Para que o laço funcione corretamente, normalmente também precisamos:",[221,222,223,234],"ul",{},[214,224,225,226,230,231,233],{},"definir o valor inicial da variável de controle ",[227,228,229],"strong",{},"antes"," do ",[193,232,199],{},";",[214,235,236,237,240],{},"atualizar essa variável ",[227,238,239],{},"dentro"," do bloco, para que a condição deixe de ser verdadeira em algum momento.",[189,242,243,244,246],{},"O formato do comando ",[193,245,199],{}," é o seguinte:",[248,249,250,253,254,256,257],"code-preview",{},[227,251,252],{},"Estrutura",". Estrutura de declaração de um laço ",[193,255,199],{},":",[258,259,260],"template",{"v-slot:code":5},[261,262,266],"pre",{"className":263,"code":264,"language":265,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","inicialização;\n\nwhile (condição) {\n  \u002F\u002F bloco de instruções\n  atualização;\n}\n","js",[193,267,268,281,288,300,307,315],{"__ignoreMap":5},[269,270,273,277],"span",{"class":271,"line":272},"line",1,[269,274,276],{"class":275},"sTEyZ","inicialização",[269,278,280],{"class":279},"sMK4o",";\n",[269,282,284],{"class":271,"line":283},2,[269,285,287],{"emptyLinePlaceholder":286},true,"\n",[269,289,291,294,297],{"class":271,"line":290},3,[269,292,199],{"class":293},"s7zQu",[269,295,296],{"class":275}," (condição) ",[269,298,299],{"class":279},"{\n",[269,301,303],{"class":271,"line":302},4,[269,304,306],{"class":305},"sHwdD","  \u002F\u002F bloco de instruções\n",[269,308,310,313],{"class":271,"line":309},5,[269,311,312],{"class":275},"  atualização",[269,314,280],{"class":279},[269,316,318],{"class":271,"line":317},6,[269,319,320],{"class":279},"}\n",[189,322,323],{},"Nesse exemplo, a variável começa com um valor inicial antes do laço. A cada volta, a condição é testada e, se for verdadeira, o bloco é executado — e é dentro dele que a variável precisa ser atualizada. Se você esquecer de atualizar a variável, a condição nunca deixará de ser verdadeira e o laço se repetirá para sempre, travando o programa.",[325,326,328],"h2",{"id":327},"exemplo-1-criar-vários-retângulos-iguais","Exemplo 1: criar vários retângulos iguais",[189,330,331,332,334,335,337],{},"Assim como fizemos com o ",[193,333,195],{},", podemos usar o ",[193,336,199],{}," para criar vários objetos iguais. No exemplo abaixo, o laço desenha cinco retângulos em posições diferentes.",[248,339,340,341,343],{},"Código 6.1 - Criando vários retângulos com ",[193,342,199],{},[258,344,345],{"v-slot:code":5},[261,346,348],{"className":263,"code":347,"language":265,"meta":5,"style":5},"function setup() {\n  createCanvas(400, 400);\n  background(255);\n\n  let i = 0;\n  while (i \u003C 5) {\n    rect(50 + i * 60, 150, 40, 80);\n    i = i + 1;\n  }\n}\n",[193,349,350,366,390,404,408,424,446,487,504,510],{"__ignoreMap":5},[269,351,352,356,360,363],{"class":271,"line":272},[269,353,355],{"class":354},"spNyl","function",[269,357,359],{"class":358},"s2Zo4"," setup",[269,361,362],{"class":279},"()",[269,364,365],{"class":279}," {\n",[269,367,368,371,375,379,382,385,388],{"class":271,"line":283},[269,369,370],{"class":358},"  createCanvas",[269,372,374],{"class":373},"swJcz","(",[269,376,378],{"class":377},"sbssI","400",[269,380,381],{"class":279},",",[269,383,384],{"class":377}," 400",[269,386,387],{"class":373},")",[269,389,280],{"class":279},[269,391,392,395,397,400,402],{"class":271,"line":290},[269,393,394],{"class":358},"  background",[269,396,374],{"class":373},[269,398,399],{"class":377},"255",[269,401,387],{"class":373},[269,403,280],{"class":279},[269,405,406],{"class":271,"line":302},[269,407,287],{"emptyLinePlaceholder":286},[269,409,410,413,416,419,422],{"class":271,"line":309},[269,411,412],{"class":354},"  let",[269,414,415],{"class":275}," i",[269,417,418],{"class":279}," =",[269,420,421],{"class":377}," 0",[269,423,280],{"class":279},[269,425,426,429,432,435,438,441,444],{"class":271,"line":317},[269,427,428],{"class":293},"  while",[269,430,431],{"class":373}," (",[269,433,434],{"class":275},"i",[269,436,437],{"class":279}," \u003C",[269,439,440],{"class":377}," 5",[269,442,443],{"class":373},") ",[269,445,299],{"class":279},[269,447,449,452,454,457,460,462,465,468,470,473,475,478,480,483,485],{"class":271,"line":448},7,[269,450,451],{"class":358},"    rect",[269,453,374],{"class":373},[269,455,456],{"class":377},"50",[269,458,459],{"class":279}," +",[269,461,415],{"class":275},[269,463,464],{"class":279}," *",[269,466,467],{"class":377}," 60",[269,469,381],{"class":279},[269,471,472],{"class":377}," 150",[269,474,381],{"class":279},[269,476,477],{"class":377}," 40",[269,479,381],{"class":279},[269,481,482],{"class":377}," 80",[269,484,387],{"class":373},[269,486,280],{"class":279},[269,488,490,493,495,497,499,502],{"class":271,"line":489},8,[269,491,492],{"class":275},"    i",[269,494,418],{"class":279},[269,496,415],{"class":275},[269,498,459],{"class":279},[269,500,501],{"class":377}," 1",[269,503,280],{"class":279},[269,505,507],{"class":271,"line":506},9,[269,508,509],{"class":279},"  }\n",[269,511,513],{"class":271,"line":512},10,[269,514,320],{"class":279},[516,517],"p5-sketch",{"code":347},[325,519,521],{"id":520},"exemplo-2-criar-várias-elipses-iguais","Exemplo 2: criar várias elipses iguais",[189,523,524,525,527],{},"Também podemos usar o ",[193,526,199],{}," para criar vários círculos ou outras formas. No exemplo a seguir, o laço desenha cinco elipses alinhadas, parando quando a variável de controle chega a 5.",[248,529,530,531,533],{},"Código 6.2 - Criando várias elipses com ",[193,532,199],{},[258,534,535],{"v-slot:code":5},[261,536,538],{"className":263,"code":537,"language":265,"meta":5,"style":5},"function setup() {\n  createCanvas(400, 400);\n  background(255);\n\n  let i = 0;\n  while (i \u003C 5) {\n    ellipse(60 + i * 60, 200, 40, 40);\n    i = i + 1;\n  }\n}\n",[193,539,540,550,566,578,582,594,610,645,659,663],{"__ignoreMap":5},[269,541,542,544,546,548],{"class":271,"line":272},[269,543,355],{"class":354},[269,545,359],{"class":358},[269,547,362],{"class":279},[269,549,365],{"class":279},[269,551,552,554,556,558,560,562,564],{"class":271,"line":283},[269,553,370],{"class":358},[269,555,374],{"class":373},[269,557,378],{"class":377},[269,559,381],{"class":279},[269,561,384],{"class":377},[269,563,387],{"class":373},[269,565,280],{"class":279},[269,567,568,570,572,574,576],{"class":271,"line":290},[269,569,394],{"class":358},[269,571,374],{"class":373},[269,573,399],{"class":377},[269,575,387],{"class":373},[269,577,280],{"class":279},[269,579,580],{"class":271,"line":302},[269,581,287],{"emptyLinePlaceholder":286},[269,583,584,586,588,590,592],{"class":271,"line":309},[269,585,412],{"class":354},[269,587,415],{"class":275},[269,589,418],{"class":279},[269,591,421],{"class":377},[269,593,280],{"class":279},[269,595,596,598,600,602,604,606,608],{"class":271,"line":317},[269,597,428],{"class":293},[269,599,431],{"class":373},[269,601,434],{"class":275},[269,603,437],{"class":279},[269,605,440],{"class":377},[269,607,443],{"class":373},[269,609,299],{"class":279},[269,611,612,615,617,620,622,624,626,628,630,633,635,637,639,641,643],{"class":271,"line":448},[269,613,614],{"class":358},"    ellipse",[269,616,374],{"class":373},[269,618,619],{"class":377},"60",[269,621,459],{"class":279},[269,623,415],{"class":275},[269,625,464],{"class":279},[269,627,467],{"class":377},[269,629,381],{"class":279},[269,631,632],{"class":377}," 200",[269,634,381],{"class":279},[269,636,477],{"class":377},[269,638,381],{"class":279},[269,640,477],{"class":377},[269,642,387],{"class":373},[269,644,280],{"class":279},[269,646,647,649,651,653,655,657],{"class":271,"line":489},[269,648,492],{"class":275},[269,650,418],{"class":279},[269,652,415],{"class":275},[269,654,459],{"class":279},[269,656,501],{"class":377},[269,658,280],{"class":279},[269,660,661],{"class":271,"line":506},[269,662,509],{"class":279},[269,664,665],{"class":271,"line":512},[269,666,320],{"class":279},[516,668],{"code":537},[670,671,206,672,674,675,677,678,680],"tip",{},[193,673,199],{}," é útil quando não sabemos de antemão quantas vezes o laço vai se repetir, já que a condição pode depender de algo que muda durante a execução do programa. Já quando sabemos exatamente quantas repetições queremos, como nos exemplos acima, o ",[193,676,195],{}," costuma deixar o código mais organizado, pois reúne inicialização, condição e atualização em um só lugar. Tome cuidado: sempre atualize a variável de controle dentro do ",[193,679,199],{},", para evitar um laço infinito.",[682,683,684],"style",{},"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 .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 .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":283,"depth":283,"links":686},[687,688],{"id":327,"depth":283,"text":328},{"id":520,"depth":283,"text":521},null,"Aprenda a usar o laço while para repetir instruções enquanto uma condição for verdadeira","md",{},{"title":133,"description":690},"bQHXYqxfOFRO9AVVsMA7QGC_0V_0UzkHzJdCI8eY8XM",[696,698],{"title":129,"path":130,"stem":131,"description":697,"children":-1},"Aprenda a usar a estrutura condicional if para tomar decisões dentro do seu código",{"title":142,"path":138,"stem":139,"description":699,"children":-1},"Entenda como fazer projetos animados com p5.js",1786195203574]