[{"data":1,"prerenderedAt":1939},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-animacao-eventos":139,"-pcs3021-animacao-eventos-surround":1935},[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":120,"body":141,"categoria":1929,"creditoLink":1929,"creditos":1929,"descricao":1929,"description":1930,"eaulas":1929,"extension":1931,"meta":1932,"navigation":451,"path":121,"seo":1933,"stem":122,"video":1929,"youtube":1929,"youtubeLink":1929,"__hash__":1934},"docs\u002Fpcs3021\u002F5.animacao\u002F3.eventos.md",{"type":142,"value":143,"toc":1924},"minimark",[144,149,169,174,200,203,251,259,351,354,359,372,530,534,540,559,564,584,709,712,726,731,758,785,788,953,956,962,1190,1193,1245,1427,1449,1583,1598,1761,1764,1769,1915,1917,1920],[145,146,148],"h2",{"id":147},"interagindo-com-a-tela-gráfica","Interagindo com a Tela Gráfica",[150,151,152,153,157,158,160,161,165,166,168],"p",{},"Para interagir com a tela gráfica precisaremos usar algum dispositivo de entrada. Por enquanto usaremos o mouse e o teclado, mas é possível usar outros dispositivos, como por exemplo o microfone ou a câmera, para enviar informações ao computador. Uma interação deve possuir ação e reação, não bastando passarmos informações ao programa. É essencial que tenhamos ",[154,155,156],"em",{},"feedback",", ou seja, que vejamos os efeitos de nossas ações no comportamento do programa, de preferência instantaneamente. Esse ",[154,159,156],{}," pode ser sonoro, textual e\u002Fou na forma de imagem (eventualmente também na forma de movimentos físicos, como no caso de um robô ou de outros equipamentos controlados pelo computador). Usaremos a função ",[162,163,164],"strong",{},"draw()"," para dar retorno visual, ao atualizar o conteúdo da tela gráfica em função das ações do usuário. Como a ",[162,167,164],{}," é executada 60 vezes por segundo, as respostas a essas ações serão visualizadas instantaneamente. Para obter as ações executadas pelo usuário, via mouse e\u002Fou teclado, usaremos as funções que tratam os eventos (movimentos, cliques, acionamentos de tecla) desses dispositivos.",[170,171,173],"h3",{"id":172},"funções-de-tratamento-de-eventos-teclado-e-mouse","Funções de tratamento de eventos: Teclado e Mouse",[150,175,176,177,180,181,183,184,186,187,189,190,192,193,196,197,199],{},"Uma função que trata eventos é disparada sempre que ocorre uma situação específica à qual esteja vinculada. Dois exemplos desse tipo de função são as já conhecidas ",[162,178,179],{},"setup()"," e ",[162,182,164],{},". A primeira, está vinculada ao evento de início de execução do programa. Assim, sempre que um programa é executado a ",[162,185,179],{}," é acionada. Como esse evento (início de execução) só ocorre uma vez a cada execução do programa, a ",[162,188,179],{}," é executada uma única vez também. Já a função ",[162,191,164],{}," está associada a um contador de tempo, que na configuração ",[154,194,195],{},"default"," dispara um evento a cada 1\u002F60 de segundo. Dessa forma a ",[162,198,164],{}," é executada ininterruptamente 60 vezes por segundo.",[150,201,202],{},"As funções de tratamento de eventos inicialmente não possuem conteúdo. Cabe ao programador escrever a sequência de comandos que deseja sejam executados a cada vez que determinado evento de seu interesse ocorra. E esse conteúdo deve ser escrito num bloco que especifica a função correspondente àquele evento, conforme já visto para as funções setup() e draw():",[204,205,209],"pre",{"className":206,"code":207,"language":208,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function nomeDaFuncao() {\n  \u002F\u002F comandos que serão executados quando ocorrer o evento associado\n  \u002F\u002F a essa função\n}\n","js",[210,211,212,232,239,245],"code",{"__ignoreMap":5},[213,214,217,221,225,229],"span",{"class":215,"line":216},"line",1,[213,218,220],{"class":219},"spNyl","function",[213,222,224],{"class":223},"s2Zo4"," nomeDaFuncao",[213,226,228],{"class":227},"sMK4o","()",[213,230,231],{"class":227}," {\n",[213,233,235],{"class":215,"line":234},2,[213,236,238],{"class":237},"sHwdD","  \u002F\u002F comandos que serão executados quando ocorrer o evento associado\n",[213,240,242],{"class":215,"line":241},3,[213,243,244],{"class":237},"  \u002F\u002F a essa função\n",[213,246,248],{"class":215,"line":247},4,[213,249,250],{"class":227},"}\n",[150,252,253,254,180,256,258],{},"O p5.js inclui algumas outras funções que são executadas automaticamente, além da ",[162,255,179],{},[162,257,164],{},". Entre elas estão funções para o tratamento de comandos de teclado e mouse, conforme resumido na lista a seguir:",[260,261,262,275],"table",{},[263,264,265],"thead",{},[266,267,268,272],"tr",{},[269,270,271],"th",{},"Função",[269,273,274],{},"executada automaticamente quando...",[276,277,278,287,295,303,311,319,327,335,343],"tbody",{},[266,279,280,284],{},[281,282,283],"td",{},"keyPressed()",[281,285,286],{},"Uma tecla do teclado é pressionada",[266,288,289,292],{},[281,290,291],{},"keyReleased()",[281,293,294],{},"Uma tecla do teclado para de ser pressionada",[266,296,297,300],{},[281,298,299],{},"keyTyped()",[281,301,302],{},"Uma tecla do teclado é pressionada e liberada",[266,304,305,308],{},[281,306,307],{},"mouseClicked()",[281,309,310],{},"Um botão do mouse é pressionado e liberado",[266,312,313,316],{},[281,314,315],{},"mouseDragged()",[281,317,318],{},"O mouse é movimentado com um botão pressionado",[266,320,321,324],{},[281,322,323],{},"mouseMoved()",[281,325,326],{},"O mouse é movimentado sem nenhum botão pressionado",[266,328,329,332],{},[281,330,331],{},"mousePressed()",[281,333,334],{},"Um botão do mouse é pressionado",[266,336,337,340],{},[281,338,339],{},"mouseReleased()",[281,341,342],{},"Um botão do mouse deixa de ser pressionado",[266,344,345,348],{},[281,346,347],{},"mouseWheel()",[281,349,350],{},"A roda do mouse é rotacionada",[150,352,353],{},"Todas essas funções têm exatamente o mesmo nome em p5.js.",[150,355,356],{},[162,357,358],{},"Exemplo: Tratamento de evento de mouse",[150,360,361,362,364,365,368,369,371],{},"Suponha que se deseja desenhar uma bolinha na tela, na posição do mouse, toda vez que esse for clicado. Uma forma simples de fazer isso é programar a função de tratamento de evento ",[162,363,307],{}," para que faça o desenho de um círculo na posição do mouse. Toda vez que o mouse for clicado será gerado o evento \"",[162,366,367],{},"mouseClicked","\" e a função correspondente ",[162,370,307],{}," será executada. Como a programamos para desenhar um círculo na posição do mouse, obteremos o efeito desejado. Execute o código a seguir e confira (clique dentro do canvas).",[373,374,375,376],"code-preview",{},"Código 4.5 - Desenhando um círculo a cada clique do mouse",[377,378,379],"template",{"v-slot:code":5},[204,380,382],{"className":206,"code":381,"language":208,"meta":5,"style":5},"function setup() { \u002F\u002F executada automaticamente no início de execução do programa\n  createCanvas(500, 500);\n  background(0); \u002F\u002F fundo preto\n}\n\nfunction draw() { \u002F\u002F mesmo vazia é necessária para que a janela seja redesenhada\n}\n\nfunction mouseClicked() { \u002F\u002F executada automaticamente sempre que o mouse for clicado\n  \u002F\u002F desenha círculo de 20 pixels na posição do mouse\n  circle(mouseX, mouseY, 20);\n}\n",[210,383,384,399,424,442,446,453,468,473,478,493,499,525],{"__ignoreMap":5},[213,385,386,388,391,393,396],{"class":215,"line":216},[213,387,220],{"class":219},[213,389,390],{"class":223}," setup",[213,392,228],{"class":227},[213,394,395],{"class":227}," {",[213,397,398],{"class":237}," \u002F\u002F executada automaticamente no início de execução do programa\n",[213,400,401,404,408,412,415,418,421],{"class":215,"line":234},[213,402,403],{"class":223},"  createCanvas",[213,405,407],{"class":406},"swJcz","(",[213,409,411],{"class":410},"sbssI","500",[213,413,414],{"class":227},",",[213,416,417],{"class":410}," 500",[213,419,420],{"class":406},")",[213,422,423],{"class":227},";\n",[213,425,426,429,431,434,436,439],{"class":215,"line":241},[213,427,428],{"class":223},"  background",[213,430,407],{"class":406},[213,432,433],{"class":410},"0",[213,435,420],{"class":406},[213,437,438],{"class":227},";",[213,440,441],{"class":237}," \u002F\u002F fundo preto\n",[213,443,444],{"class":215,"line":247},[213,445,250],{"class":227},[213,447,449],{"class":215,"line":448},5,[213,450,452],{"emptyLinePlaceholder":451},true,"\n",[213,454,456,458,461,463,465],{"class":215,"line":455},6,[213,457,220],{"class":219},[213,459,460],{"class":223}," draw",[213,462,228],{"class":227},[213,464,395],{"class":227},[213,466,467],{"class":237}," \u002F\u002F mesmo vazia é necessária para que a janela seja redesenhada\n",[213,469,471],{"class":215,"line":470},7,[213,472,250],{"class":227},[213,474,476],{"class":215,"line":475},8,[213,477,452],{"emptyLinePlaceholder":451},[213,479,481,483,486,488,490],{"class":215,"line":480},9,[213,482,220],{"class":219},[213,484,485],{"class":223}," mouseClicked",[213,487,228],{"class":227},[213,489,395],{"class":227},[213,491,492],{"class":237}," \u002F\u002F executada automaticamente sempre que o mouse for clicado\n",[213,494,496],{"class":215,"line":495},10,[213,497,498],{"class":237},"  \u002F\u002F desenha círculo de 20 pixels na posição do mouse\n",[213,500,502,505,507,511,513,516,518,521,523],{"class":215,"line":501},11,[213,503,504],{"class":223},"  circle",[213,506,407],{"class":406},[213,508,510],{"class":509},"sTEyZ","mouseX",[213,512,414],{"class":227},[213,514,515],{"class":509}," mouseY",[213,517,414],{"class":227},[213,519,520],{"class":410}," 20",[213,522,420],{"class":406},[213,524,423],{"class":227},[213,526,528],{"class":215,"line":527},12,[213,529,250],{"class":227},[531,532],"p5-sketch",{"code":533},"function setup() {\n  createCanvas(500, 500);\n  background(0);\n}\n\nfunction draw() {\n}\n\nfunction mouseClicked() {\n  circle(mouseX, mouseY, 20);\n}\n",[150,535,536,537,539],{},"Como você pode observar, não há nada dentro da função ",[162,538,164],{}," e mesmo assim você consegue gerar uma janela interativa. Entretanto, é importante ressaltar que, de qualquer forma, é necessário que ela seja escrita mesmo vazia, pois só assim a janela será redesenhada e refletirá as eventuais ações executadas pelas outras funções de tratamento de eventos.",[541,542,543,548],"blockquote",{},[150,544,545],{},[162,546,547],{},"Atividade 5",[150,549,550,551,554,555,558],{},"Escreva um programa que desenha bolinhas brancas enquanto o mouse for movido com botão pressionado (",[162,552,553],{},"mouseDragged",") e limpa a tela quando o botão do mouse for solto (",[162,556,557],{},"mouseReleased",").",[150,560,561],{},[162,562,563],{},"Exemplo: Tratamento de evento de teclado",[150,565,566,567,569,570,572,573,576,577,579,580,583],{},"Vamos testar o funcionamento da função ",[162,568,299],{},". Toda vez que uma tecla é pressionada essa função é disparada. Mas para que algo aconteça, como por exemplo, mostrar na tela o que foi digitado, é necessário escrever o programa a ser executado pela ",[162,571,299],{},". O caractere da última tecla pressionada pode ser obtido na variável automática de sistema ",[162,574,575],{},"key",". Diferente do Processing, em p5.js a variável ",[162,578,575],{}," já é diretamente um texto (String), então não é preciso nenhuma conversão para usá-la em ",[162,581,582],{},"text()",". Execute o programa a seguir para testar a função que trata o evento de digitar no teclado.",[373,585,586,587],{},"Código 4.6 - Mostrando a tecla digitada na posição do mouse",[377,588,589],{"v-slot:code":5},[204,590,592],{"className":206,"code":591,"language":208,"meta":5,"style":5},"function setup() {\n  createCanvas(500, 300);\n  background(0);\n}\n\nfunction draw() { \u002F\u002F mesmo vazia é necessária para que a janela seja redesenhada\n}\n\n\u002F\u002F função executada quando uma tecla é pressionada e liberada\nfunction keyTyped() {\n  \u002F\u002F imprime a tecla digitada na posição do mouse\n  text(key, mouseX, mouseY);\n}\n",[210,593,594,604,621,633,637,641,653,657,661,666,677,682,704],{"__ignoreMap":5},[213,595,596,598,600,602],{"class":215,"line":216},[213,597,220],{"class":219},[213,599,390],{"class":223},[213,601,228],{"class":227},[213,603,231],{"class":227},[213,605,606,608,610,612,614,617,619],{"class":215,"line":234},[213,607,403],{"class":223},[213,609,407],{"class":406},[213,611,411],{"class":410},[213,613,414],{"class":227},[213,615,616],{"class":410}," 300",[213,618,420],{"class":406},[213,620,423],{"class":227},[213,622,623,625,627,629,631],{"class":215,"line":241},[213,624,428],{"class":223},[213,626,407],{"class":406},[213,628,433],{"class":410},[213,630,420],{"class":406},[213,632,423],{"class":227},[213,634,635],{"class":215,"line":247},[213,636,250],{"class":227},[213,638,639],{"class":215,"line":448},[213,640,452],{"emptyLinePlaceholder":451},[213,642,643,645,647,649,651],{"class":215,"line":455},[213,644,220],{"class":219},[213,646,460],{"class":223},[213,648,228],{"class":227},[213,650,395],{"class":227},[213,652,467],{"class":237},[213,654,655],{"class":215,"line":470},[213,656,250],{"class":227},[213,658,659],{"class":215,"line":475},[213,660,452],{"emptyLinePlaceholder":451},[213,662,663],{"class":215,"line":480},[213,664,665],{"class":237},"\u002F\u002F função executada quando uma tecla é pressionada e liberada\n",[213,667,668,670,673,675],{"class":215,"line":495},[213,669,220],{"class":219},[213,671,672],{"class":223}," keyTyped",[213,674,228],{"class":227},[213,676,231],{"class":227},[213,678,679],{"class":215,"line":501},[213,680,681],{"class":237},"  \u002F\u002F imprime a tecla digitada na posição do mouse\n",[213,683,684,687,689,691,693,696,698,700,702],{"class":215,"line":527},[213,685,686],{"class":223},"  text",[213,688,407],{"class":406},[213,690,575],{"class":509},[213,692,414],{"class":227},[213,694,695],{"class":509}," mouseX",[213,697,414],{"class":227},[213,699,515],{"class":509},[213,701,420],{"class":406},[213,703,423],{"class":227},[213,705,707],{"class":215,"line":706},13,[213,708,250],{"class":227},[531,710],{"code":711},"function setup() {\n  createCanvas(500, 300);\n  background(0);\n  fill(255);\n}\n\nfunction draw() {\n}\n\nfunction keyTyped() {\n  text(key, mouseX, mouseY);\n}\n",[541,713,714,719],{},[150,715,716],{},[162,717,718],{},"Atividade 6",[150,720,721,722,725],{},"Elabore um programa que escreve na tela os caracteres que são digitados, iniciando na posição (0,50) e adicionando 10 pixels na posição ",[162,723,724],{},"x"," a cada caractere digitado.",[150,727,728],{},[162,729,730],{},"Variáveis automáticas de entrada",[150,732,733,734,736,737,736,740,736,743,736,746,736,749,180,751,754,755,757],{},"Para muitas situações, podemos simplesmente utilizar as variáveis automáticas do p5.js, tais como ",[162,735,510],{},", ",[162,738,739],{},"mouseY",[162,741,742],{},"mouseIsPressed",[162,744,745],{},"mouseButton",[162,747,748],{},"keyIsPressed",[162,750,575],{},[162,752,753],{},"keyCode"," dentro da função ",[162,756,164],{}," para responder a comandos do usuário. Essas variáveis são úteis quando precisamos responder de forma mais imediata ou, ainda, armazenar sequências de comandos, pois elas só armazenam a última tecla ou botão pressionados.",[541,759,760,765],{},[150,761,762],{},[162,763,764],{},"Atenção — diferença importante em relação ao Processing",[150,766,767,768,771,772,774,775,777,778,780,781,784],{},"No Processing, a variável booleana que indica se uma tecla está pressionada se chama ",[162,769,770],{},"keyPressed",", mesmo nome da função de evento ",[162,773,283],{}," — o que é possível porque Java trata variáveis e funções em espaços de nomes diferentes. Em JavaScript isso causaria um conflito, já que uma função é armazenada numa variável comum. Por isso, o p5.js renomeou essa variável booleana para ",[162,776,748],{},". O mesmo vale para o mouse: a variável booleana chama-se ",[162,779,742],{},", em vez de ",[162,782,783],{},"mousePressed",", que continua sendo o nome da função de evento.",[150,786,787],{},"Para ilustrar esses conceitos, vamos comparar dois programas. No primeiro, vamos escrever na janela a tecla que o usuário está pressionando, usando as variáveis automáticas.",[373,789,790,791],{},"Código 4.7 - Uso da variável keyIsPressed (com efeito colateral indesejado)",[377,792,793],{"v-slot:code":5},[204,794,796],{"className":206,"code":795,"language":208,"meta":5,"style":5},"let x = 0;\n\nfunction setup() {\n  createCanvas(500, 300);\n  background(0);\n}\n\nfunction draw() {\n  \u002F\u002F existe tecla apertada?\n  if (keyIsPressed) {\n    \u002F\u002F escreve na tela\n    text(key, x, 50);\n    x = x + 10;\n  }\n}\n",[210,797,798,814,818,828,844,856,860,864,874,879,896,901,924,942,948],{"__ignoreMap":5},[213,799,800,803,806,809,812],{"class":215,"line":216},[213,801,802],{"class":219},"let",[213,804,805],{"class":509}," x ",[213,807,808],{"class":227},"=",[213,810,811],{"class":410}," 0",[213,813,423],{"class":227},[213,815,816],{"class":215,"line":234},[213,817,452],{"emptyLinePlaceholder":451},[213,819,820,822,824,826],{"class":215,"line":241},[213,821,220],{"class":219},[213,823,390],{"class":223},[213,825,228],{"class":227},[213,827,231],{"class":227},[213,829,830,832,834,836,838,840,842],{"class":215,"line":247},[213,831,403],{"class":223},[213,833,407],{"class":406},[213,835,411],{"class":410},[213,837,414],{"class":227},[213,839,616],{"class":410},[213,841,420],{"class":406},[213,843,423],{"class":227},[213,845,846,848,850,852,854],{"class":215,"line":448},[213,847,428],{"class":223},[213,849,407],{"class":406},[213,851,433],{"class":410},[213,853,420],{"class":406},[213,855,423],{"class":227},[213,857,858],{"class":215,"line":455},[213,859,250],{"class":227},[213,861,862],{"class":215,"line":470},[213,863,452],{"emptyLinePlaceholder":451},[213,865,866,868,870,872],{"class":215,"line":475},[213,867,220],{"class":219},[213,869,460],{"class":223},[213,871,228],{"class":227},[213,873,231],{"class":227},[213,875,876],{"class":215,"line":480},[213,877,878],{"class":237},"  \u002F\u002F existe tecla apertada?\n",[213,880,881,885,888,890,893],{"class":215,"line":495},[213,882,884],{"class":883},"s7zQu","  if",[213,886,887],{"class":406}," (",[213,889,748],{"class":509},[213,891,892],{"class":406},") ",[213,894,895],{"class":227},"{\n",[213,897,898],{"class":215,"line":501},[213,899,900],{"class":237},"    \u002F\u002F escreve na tela\n",[213,902,903,906,908,910,912,915,917,920,922],{"class":215,"line":527},[213,904,905],{"class":223},"    text",[213,907,407],{"class":406},[213,909,575],{"class":509},[213,911,414],{"class":227},[213,913,914],{"class":509}," x",[213,916,414],{"class":227},[213,918,919],{"class":410}," 50",[213,921,420],{"class":406},[213,923,423],{"class":227},[213,925,926,929,932,934,937,940],{"class":215,"line":706},[213,927,928],{"class":509},"    x",[213,930,931],{"class":227}," =",[213,933,914],{"class":509},[213,935,936],{"class":227}," +",[213,938,939],{"class":410}," 10",[213,941,423],{"class":227},[213,943,945],{"class":215,"line":944},14,[213,946,947],{"class":227},"  }\n",[213,949,951],{"class":215,"line":950},15,[213,952,250],{"class":227},[531,954],{"code":955},"let x = 0;\n\nfunction setup() {\n  createCanvas(500, 300);\n  background(0);\n  fill(255);\n}\n\nfunction draw() {\n  if (keyIsPressed) {\n    text(key, x, 50);\n    x = x + 10;\n  }\n}\n",[150,957,958,959,961],{},"Se executarmos esse programa, veremos que cada tecla pressionada é repetida várias vezes na tela. A razão para isso é que a função ",[162,960,164],{}," é executada 60 vezes por segundo, portanto mais rapidamente que o tempo que um humano leva para pressionar e soltar uma tecla. O que queremos, na verdade, é detectar cada tecla que foi pressionada e atualizar a tela somente uma vez. Isso pode ser feito com o programa a seguir.",[373,963,964,965],{},"Código 4.8 - Detectando cada tecla digitada uma única vez",[377,966,967],{"v-slot:code":5},[204,968,970],{"className":206,"code":969,"language":208,"meta":5,"style":5},"let x = 0;\nlet tecla = \"\";\n\nfunction setup() {\n  createCanvas(500, 300);\n  background(0);\n}\n\n\u002F\u002F função executada quando uma tecla é pressionada e liberada\nfunction keyTyped() {\n  \u002F\u002F memoriza a tecla que foi digitada\n  tecla = key;\n}\n\nfunction draw() {\n  \u002F\u002F existe tecla apertada?\n  if (tecla !== \"\") {\n    \u002F\u002F escreve na tela\n    text(tecla, x, 50);\n    \u002F\u002F \"esquece\" a tecla que já foi desenhada na tela\n    tecla = \"\";\n    x = x + 10;\n  }\n}\n",[210,971,972,984,998,1002,1012,1028,1040,1044,1048,1052,1062,1067,1079,1083,1087,1097,1102,1121,1126,1147,1153,1165,1180,1185],{"__ignoreMap":5},[213,973,974,976,978,980,982],{"class":215,"line":216},[213,975,802],{"class":219},[213,977,805],{"class":509},[213,979,808],{"class":227},[213,981,811],{"class":410},[213,983,423],{"class":227},[213,985,986,988,991,993,996],{"class":215,"line":234},[213,987,802],{"class":219},[213,989,990],{"class":509}," tecla ",[213,992,808],{"class":227},[213,994,995],{"class":227}," \"\"",[213,997,423],{"class":227},[213,999,1000],{"class":215,"line":241},[213,1001,452],{"emptyLinePlaceholder":451},[213,1003,1004,1006,1008,1010],{"class":215,"line":247},[213,1005,220],{"class":219},[213,1007,390],{"class":223},[213,1009,228],{"class":227},[213,1011,231],{"class":227},[213,1013,1014,1016,1018,1020,1022,1024,1026],{"class":215,"line":448},[213,1015,403],{"class":223},[213,1017,407],{"class":406},[213,1019,411],{"class":410},[213,1021,414],{"class":227},[213,1023,616],{"class":410},[213,1025,420],{"class":406},[213,1027,423],{"class":227},[213,1029,1030,1032,1034,1036,1038],{"class":215,"line":455},[213,1031,428],{"class":223},[213,1033,407],{"class":406},[213,1035,433],{"class":410},[213,1037,420],{"class":406},[213,1039,423],{"class":227},[213,1041,1042],{"class":215,"line":470},[213,1043,250],{"class":227},[213,1045,1046],{"class":215,"line":475},[213,1047,452],{"emptyLinePlaceholder":451},[213,1049,1050],{"class":215,"line":480},[213,1051,665],{"class":237},[213,1053,1054,1056,1058,1060],{"class":215,"line":495},[213,1055,220],{"class":219},[213,1057,672],{"class":223},[213,1059,228],{"class":227},[213,1061,231],{"class":227},[213,1063,1064],{"class":215,"line":501},[213,1065,1066],{"class":237},"  \u002F\u002F memoriza a tecla que foi digitada\n",[213,1068,1069,1072,1074,1077],{"class":215,"line":527},[213,1070,1071],{"class":509},"  tecla",[213,1073,931],{"class":227},[213,1075,1076],{"class":509}," key",[213,1078,423],{"class":227},[213,1080,1081],{"class":215,"line":706},[213,1082,250],{"class":227},[213,1084,1085],{"class":215,"line":944},[213,1086,452],{"emptyLinePlaceholder":451},[213,1088,1089,1091,1093,1095],{"class":215,"line":950},[213,1090,220],{"class":219},[213,1092,460],{"class":223},[213,1094,228],{"class":227},[213,1096,231],{"class":227},[213,1098,1100],{"class":215,"line":1099},16,[213,1101,878],{"class":237},[213,1103,1105,1107,1109,1112,1115,1117,1119],{"class":215,"line":1104},17,[213,1106,884],{"class":883},[213,1108,887],{"class":406},[213,1110,1111],{"class":509},"tecla",[213,1113,1114],{"class":227}," !==",[213,1116,995],{"class":227},[213,1118,892],{"class":406},[213,1120,895],{"class":227},[213,1122,1124],{"class":215,"line":1123},18,[213,1125,900],{"class":237},[213,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145],{"class":215,"line":1128},19,[213,1130,905],{"class":223},[213,1132,407],{"class":406},[213,1134,1111],{"class":509},[213,1136,414],{"class":227},[213,1138,914],{"class":509},[213,1140,414],{"class":227},[213,1142,919],{"class":410},[213,1144,420],{"class":406},[213,1146,423],{"class":227},[213,1148,1150],{"class":215,"line":1149},20,[213,1151,1152],{"class":237},"    \u002F\u002F \"esquece\" a tecla que já foi desenhada na tela\n",[213,1154,1156,1159,1161,1163],{"class":215,"line":1155},21,[213,1157,1158],{"class":509},"    tecla",[213,1160,931],{"class":227},[213,1162,995],{"class":227},[213,1164,423],{"class":227},[213,1166,1168,1170,1172,1174,1176,1178],{"class":215,"line":1167},22,[213,1169,928],{"class":509},[213,1171,931],{"class":227},[213,1173,914],{"class":509},[213,1175,936],{"class":227},[213,1177,939],{"class":410},[213,1179,423],{"class":227},[213,1181,1183],{"class":215,"line":1182},23,[213,1184,947],{"class":227},[213,1186,1188],{"class":215,"line":1187},24,[213,1189,250],{"class":227},[531,1191],{"code":1192},"let x = 0;\nlet tecla = \"\";\n\nfunction setup() {\n  createCanvas(500, 300);\n  background(0);\n  fill(255);\n}\n\nfunction keyTyped() {\n  tecla = key;\n}\n\nfunction draw() {\n  if (tecla !== \"\") {\n    text(tecla, x, 50);\n    tecla = \"\";\n    x = x + 10;\n  }\n}\n",[541,1194,1195,1200,1215],{},[150,1196,1197],{},[162,1198,1199],{},"Saiba mais sobre escrever textos e números na janela gráfica",[150,1201,1202,1203,1206,1207,1210,1211,1214],{},"Você pode alterar o tamanho da fonte usando o comando ",[162,1204,1205],{},"textSize",", a cor através do comando ",[162,1208,1209],{},"fill"," e o alinhamento do texto através do comando ",[162,1212,1213],{},"textAlign",".",[150,1216,1217,1218,1221,1222,1225,1226,1229,1230,1233,1234,1237,1238,1241,1242,1244],{},"Na seção anterior, escrevemos o texto a ser desenhado na tela diretamente no comando ",[210,1219,1220],{},"text",". No entanto, também é possível armazenar texto em variáveis. O programa a seguir mostra o uso de uma variável desse tipo, além de uma fonte carregada de um arquivo. Diferente do Processing (que usa o formato proprietário ",[162,1223,1224],{},".vlw",", gerado a partir do menu ",[162,1227,1228],{},"Tools → Create Font","), em p5.js as fontes são carregadas diretamente de arquivos ",[162,1231,1232],{},".ttf"," ou ",[162,1235,1236],{},".otf",", dentro da função ",[162,1239,1240],{},"preload()",", que garante que a fonte termine de carregar antes do ",[210,1243,179],{}," ser executado.",[204,1246,1248],{"className":206,"code":1247,"language":208,"meta":5,"style":5},"let f;\n\nfunction preload() {\n  f = loadFont('minhafonte.ttf');\n}\n\nfunction setup() {\n  createCanvas(500, 200);\n  background(0);\n  fill(255);\n  textFont(f);\n  let t;\n  t = \"teste 1 2 3\";\n  text(t, 50, 50);\n}\n",[210,1249,1250,1259,1263,1274,1299,1303,1307,1317,1334,1346,1360,1374,1384,1402,1423],{"__ignoreMap":5},[213,1251,1252,1254,1257],{"class":215,"line":216},[213,1253,802],{"class":219},[213,1255,1256],{"class":509}," f",[213,1258,423],{"class":227},[213,1260,1261],{"class":215,"line":234},[213,1262,452],{"emptyLinePlaceholder":451},[213,1264,1265,1267,1270,1272],{"class":215,"line":241},[213,1266,220],{"class":219},[213,1268,1269],{"class":223}," preload",[213,1271,228],{"class":227},[213,1273,231],{"class":227},[213,1275,1276,1279,1281,1284,1286,1289,1293,1295,1297],{"class":215,"line":247},[213,1277,1278],{"class":509},"  f",[213,1280,931],{"class":227},[213,1282,1283],{"class":223}," loadFont",[213,1285,407],{"class":406},[213,1287,1288],{"class":227},"'",[213,1290,1292],{"class":1291},"sfazB","minhafonte.ttf",[213,1294,1288],{"class":227},[213,1296,420],{"class":406},[213,1298,423],{"class":227},[213,1300,1301],{"class":215,"line":448},[213,1302,250],{"class":227},[213,1304,1305],{"class":215,"line":455},[213,1306,452],{"emptyLinePlaceholder":451},[213,1308,1309,1311,1313,1315],{"class":215,"line":470},[213,1310,220],{"class":219},[213,1312,390],{"class":223},[213,1314,228],{"class":227},[213,1316,231],{"class":227},[213,1318,1319,1321,1323,1325,1327,1330,1332],{"class":215,"line":475},[213,1320,403],{"class":223},[213,1322,407],{"class":406},[213,1324,411],{"class":410},[213,1326,414],{"class":227},[213,1328,1329],{"class":410}," 200",[213,1331,420],{"class":406},[213,1333,423],{"class":227},[213,1335,1336,1338,1340,1342,1344],{"class":215,"line":480},[213,1337,428],{"class":223},[213,1339,407],{"class":406},[213,1341,433],{"class":410},[213,1343,420],{"class":406},[213,1345,423],{"class":227},[213,1347,1348,1351,1353,1356,1358],{"class":215,"line":495},[213,1349,1350],{"class":223},"  fill",[213,1352,407],{"class":406},[213,1354,1355],{"class":410},"255",[213,1357,420],{"class":406},[213,1359,423],{"class":227},[213,1361,1362,1365,1367,1370,1372],{"class":215,"line":501},[213,1363,1364],{"class":223},"  textFont",[213,1366,407],{"class":406},[213,1368,1369],{"class":509},"f",[213,1371,420],{"class":406},[213,1373,423],{"class":227},[213,1375,1376,1379,1382],{"class":215,"line":527},[213,1377,1378],{"class":219},"  let",[213,1380,1381],{"class":509}," t",[213,1383,423],{"class":227},[213,1385,1386,1389,1391,1394,1397,1400],{"class":215,"line":706},[213,1387,1388],{"class":509},"  t",[213,1390,931],{"class":227},[213,1392,1393],{"class":227}," \"",[213,1395,1396],{"class":1291},"teste 1 2 3",[213,1398,1399],{"class":227},"\"",[213,1401,423],{"class":227},[213,1403,1404,1406,1408,1411,1413,1415,1417,1419,1421],{"class":215,"line":944},[213,1405,686],{"class":223},[213,1407,407],{"class":406},[213,1409,1410],{"class":509},"t",[213,1412,414],{"class":227},[213,1414,919],{"class":410},[213,1416,414],{"class":227},[213,1418,919],{"class":410},[213,1420,420],{"class":406},[213,1422,423],{"class":227},[213,1424,1425],{"class":215,"line":950},[213,1426,250],{"class":227},[541,1428,1429,1435],{},[150,1430,1431,1432,1434],{},"Observe que o conteúdo a ser atribuído para a variável ",[162,1433,1410],{}," é indicado entre aspas. Isso é necessário para identificar os limites do texto, caso contrário não haveria como determinar o que é texto e o que é programa.",[150,1436,1437,1438,1440,1441,1444,1445,1448],{},"Textos em JavaScript possuem alguns recursos adicionais em relação a outros tipos de variáveis. Por exemplo, se a variável ",[162,1439,1410],{}," guarda um texto, podemos usar a propriedade ",[162,1442,1443],{},"t.length"," (sem parênteses, pois é uma propriedade, não uma função) para obter o comprimento do texto (em número de caracteres). Também podemos utilizar a função ",[162,1446,1447],{},"t.substring()"," para obter uma parte do texto original, exatamente como no Processing, como ilustrado nos exemplos abaixo:",[204,1450,1452],{"className":206,"code":1451,"language":208,"meta":5,"style":5},"let t;\nt = \"teste 1 2 3\";\nlet c;\nc = t.length; \u002F\u002F c irá receber o valor 11 (propriedade, sem parênteses)\nlet w;\nw = t.substring(0, 5); \u002F\u002F w irá receber o valor \"teste\"\nlet k;\nk = t.substring(6, 11); \u002F\u002F k irá receber o valor \"1 2 3\"\n",[210,1453,1454,1462,1477,1486,1505,1514,1544,1553],{"__ignoreMap":5},[213,1455,1456,1458,1460],{"class":215,"line":216},[213,1457,802],{"class":219},[213,1459,1381],{"class":509},[213,1461,423],{"class":227},[213,1463,1464,1467,1469,1471,1473,1475],{"class":215,"line":234},[213,1465,1466],{"class":509},"t ",[213,1468,808],{"class":227},[213,1470,1393],{"class":227},[213,1472,1396],{"class":1291},[213,1474,1399],{"class":227},[213,1476,423],{"class":227},[213,1478,1479,1481,1484],{"class":215,"line":241},[213,1480,802],{"class":219},[213,1482,1483],{"class":509}," c",[213,1485,423],{"class":227},[213,1487,1488,1491,1493,1495,1497,1500,1502],{"class":215,"line":247},[213,1489,1490],{"class":509},"c ",[213,1492,808],{"class":227},[213,1494,1381],{"class":509},[213,1496,1214],{"class":227},[213,1498,1499],{"class":509},"length",[213,1501,438],{"class":227},[213,1503,1504],{"class":237}," \u002F\u002F c irá receber o valor 11 (propriedade, sem parênteses)\n",[213,1506,1507,1509,1512],{"class":215,"line":448},[213,1508,802],{"class":219},[213,1510,1511],{"class":509}," w",[213,1513,423],{"class":227},[213,1515,1516,1519,1521,1523,1525,1528,1530,1532,1534,1537,1539,1541],{"class":215,"line":455},[213,1517,1518],{"class":509},"w ",[213,1520,808],{"class":227},[213,1522,1381],{"class":509},[213,1524,1214],{"class":227},[213,1526,1527],{"class":223},"substring",[213,1529,407],{"class":509},[213,1531,433],{"class":410},[213,1533,414],{"class":227},[213,1535,1536],{"class":410}," 5",[213,1538,420],{"class":509},[213,1540,438],{"class":227},[213,1542,1543],{"class":237}," \u002F\u002F w irá receber o valor \"teste\"\n",[213,1545,1546,1548,1551],{"class":215,"line":470},[213,1547,802],{"class":219},[213,1549,1550],{"class":509}," k",[213,1552,423],{"class":227},[213,1554,1555,1558,1560,1562,1564,1566,1568,1571,1573,1576,1578,1580],{"class":215,"line":475},[213,1556,1557],{"class":509},"k ",[213,1559,808],{"class":227},[213,1561,1381],{"class":509},[213,1563,1214],{"class":227},[213,1565,1527],{"class":223},[213,1567,407],{"class":509},[213,1569,1570],{"class":410},"6",[213,1572,414],{"class":227},[213,1574,1575],{"class":410}," 11",[213,1577,420],{"class":509},[213,1579,438],{"class":227},[213,1581,1582],{"class":237}," \u002F\u002F k irá receber o valor \"1 2 3\"\n",[541,1584,1585,1588,1595],{},[150,1586,1587],{},"A figura abaixo ajuda a entender os parâmetros do comando substring: \"cortamos uma fatia\" do texto original entre as duas posições passadas para o comando. É importante observar que a contagem começa do zero, que corresponde à posição do primeiro caractere do texto. Da mesma forma, a \"fatia\" não inclui o caractere indicado na posição final.",[150,1589,1590],{},[1591,1592],"img",{"alt":1593,"src":1594},"Ilustração do funcionamento de substring",".\u002Fimg\u002F04-animacao\u002Fsubstring-exemplo.png",[150,1596,1597],{},"É possível utilizar a operação de adição (+) para agrupar dois ou mais textos, exatamente como no Processing. Veja o exemplo abaixo:",[373,1599,1600,1601],{},"Código 4.9 - Concatenando textos com o operador +",[377,1602,1603],{"v-slot:code":5},[204,1604,1606],{"className":206,"code":1605,"language":208,"meta":5,"style":5},"function setup() {\n  createCanvas(200, 200);\n  background(0);\n  fill(255);\n  let a;\n  a = \"teste\";\n  let b;\n  b = \" 1 2 3\";\n  let c;\n  c = a + b; \u002F\u002F o sinal + indica concatenação de textos\n  text(c, 30, 30);\n}\n",[210,1607,1608,1618,1635,1647,1659,1668,1684,1693,1709,1717,1735,1757],{"__ignoreMap":5},[213,1609,1610,1612,1614,1616],{"class":215,"line":216},[213,1611,220],{"class":219},[213,1613,390],{"class":223},[213,1615,228],{"class":227},[213,1617,231],{"class":227},[213,1619,1620,1622,1624,1627,1629,1631,1633],{"class":215,"line":234},[213,1621,403],{"class":223},[213,1623,407],{"class":406},[213,1625,1626],{"class":410},"200",[213,1628,414],{"class":227},[213,1630,1329],{"class":410},[213,1632,420],{"class":406},[213,1634,423],{"class":227},[213,1636,1637,1639,1641,1643,1645],{"class":215,"line":241},[213,1638,428],{"class":223},[213,1640,407],{"class":406},[213,1642,433],{"class":410},[213,1644,420],{"class":406},[213,1646,423],{"class":227},[213,1648,1649,1651,1653,1655,1657],{"class":215,"line":247},[213,1650,1350],{"class":223},[213,1652,407],{"class":406},[213,1654,1355],{"class":410},[213,1656,420],{"class":406},[213,1658,423],{"class":227},[213,1660,1661,1663,1666],{"class":215,"line":448},[213,1662,1378],{"class":219},[213,1664,1665],{"class":509}," a",[213,1667,423],{"class":227},[213,1669,1670,1673,1675,1677,1680,1682],{"class":215,"line":455},[213,1671,1672],{"class":509},"  a",[213,1674,931],{"class":227},[213,1676,1393],{"class":227},[213,1678,1679],{"class":1291},"teste",[213,1681,1399],{"class":227},[213,1683,423],{"class":227},[213,1685,1686,1688,1691],{"class":215,"line":470},[213,1687,1378],{"class":219},[213,1689,1690],{"class":509}," b",[213,1692,423],{"class":227},[213,1694,1695,1698,1700,1702,1705,1707],{"class":215,"line":475},[213,1696,1697],{"class":509},"  b",[213,1699,931],{"class":227},[213,1701,1393],{"class":227},[213,1703,1704],{"class":1291}," 1 2 3",[213,1706,1399],{"class":227},[213,1708,423],{"class":227},[213,1710,1711,1713,1715],{"class":215,"line":480},[213,1712,1378],{"class":219},[213,1714,1483],{"class":509},[213,1716,423],{"class":227},[213,1718,1719,1722,1724,1726,1728,1730,1732],{"class":215,"line":495},[213,1720,1721],{"class":509},"  c",[213,1723,931],{"class":227},[213,1725,1665],{"class":509},[213,1727,936],{"class":227},[213,1729,1690],{"class":509},[213,1731,438],{"class":227},[213,1733,1734],{"class":237}," \u002F\u002F o sinal + indica concatenação de textos\n",[213,1736,1737,1739,1741,1744,1746,1749,1751,1753,1755],{"class":215,"line":501},[213,1738,686],{"class":223},[213,1740,407],{"class":406},[213,1742,1743],{"class":509},"c",[213,1745,414],{"class":227},[213,1747,1748],{"class":410}," 30",[213,1750,414],{"class":227},[213,1752,1748],{"class":410},[213,1754,420],{"class":406},[213,1756,423],{"class":227},[213,1758,1759],{"class":215,"line":527},[213,1760,250],{"class":227},[531,1762],{"code":1763},"function setup() {\n  createCanvas(200, 200);\n  background(0);\n  fill(255);\n  let a;\n  a = \"teste\";\n  let b;\n  b = \" 1 2 3\";\n  let c;\n  c = a + b;\n  text(c, 30, 30);\n}\n",[541,1765,1766],{},[150,1767,1768],{},"É possível também utilizar a operação de adição para agrupar texto (entre aspas) com conteúdos de variáveis numéricas, que são automaticamente convertidas para texto — assim como no Processing.",[373,1770,1771,1772],{},"Código 4.10 - Concatenando texto com um valor numérico",[377,1773,1774],{"v-slot:code":5},[204,1775,1777],{"className":206,"code":1776,"language":208,"meta":5,"style":5},"function setup() {\n  createCanvas(200, 200);\n  background(0);\n  fill(255);\n  let x, a, b;\n  a = 11;\n  b = 7;\n  x = a - b;\n  text(\"a subtração é \" + x, 50, 50);\n}\n",[210,1778,1779,1789,1805,1817,1829,1845,1855,1866,1882,1911],{"__ignoreMap":5},[213,1780,1781,1783,1785,1787],{"class":215,"line":216},[213,1782,220],{"class":219},[213,1784,390],{"class":223},[213,1786,228],{"class":227},[213,1788,231],{"class":227},[213,1790,1791,1793,1795,1797,1799,1801,1803],{"class":215,"line":234},[213,1792,403],{"class":223},[213,1794,407],{"class":406},[213,1796,1626],{"class":410},[213,1798,414],{"class":227},[213,1800,1329],{"class":410},[213,1802,420],{"class":406},[213,1804,423],{"class":227},[213,1806,1807,1809,1811,1813,1815],{"class":215,"line":241},[213,1808,428],{"class":223},[213,1810,407],{"class":406},[213,1812,433],{"class":410},[213,1814,420],{"class":406},[213,1816,423],{"class":227},[213,1818,1819,1821,1823,1825,1827],{"class":215,"line":247},[213,1820,1350],{"class":223},[213,1822,407],{"class":406},[213,1824,1355],{"class":410},[213,1826,420],{"class":406},[213,1828,423],{"class":227},[213,1830,1831,1833,1835,1837,1839,1841,1843],{"class":215,"line":448},[213,1832,1378],{"class":219},[213,1834,914],{"class":509},[213,1836,414],{"class":227},[213,1838,1665],{"class":509},[213,1840,414],{"class":227},[213,1842,1690],{"class":509},[213,1844,423],{"class":227},[213,1846,1847,1849,1851,1853],{"class":215,"line":455},[213,1848,1672],{"class":509},[213,1850,931],{"class":227},[213,1852,1575],{"class":410},[213,1854,423],{"class":227},[213,1856,1857,1859,1861,1864],{"class":215,"line":470},[213,1858,1697],{"class":509},[213,1860,931],{"class":227},[213,1862,1863],{"class":410}," 7",[213,1865,423],{"class":227},[213,1867,1868,1871,1873,1875,1878,1880],{"class":215,"line":475},[213,1869,1870],{"class":509},"  x",[213,1872,931],{"class":227},[213,1874,1665],{"class":509},[213,1876,1877],{"class":227}," -",[213,1879,1690],{"class":509},[213,1881,423],{"class":227},[213,1883,1884,1886,1888,1890,1893,1895,1897,1899,1901,1903,1905,1907,1909],{"class":215,"line":480},[213,1885,686],{"class":223},[213,1887,407],{"class":406},[213,1889,1399],{"class":227},[213,1891,1892],{"class":1291},"a subtração é ",[213,1894,1399],{"class":227},[213,1896,936],{"class":227},[213,1898,914],{"class":509},[213,1900,414],{"class":227},[213,1902,919],{"class":410},[213,1904,414],{"class":227},[213,1906,919],{"class":410},[213,1908,420],{"class":406},[213,1910,423],{"class":227},[213,1912,1913],{"class":215,"line":495},[213,1914,250],{"class":227},[531,1916],{"code":1776},[150,1918,1919],{},"��������������������������������������������������������",[1921,1922,1923],"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 .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 .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 pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":5,"searchDepth":234,"depth":234,"links":1925},[1926],{"id":147,"depth":234,"text":148,"children":1927},[1928],{"id":172,"depth":241,"text":173},null,"As funções setup() e draw(), variáveis locais e globais, animações e tratamento de eventos de mouse e teclado em p5.js","md",{},{"title":120,"description":1930},"yctQh0imHdKqVIF5LiFyMJBw6Ui9HfPc3yV-EzL8Gho",[1936,1937],{"title":116,"path":117,"stem":118,"description":5,"children":-1},{"title":125,"path":131,"stem":132,"description":1938,"children":-1},"Listas de dados (arrays) em p5.js: declaração, acesso por índice e uso em animações",1784150369374]