> For the complete documentation index, see [llms.txt](https://pcp5js.yarquen.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pcp5js.yarquen.com.br/interagindo-com-o-sketch.md). # Interagindo com o sketch Você já entendeu que o Processing foi criado para facilitar a criação de peças criativas por pessoas que não sejam tão proficientes na área de computação. Você não precisa aprender sobre computação gráfica, OpenGL, etc de maneira profunda para conseguir criar sketches criativos. Usando `circle` , `line`, etc conseguimos criar coisas que as vezes até simulam coisas naturais. E para melhorar ainda mais os nossos sketches, o p5.js ainda facilita os eventos de interação com o computador, como mouse e teclado. ## Eventos Cada coisa que o teclado ou o mouse fazem é tratada como um evento. Eventos são **ações que ocorrem durante a execução do programa** e que podem ser detectadas e tratadas de forma específica. Em resumo, eventos permitem que o sketch "**escute**" o que está acontecendo em tempo real e reaja de acordo. É como se o código estivesse atento ao usuário, pronto para responder ao menor movimento. E com o p5.js, essa escuta se torna bastante simples. Nós inclusive já estamos usando eventos de mouse quando usamos `mouseX` e `mouseY`, por exemplo. O p5.js fornece funções prontas para responder a eventos como cliques do mouse, pressionar de teclas, movimentação do cursor e outros. Essas funções são chamadas automaticamente quando o evento correspondente acontece. Por exemplo: * `mousePressed()` é chamada sempre que o botão do mouse é pressionado. * `keyPressed()` é chamada quando qualquer tecla do teclado é pressionada. * `mouseWheel()` é acionada quando o mouse tem o scroll alterado. Ao utilizar esses eventos, conseguimos fazer com que nossos sketches reajam ao usuário, criando uma experiência interativa. Isso abre possibilidades criativas imensas: desde desenhar com o movimento do mouse, até criar jogos, animações ou instalações artísticas que respondem ao ambiente. ## Mouse Vamos trabalhar com dois eventos de mouse principais: `mousePressed` e `mouseWheel` . Vamos começar com um sketch simples, que desenha um círculo no centro do canvas: ```javascript let raio = 100; function setup() { createCanvas(400, 400); } function draw() { background(255); noStroke(); fill(255, 0, 0); circle(200, 200, raio * 2); } ``` Como podemos fazer eventos de mouse para alterar um pouco este sketch? 🤔 ### MouseWheel Que tal fazermos o `raio` aumentar toda vez que nós giramos a rodinha do mouse? Para isso, basta adicionarmos uma nova parte no nosso código, usando a palavra `function` e o nome do evento, nesse caso `mouseWheel` . Essa variável que ele nos dá, chamada `event` tem uma coisa dentro, chamada `delta`. O que isso significa? Se o delta for positivo, significa que você girou para cima; se não, para baixo. Assim, podemos fazer o seguinte: * Se o delta for positivo, aumenta o raio * Se o delta for negativo, diminui o raio Dessa maneira, temos o nosso código a ser adicionado: ```javascript function mouseWheel(event) { if (event.delta > 0) raio += 2; else raio -= 2; } ``` Basta fazermos o mesmo sketch, com isso a mais: ```javascript let raio = 100; function setup() { createCanvas(400, 400); } function draw() { background(255); noStroke(); fill(255, 0, 0); circle(200, 200, raio * 2); } function mouseWheel(event) { if (event.delta > 0) raio += 2; else raio -= 2; } ``` ### MousePressed Agora vamos melhorar um pouco mais esse sketch. Quando clicar com o mouse em qualquer lugar do canvas, vamos fazer com que o círculo mude de cor, para uma aleatória. Para usar o evento de clique do mouse, basta usarmos o bloco que define isso: ```javascript function mousePressed() { // Aqui vai sua lógica sobre o que fazer quando mouse foi clicado } ``` O que precisamos fazer para alterar a cor do círculo? Chamar o `fill` , com cada cor aleatória entre 0 e 255. ```javascript fill(random(255), random(255), random(255)); ``` Vamos adicionar esse bloco ao nosso sketch, ficando assim: ```javascript let raio = 100; function setup() { createCanvas(400, 400); } function draw() { background(255); noStroke(); fill(255, 0, 0); circle(200, 200, raio * 2); text(raio, 100, 50); } function mouseWheel(event) { if (event.delta > 0) raio += 2; else raio -= 2; } function mousePressed() { fill(random(255), random(255), random(255)); } ``` Mas parece que isso não funcionou... Por que será? 🤔 {% hint style="info" %} Pare um tempo para ler este sketch acima e tente encontrar o erro {% endhint %} Lembre que o `draw` fica sendo executado diversas vezes a cada segundo. Por isso, mesmo com a execução do `fill` no `mousePressed`, o que determina a cor vermelha fica sempre sendo o último antes do desenho do círculo.

O que está acontecendo na execucão do Sketch

Para resolvermos isso, neste caso, podemos simplesmente colocar o primeiro fill dentro do setup: ```javascript let raio = 100; function setup() { createCanvas(400, 400); fill(255, 0, 0); } function draw() { background(255); noStroke(); circle(200, 200, raio * 2); text(raio, 100, 50); } function mouseWheel(event) { if (event.delta > 0) raio += 2; else raio -= 2; } function mousePressed() { fill(random(255), random(255), random(255)); } ``` ## Teclado Vamos continuar melhorando nosso sketch. Agora queremos fazer com que o círculo tenha sua cor alterada quando o usuário pressionar alguma tecla. Que tal R para vermelho, G para verde e B para azul? ### KeyPressed O evento mais simples de usarmos a partir do teclado é o `keyPressed`. Da mesma maneira que fizemos com o mouse, usamos um novo bloco no nosso sketch, que o p5.js já faz uso para enviar os eventos de teclado. ```javascript function keyPressed() { // Aqui vai sua lógica. O que fazer quando uma tecla é pressionada? // A variável key te diz qual é a tecla } ``` Uma maneira simples de você verificar o que foi pressionado é mostrando o que a variável pronta do p5.js chamada `key` traz: ```javascript function keyPressed() { console.log(key); // vai mostrar no console! } ``` Dessa maneira, percebemos que temos como fazer uma comparação, por exemplo de uma tecla pressionada ser o `r` . ```javascript function keyPressed() { if (key === 'r') { fill(255, 0, 0); // vermelho } else if (key === 'g') { fill(0, 255, 0); // verde } else if (key === 'b') { fill(0, 0, 255); // azul } } ``` Pronto! 🎉 Temos um sketch que mudar a cor do círculo aleatoriamente no clique, aumenta ou diminui seu tamanho com a roda do mouse e também muda de cores para vermelho, verde ou azul, ao pressionar R, G ou B. ## Animação Agora vamos utilizar eventos para animar nosso sketch de maneira diferente. No sketch abaixo, temos um círculo desenhado no centro do canvas: ```javascript let x = 200, y = 200; function setup() { createCanvas(400, 400); background(255); } function draw() { noStroke(); fill(255, 0, 0); circle(x, y, 100); } ``` Vamos fazê-lo andar quando pressionamos as teclas de esquerda e direita do teclado? Para isso, usamos novamente o `keyPressed` no nosso sketch. Quando o usuário teclar as setas, que são como abaixo na condição, mudamos os valor de `x` . ```javascript function keyPressed() { if (key == 'ArrowLeft') { x--; } else if (key == 'ArrowRight') { x++; } } ``` Nossa "bolinha" anda horizontalmente pelo canvas! Mas precisamos ficar "apertando" a tecla várias vezes para ela ir para algum lado. Como melhorar isso? Podemos fazer uso de uma variável que nos diz se existe uma tecla pressionada, chamada `isKeyPressed` . Colocando ela no nosso bloco de `draw` , podemos fazer a mudança no `x` a partir desta condição. ```javascript let x = 200, y = 200; function setup() { createCanvas(400, 400); } function draw() { background(255); noStroke(); fill(255, 0, 0); circle(x, y, 100); if (keyIsPressed) { if (key == 'ArrowLeft') { x--; } else if (key == 'ArrowRight') { x++; } } } ``` ## Desafios Agora que você sabe usar alguns eventos no p5.js, tente fazer o seguinte: * Um sketch a partir deste último, que o usuário possa controlar a bolinha para qualquer direção, horizontal ou vertical * Um sketch que uma bolinha fica andando da esquerda para a direita sozinha. Quando o usuário pressionar a tecla de seta esquerda, ele vai para esquerda, quando pressionar a seta direita, vai para a direita. Enquanto o usuário não estiver pressionando nada a bolinha deve ficar animando para a direção em que estava. * Um sketch com um círculo desenhado na posição do mouse sempre que ele for clicado. Esse círculo deve permanecer visível na tela, mas apenas o último clique conta — ou seja, o círculo muda de lugar a cada novo clique do usuário. 👉 *Dica:* use variáveis para guardar a posição do último clique e desenhe a bolha dentro do `draw()`.