[{"data":1,"prerenderedAt":832},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-animacao-usando-variaveis":183,"-pcs3021-animacao-usando-variaveis-surround":827},[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":144,"body":185,"categoria":822,"creditoLink":822,"creditos":822,"descricao":822,"description":5,"eaulas":822,"extension":823,"meta":824,"navigation":256,"path":145,"seo":825,"stem":146,"video":822,"youtube":822,"youtubeLink":822,"__hash__":826},"docs\u002Fpcs3021\u002F6.animacao\u002F2.usando-variaveis.md",{"type":186,"value":187,"toc":818},"minimark",[188,192,214,383,387,391,394,515,518,528,538,549,552,791,794,804,814],[189,190,144],"h3",{"id":191},"variáveis-locais-e-globais",[193,194,195,196,200,201,204,205,207,208,210,211,213],"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 ",[197,198,199],"strong",{},"setup()"," só existirão durante sua execução. Variáveis criadas na ",[197,202,203],{},"draw()"," serão recriadas a cada execução da ",[197,206,203],{},", perdendo-se eventuais conteúdos de execuções anteriores. Então, não dá para criar uma variável dentro da ",[197,209,199],{},", iniciá-la com algum valor e depois acessá-la na ",[197,212,203],{},". 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.",[215,216,217,218],"code-preview",{},"Código  - Uso de uma variável global entre setup() e draw()",[219,220,221],"template",{"v-slot:code":5},[222,223,227],"pre",{"className":224,"code":225,"language":226,"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",[228,229,230,251,258,274,300,323,329,334,346,378],"code",{"__ignoreMap":5},[231,232,235,239,243,247],"span",{"class":233,"line":234},"line",1,[231,236,238],{"class":237},"spNyl","let",[231,240,242],{"class":241},"sTEyZ"," largura",[231,244,246],{"class":245},"sMK4o",";",[231,248,250],{"class":249},"sHwdD"," \u002F\u002F criamos a variável global fora dos blocos das funções\n",[231,252,254],{"class":233,"line":253},2,[231,255,257],{"emptyLinePlaceholder":256},true,"\n",[231,259,261,264,268,271],{"class":233,"line":260},3,[231,262,263],{"class":237},"function",[231,265,267],{"class":266},"s2Zo4"," setup",[231,269,270],{"class":245},"()",[231,272,273],{"class":245}," {\n",[231,275,277,280,284,288,291,294,297],{"class":233,"line":276},4,[231,278,279],{"class":266},"  createCanvas",[231,281,283],{"class":282},"swJcz","(",[231,285,287],{"class":286},"sbssI","400",[231,289,290],{"class":245},",",[231,292,293],{"class":286}," 400",[231,295,296],{"class":282},")",[231,298,299],{"class":245},";\n",[231,301,303,306,309,312,315,318,320],{"class":233,"line":302},5,[231,304,305],{"class":241},"  largura",[231,307,308],{"class":245}," =",[231,310,311],{"class":241}," width",[231,313,314],{"class":245}," \u002F",[231,316,317],{"class":286}," 3",[231,319,246],{"class":245},[231,321,322],{"class":249}," \u002F\u002F na setup() iniciamos a variável global com um valor...\n",[231,324,326],{"class":233,"line":325},6,[231,327,328],{"class":245},"}\n",[231,330,332],{"class":233,"line":331},7,[231,333,257],{"emptyLinePlaceholder":256},[231,335,337,339,342,344],{"class":233,"line":336},8,[231,338,263],{"class":237},[231,340,341],{"class":266}," draw",[231,343,270],{"class":245},[231,345,273],{"class":245},[231,347,349,352,354,357,359,362,364,366,368,371,373,375],{"class":233,"line":348},9,[231,350,351],{"class":266},"  line",[231,353,283],{"class":282},[231,355,356],{"class":286},"0",[231,358,290],{"class":245},[231,360,361],{"class":286}," 0",[231,363,290],{"class":245},[231,365,242],{"class":241},[231,367,290],{"class":245},[231,369,370],{"class":286}," 200",[231,372,296],{"class":282},[231,374,246],{"class":245},[231,376,377],{"class":249}," \u002F\u002F ...e usamos o valor no bloco draw!\n",[231,379,381],{"class":233,"line":380},10,[231,382,328],{"class":245},[384,385],"p5-sketch",{"code":386},"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",[189,388,390],{"id":389},"criando-animações","Criando animações",[193,392,393],{},"Execute o código a seguir, que permite movimentar um quadrado pela tela com o mouse.",[215,395,396,397],{},"Código - Quadrado seguindo a posição do mouse",[219,398,399],{"v-slot:code":5},[222,400,402],{"className":224,"code":401,"language":226,"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",[228,403,404,414,432,449,453,457,467,483,511],{"__ignoreMap":5},[231,405,406,408,410,412],{"class":233,"line":234},[231,407,263],{"class":237},[231,409,267],{"class":266},[231,411,270],{"class":245},[231,413,273],{"class":245},[231,415,416,418,420,423,425,428,430],{"class":233,"line":253},[231,417,279],{"class":266},[231,419,283],{"class":282},[231,421,422],{"class":286},"1000",[231,424,290],{"class":245},[231,426,427],{"class":286}," 1000",[231,429,296],{"class":282},[231,431,299],{"class":245},[231,433,434,437,439,442,444,446],{"class":233,"line":260},[231,435,436],{"class":266},"  fill",[231,438,283],{"class":282},[231,440,441],{"class":286},"255",[231,443,296],{"class":282},[231,445,246],{"class":245},[231,447,448],{"class":249}," \u002F\u002F preenchimento na cor branca\n",[231,450,451],{"class":233,"line":276},[231,452,328],{"class":245},[231,454,455],{"class":233,"line":302},[231,456,257],{"emptyLinePlaceholder":256},[231,458,459,461,463,465],{"class":233,"line":325},[231,460,263],{"class":237},[231,462,341],{"class":266},[231,464,270],{"class":245},[231,466,273],{"class":245},[231,468,469,472,474,476,478,480],{"class":233,"line":331},[231,470,471],{"class":266},"  background",[231,473,283],{"class":282},[231,475,356],{"class":286},[231,477,296],{"class":282},[231,479,246],{"class":245},[231,481,482],{"class":249}," \u002F\u002F fundo preto (apaga tudo)\n",[231,484,485,488,490,493,495,498,500,503,505,507,509],{"class":233,"line":336},[231,486,487],{"class":266},"  rect",[231,489,283],{"class":282},[231,491,492],{"class":241},"mouseX",[231,494,290],{"class":245},[231,496,497],{"class":241}," mouseY",[231,499,290],{"class":245},[231,501,502],{"class":286}," 30",[231,504,290],{"class":245},[231,506,502],{"class":286},[231,508,296],{"class":282},[231,510,299],{"class":245},[231,512,513],{"class":233,"line":348},[231,514,328],{"class":245},[384,516],{"code":517},"function setup() {\n  createCanvas(1000, 1000);\n  fill(255);\n}\n\nfunction draw() {\n  background(0);\n  rect(mouseX, mouseY, 30, 30);\n}\n",[193,519,520,521,524,525,527],{},"Devido à execução da função ",[197,522,523],{},"background()",", a cada repetição da função ",[197,526,203],{}," 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.",[193,529,530,531,534,535,537],{},"Experimente incluir a chamada da função ",[197,532,533],{},"noCursor()"," dentro da ",[197,536,199],{},". O cursor do mouse será apagado e será como se o quadrado passasse a ser o novo cursor.",[539,540,541,546],"blockquote",{},[193,542,543],{},[197,544,545],{},"Atividade 2",[193,547,548],{},"Substitua o cursor por imagens vetoriais em formato SVG (veja o capítulo anterior).",[193,550,551],{},"Agora procure entender o funcionamento do programa a seguir, que move um quadrado na diagonal da tela.",[215,553,554,555],{},"Código - Quadrado se movendo continuamente na diagonal",[219,556,557],{"v-slot:code":5},[222,558,560],{"className":224,"code":559,"language":226,"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",[228,561,562,567,594,598,608,624,638,649,663,675,689,694,699,710,725,752,768,786],{"__ignoreMap":5},[231,563,564],{"class":233,"line":234},[231,565,566],{"class":249},"\u002F\u002F variáveis globais\n",[231,568,569,571,574,576,579,581,584,586,589,591],{"class":233,"line":253},[231,570,238],{"class":237},[231,572,573],{"class":241}," xq",[231,575,290],{"class":245},[231,577,578],{"class":241}," yq",[231,580,290],{"class":245},[231,582,583],{"class":241}," moveXq",[231,585,290],{"class":245},[231,587,588],{"class":241}," moveYq",[231,590,246],{"class":245},[231,592,593],{"class":249}," \u002F\u002F posição e incrementos que geram movimentos\n",[231,595,596],{"class":233,"line":260},[231,597,257],{"emptyLinePlaceholder":256},[231,599,600,602,604,606],{"class":233,"line":276},[231,601,263],{"class":237},[231,603,267],{"class":266},[231,605,270],{"class":245},[231,607,273],{"class":245},[231,609,610,612,614,616,618,620,622],{"class":233,"line":302},[231,611,279],{"class":266},[231,613,283],{"class":282},[231,615,422],{"class":286},[231,617,290],{"class":245},[231,619,427],{"class":286},[231,621,296],{"class":282},[231,623,299],{"class":245},[231,625,626,628,630,632,634,636],{"class":233,"line":325},[231,627,436],{"class":266},[231,629,283],{"class":282},[231,631,441],{"class":286},[231,633,296],{"class":282},[231,635,246],{"class":245},[231,637,448],{"class":249},[231,639,640,643,645,647],{"class":233,"line":331},[231,641,642],{"class":241},"  xq",[231,644,308],{"class":245},[231,646,361],{"class":286},[231,648,299],{"class":245},[231,650,651,654,656,658,660],{"class":233,"line":336},[231,652,653],{"class":241},"  yq",[231,655,308],{"class":245},[231,657,361],{"class":286},[231,659,246],{"class":245},[231,661,662],{"class":249}," \u002F\u002F inicia no canto superior esquerdo\n",[231,664,665,668,670,673],{"class":233,"line":348},[231,666,667],{"class":241},"  moveXq",[231,669,308],{"class":245},[231,671,672],{"class":286}," 2",[231,674,299],{"class":245},[231,676,677,680,682,684,686],{"class":233,"line":380},[231,678,679],{"class":241},"  moveYq",[231,681,308],{"class":245},[231,683,672],{"class":286},[231,685,246],{"class":245},[231,687,688],{"class":249}," \u002F\u002F valores a incrementar repetidamente a posição\n",[231,690,692],{"class":233,"line":691},11,[231,693,328],{"class":245},[231,695,697],{"class":233,"line":696},12,[231,698,257],{"emptyLinePlaceholder":256},[231,700,702,704,706,708],{"class":233,"line":701},13,[231,703,263],{"class":237},[231,705,341],{"class":266},[231,707,270],{"class":245},[231,709,273],{"class":245},[231,711,713,715,717,719,721,723],{"class":233,"line":712},14,[231,714,471],{"class":266},[231,716,283],{"class":282},[231,718,356],{"class":286},[231,720,296],{"class":282},[231,722,246],{"class":245},[231,724,482],{"class":249},[231,726,728,730,732,735,737,739,741,744,746,748,750],{"class":233,"line":727},15,[231,729,487],{"class":266},[231,731,283],{"class":282},[231,733,734],{"class":241},"xq",[231,736,290],{"class":245},[231,738,578],{"class":241},[231,740,290],{"class":245},[231,742,743],{"class":286}," 20",[231,745,290],{"class":245},[231,747,743],{"class":286},[231,749,296],{"class":282},[231,751,299],{"class":245},[231,753,755,757,759,761,764,766],{"class":233,"line":754},16,[231,756,642],{"class":241},[231,758,308],{"class":245},[231,760,573],{"class":241},[231,762,763],{"class":245}," +",[231,765,583],{"class":241},[231,767,299],{"class":245},[231,769,771,773,775,777,779,781,783],{"class":233,"line":770},17,[231,772,653],{"class":241},[231,774,308],{"class":245},[231,776,578],{"class":241},[231,778,763],{"class":245},[231,780,588],{"class":241},[231,782,246],{"class":245},[231,784,785],{"class":249}," \u002F\u002F atualiza a posição\n",[231,787,789],{"class":233,"line":788},18,[231,790,328],{"class":245},[384,792],{"code":793},"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",[539,795,796,801],{},[193,797,798],{},[197,799,800],{},"Atividade 3",[193,802,803],{},"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?",[539,805,806,811],{},[193,807,808],{},[197,809,810],{},"Atividade 4",[193,812,813],{},"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.",[815,816,817],"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":253,"depth":253,"links":819},[820,821],{"id":191,"depth":260,"text":144},{"id":389,"depth":260,"text":390},null,"md",{},{"title":144,"description":5},"_VXRV33XlQwhe-gLP3bnOf80-yng7KYujR04TRmbqUg",[828,830],{"title":142,"path":138,"stem":139,"description":829,"children":-1},"Entenda como fazer projetos animados com p5.js",{"title":148,"path":149,"stem":150,"description":831,"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",1786195203900]