[{"data":1,"prerenderedAt":788},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-animacao-usando-variaveis":139,"-pcs3021-animacao-usando-variaveis-surround":783},[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":116,"body":141,"categoria":778,"creditoLink":778,"creditos":778,"descricao":778,"description":5,"eaulas":778,"extension":779,"meta":780,"navigation":212,"path":117,"seo":781,"stem":118,"video":778,"youtube":778,"youtubeLink":778,"__hash__":782},"docs\u002Fpcs3021\u002F5.animacao\u002F2.usando-variaveis.md",{"type":142,"value":143,"toc":774},"minimark",[144,148,170,339,343,347,350,471,474,484,494,505,508,747,750,760,770],[145,146,116],"h3",{"id":147},"variáveis-locais-e-globais",[149,150,151,152,156,157,160,161,163,164,166,167,169],"p",{},"Quando variáveis são criadas dentro de um bloco, como por exemplo dentro de um FOR, IF ou WHILE, essas só existirão enquanto esse bloco for executado. Finda a execução do bloco, as eventuais variáveis nele criadas deixam de existir. Além disso, caso exista outra variável de mesmo nome fora desse bloco, essa é ignorada dentro do mesmo, valendo a que foi nele criada, e volta a valer, com o mesmo valor que já possuía, quando o bloco termina sua execução. O mesmo vale para o bloco de uma função. Variáveis criadas dentro da ",[153,154,155],"strong",{},"setup()"," só existirão durante sua execução. Variáveis criadas na ",[153,158,159],{},"draw()"," serão recriadas a cada execução da ",[153,162,159],{},", perdendo-se eventuais conteúdos de execuções anteriores. Então, não dá para criar uma variável dentro da ",[153,165,155],{},", iniciá-la com algum valor e depois acessá-la na ",[153,168,159],{},". Variáveis importantes para o programa, que precisam ser acessadas dentro de diferentes funções são chamadas de variáveis globais e precisam ser declaradas fora das funções, como mostrado no exemplo a seguir.",[171,172,173,174],"code-preview",{},"Código 4.2 - Uso de uma variável global entre setup() e draw()",[175,176,177],"template",{"v-slot:code":5},[178,179,183],"pre",{"className":180,"code":181,"language":182,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","let largura; \u002F\u002F criamos a variável global fora dos blocos das funções\n\nfunction setup() {\n  createCanvas(400, 400);\n  largura = width \u002F 3; \u002F\u002F na setup() iniciamos a variável global com um valor...\n}\n\nfunction draw() {\n  line(0, 0, largura, 200); \u002F\u002F ...e usamos o valor no bloco draw!\n}\n","js",[184,185,186,207,214,230,256,279,285,290,302,334],"code",{"__ignoreMap":5},[187,188,191,195,199,203],"span",{"class":189,"line":190},"line",1,[187,192,194],{"class":193},"spNyl","let",[187,196,198],{"class":197},"sTEyZ"," largura",[187,200,202],{"class":201},"sMK4o",";",[187,204,206],{"class":205},"sHwdD"," \u002F\u002F criamos a variável global fora dos blocos das funções\n",[187,208,210],{"class":189,"line":209},2,[187,211,213],{"emptyLinePlaceholder":212},true,"\n",[187,215,217,220,224,227],{"class":189,"line":216},3,[187,218,219],{"class":193},"function",[187,221,223],{"class":222},"s2Zo4"," setup",[187,225,226],{"class":201},"()",[187,228,229],{"class":201}," {\n",[187,231,233,236,240,244,247,250,253],{"class":189,"line":232},4,[187,234,235],{"class":222},"  createCanvas",[187,237,239],{"class":238},"swJcz","(",[187,241,243],{"class":242},"sbssI","400",[187,245,246],{"class":201},",",[187,248,249],{"class":242}," 400",[187,251,252],{"class":238},")",[187,254,255],{"class":201},";\n",[187,257,259,262,265,268,271,274,276],{"class":189,"line":258},5,[187,260,261],{"class":197},"  largura",[187,263,264],{"class":201}," =",[187,266,267],{"class":197}," width",[187,269,270],{"class":201}," \u002F",[187,272,273],{"class":242}," 3",[187,275,202],{"class":201},[187,277,278],{"class":205}," \u002F\u002F na setup() iniciamos a variável global com um valor...\n",[187,280,282],{"class":189,"line":281},6,[187,283,284],{"class":201},"}\n",[187,286,288],{"class":189,"line":287},7,[187,289,213],{"emptyLinePlaceholder":212},[187,291,293,295,298,300],{"class":189,"line":292},8,[187,294,219],{"class":193},[187,296,297],{"class":222}," draw",[187,299,226],{"class":201},[187,301,229],{"class":201},[187,303,305,308,310,313,315,318,320,322,324,327,329,331],{"class":189,"line":304},9,[187,306,307],{"class":222},"  line",[187,309,239],{"class":238},[187,311,312],{"class":242},"0",[187,314,246],{"class":201},[187,316,317],{"class":242}," 0",[187,319,246],{"class":201},[187,321,198],{"class":197},[187,323,246],{"class":201},[187,325,326],{"class":242}," 200",[187,328,252],{"class":238},[187,330,202],{"class":201},[187,332,333],{"class":205}," \u002F\u002F ...e usamos o valor no bloco draw!\n",[187,335,337],{"class":189,"line":336},10,[187,338,284],{"class":201},[340,341],"p5-sketch",{"code":342},"let largura;\n\nfunction setup() {\n  createCanvas(400, 400);\n  largura = width \u002F 3;\n}\n\nfunction draw() {\n  line(0, 0, largura, 200);\n}\n",[145,344,346],{"id":345},"criando-animações","Criando animações",[149,348,349],{},"Execute o código a seguir, que permite movimentar um quadrado pela tela com o mouse.",[171,351,352,353],{},"Código 4.3 - Quadrado seguindo a posição do mouse",[175,354,355],{"v-slot:code":5},[178,356,358],{"className":180,"code":357,"language":182,"meta":5,"style":5},"function setup() {\n  createCanvas(1000, 1000);\n  fill(255); \u002F\u002F preenchimento na cor branca\n}\n\nfunction draw() {\n  background(0); \u002F\u002F fundo preto (apaga tudo)\n  rect(mouseX, mouseY, 30, 30);\n}\n",[184,359,360,370,388,405,409,413,423,439,467],{"__ignoreMap":5},[187,361,362,364,366,368],{"class":189,"line":190},[187,363,219],{"class":193},[187,365,223],{"class":222},[187,367,226],{"class":201},[187,369,229],{"class":201},[187,371,372,374,376,379,381,384,386],{"class":189,"line":209},[187,373,235],{"class":222},[187,375,239],{"class":238},[187,377,378],{"class":242},"1000",[187,380,246],{"class":201},[187,382,383],{"class":242}," 1000",[187,385,252],{"class":238},[187,387,255],{"class":201},[187,389,390,393,395,398,400,402],{"class":189,"line":216},[187,391,392],{"class":222},"  fill",[187,394,239],{"class":238},[187,396,397],{"class":242},"255",[187,399,252],{"class":238},[187,401,202],{"class":201},[187,403,404],{"class":205}," \u002F\u002F preenchimento na cor branca\n",[187,406,407],{"class":189,"line":232},[187,408,284],{"class":201},[187,410,411],{"class":189,"line":258},[187,412,213],{"emptyLinePlaceholder":212},[187,414,415,417,419,421],{"class":189,"line":281},[187,416,219],{"class":193},[187,418,297],{"class":222},[187,420,226],{"class":201},[187,422,229],{"class":201},[187,424,425,428,430,432,434,436],{"class":189,"line":287},[187,426,427],{"class":222},"  background",[187,429,239],{"class":238},[187,431,312],{"class":242},[187,433,252],{"class":238},[187,435,202],{"class":201},[187,437,438],{"class":205}," \u002F\u002F fundo preto (apaga tudo)\n",[187,440,441,444,446,449,451,454,456,459,461,463,465],{"class":189,"line":292},[187,442,443],{"class":222},"  rect",[187,445,239],{"class":238},[187,447,448],{"class":197},"mouseX",[187,450,246],{"class":201},[187,452,453],{"class":197}," mouseY",[187,455,246],{"class":201},[187,457,458],{"class":242}," 30",[187,460,246],{"class":201},[187,462,458],{"class":242},[187,464,252],{"class":238},[187,466,255],{"class":201},[187,468,469],{"class":189,"line":304},[187,470,284],{"class":201},[340,472],{"code":473},"function setup() {\n  createCanvas(1000, 1000);\n  fill(255);\n}\n\nfunction draw() {\n  background(0);\n  rect(mouseX, mouseY, 30, 30);\n}\n",[149,475,476,477,480,481,483],{},"Devido à execução da função ",[153,478,479],{},"background()",", a cada repetição da função ",[153,482,159],{}," a janela é apagada antes do novo quadrado ser desenhado. Como resultado, temos uma animação bastante simples. Animações computadorizadas em geral funcionam a partir desse princípio: apagar a tela anterior e desenhar uma nova imagem (ou várias imagens), gerando com isso a ilusão de movimento.",[149,485,486,487,490,491,493],{},"Experimente incluir a chamada da função ",[153,488,489],{},"noCursor()"," dentro da ",[153,492,155],{},". O cursor do mouse será apagado e será como se o quadrado passasse a ser o novo cursor.",[495,496,497,502],"blockquote",{},[149,498,499],{},[153,500,501],{},"Atividade 2",[149,503,504],{},"Substitua o cursor por imagens vetoriais em formato SVG (veja o capítulo anterior).",[149,506,507],{},"Agora procure entender o funcionamento do programa a seguir, que move um quadrado na diagonal da tela.",[171,509,510,511],{},"Código 4.4 - Quadrado se movendo continuamente na diagonal",[175,512,513],{"v-slot:code":5},[178,514,516],{"className":180,"code":515,"language":182,"meta":5,"style":5},"\u002F\u002F variáveis globais\nlet xq, yq, moveXq, moveYq; \u002F\u002F posição e incrementos que geram movimentos\n\nfunction setup() {\n  createCanvas(1000, 1000);\n  fill(255); \u002F\u002F preenchimento na cor branca\n  xq = 0;\n  yq = 0; \u002F\u002F inicia no canto superior esquerdo\n  moveXq = 2;\n  moveYq = 2; \u002F\u002F valores a incrementar repetidamente a posição\n}\n\nfunction draw() {\n  background(0); \u002F\u002F fundo preto (apaga tudo)\n  rect(xq, yq, 20, 20);\n  xq = xq + moveXq;\n  yq = yq + moveYq; \u002F\u002F atualiza a posição\n}\n",[184,517,518,523,550,554,564,580,594,605,619,631,645,650,655,666,681,708,724,742],{"__ignoreMap":5},[187,519,520],{"class":189,"line":190},[187,521,522],{"class":205},"\u002F\u002F variáveis globais\n",[187,524,525,527,530,532,535,537,540,542,545,547],{"class":189,"line":209},[187,526,194],{"class":193},[187,528,529],{"class":197}," xq",[187,531,246],{"class":201},[187,533,534],{"class":197}," yq",[187,536,246],{"class":201},[187,538,539],{"class":197}," moveXq",[187,541,246],{"class":201},[187,543,544],{"class":197}," moveYq",[187,546,202],{"class":201},[187,548,549],{"class":205}," \u002F\u002F posição e incrementos que geram movimentos\n",[187,551,552],{"class":189,"line":216},[187,553,213],{"emptyLinePlaceholder":212},[187,555,556,558,560,562],{"class":189,"line":232},[187,557,219],{"class":193},[187,559,223],{"class":222},[187,561,226],{"class":201},[187,563,229],{"class":201},[187,565,566,568,570,572,574,576,578],{"class":189,"line":258},[187,567,235],{"class":222},[187,569,239],{"class":238},[187,571,378],{"class":242},[187,573,246],{"class":201},[187,575,383],{"class":242},[187,577,252],{"class":238},[187,579,255],{"class":201},[187,581,582,584,586,588,590,592],{"class":189,"line":281},[187,583,392],{"class":222},[187,585,239],{"class":238},[187,587,397],{"class":242},[187,589,252],{"class":238},[187,591,202],{"class":201},[187,593,404],{"class":205},[187,595,596,599,601,603],{"class":189,"line":287},[187,597,598],{"class":197},"  xq",[187,600,264],{"class":201},[187,602,317],{"class":242},[187,604,255],{"class":201},[187,606,607,610,612,614,616],{"class":189,"line":292},[187,608,609],{"class":197},"  yq",[187,611,264],{"class":201},[187,613,317],{"class":242},[187,615,202],{"class":201},[187,617,618],{"class":205}," \u002F\u002F inicia no canto superior esquerdo\n",[187,620,621,624,626,629],{"class":189,"line":304},[187,622,623],{"class":197},"  moveXq",[187,625,264],{"class":201},[187,627,628],{"class":242}," 2",[187,630,255],{"class":201},[187,632,633,636,638,640,642],{"class":189,"line":336},[187,634,635],{"class":197},"  moveYq",[187,637,264],{"class":201},[187,639,628],{"class":242},[187,641,202],{"class":201},[187,643,644],{"class":205}," \u002F\u002F valores a incrementar repetidamente a posição\n",[187,646,648],{"class":189,"line":647},11,[187,649,284],{"class":201},[187,651,653],{"class":189,"line":652},12,[187,654,213],{"emptyLinePlaceholder":212},[187,656,658,660,662,664],{"class":189,"line":657},13,[187,659,219],{"class":193},[187,661,297],{"class":222},[187,663,226],{"class":201},[187,665,229],{"class":201},[187,667,669,671,673,675,677,679],{"class":189,"line":668},14,[187,670,427],{"class":222},[187,672,239],{"class":238},[187,674,312],{"class":242},[187,676,252],{"class":238},[187,678,202],{"class":201},[187,680,438],{"class":205},[187,682,684,686,688,691,693,695,697,700,702,704,706],{"class":189,"line":683},15,[187,685,443],{"class":222},[187,687,239],{"class":238},[187,689,690],{"class":197},"xq",[187,692,246],{"class":201},[187,694,534],{"class":197},[187,696,246],{"class":201},[187,698,699],{"class":242}," 20",[187,701,246],{"class":201},[187,703,699],{"class":242},[187,705,252],{"class":238},[187,707,255],{"class":201},[187,709,711,713,715,717,720,722],{"class":189,"line":710},16,[187,712,598],{"class":197},[187,714,264],{"class":201},[187,716,529],{"class":197},[187,718,719],{"class":201}," +",[187,721,539],{"class":197},[187,723,255],{"class":201},[187,725,727,729,731,733,735,737,739],{"class":189,"line":726},17,[187,728,609],{"class":197},[187,730,264],{"class":201},[187,732,534],{"class":197},[187,734,719],{"class":201},[187,736,544],{"class":197},[187,738,202],{"class":201},[187,740,741],{"class":205}," \u002F\u002F atualiza a posição\n",[187,743,745],{"class":189,"line":744},18,[187,746,284],{"class":201},[340,748],{"code":749},"let xq, yq, moveXq, moveYq;\n\nfunction setup() {\n  createCanvas(1000, 1000);\n  fill(255);\n  xq = 0;\n  yq = 0;\n  moveXq = 2;\n  moveYq = 2;\n}\n\nfunction draw() {\n  background(0);\n  rect(xq, yq, 20, 20);\n  xq = xq + moveXq;\n  yq = yq + moveYq;\n}\n",[495,751,752,757],{},[149,753,754],{},[153,755,756],{},"Atividade 3",[149,758,759],{},"Modifique o programa anterior para fazer outros tipos de movimentos, envolvendo mais elementos geométricos e eventualmente desenhos vetoriais se movendo pela tela. Pense também: como você faria para mudar a direção do movimento? E para aumentar a velocidade?",[495,761,762,767],{},[149,763,764],{},[153,765,766],{},"Atividade 4",[149,768,769],{},"Crie um programa que faz uma animação de um círculo que surge numa posição aleatória e se move numa direção e sentido aleatórios. Pense em como evitar que o desenho saia fora da janela.",[771,772,773],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 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}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":209,"depth":209,"links":775},[776,777],{"id":147,"depth":216,"text":116},{"id":345,"depth":216,"text":346},null,"md",{},{"title":116,"description":5},"P6EILbl7ny8v5B5RwHzt7ZgfmTJBfSSOZu4CxW4P5D8",[784,786],{"title":114,"path":110,"stem":111,"description":785,"children":-1},"Entenda como fazer projetos animados com p5.js",{"title":120,"path":121,"stem":122,"description":787,"children":-1},"As funções setup() e draw(), variáveis locais e globais, animações e tratamento de eventos de mouse e teclado em p5.js",1784150369272]