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