Interagindo com o sketch

Vamos entender como criar novas interações com os sketches, para podermos trabalhar coisas mais interessantes e dinâmicas!

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:

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:

function mouseWheel(event) {
  if (event.delta > 0)
    raio += 2;
  else
    raio -= 2;
}

Basta fazermos o mesmo sketch, com isso a mais:

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:

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.

fill(random(255), random(255), random(255));

Vamos adicionar esse bloco ao nosso sketch, ficando assim:

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á? 🤔

Pare um tempo para ler este sketch acima e tente encontrar o erro

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.

Para resolvermos isso, neste caso, podemos simplesmente colocar o primeiro fill dentro do setup:

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.

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:

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 .

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:

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 .

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.

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().

AnteriorNúmeros pseudoaleatórios PróximoImagens e Sons

Atualizado há 8 meses