Interação com mouse e teclado

Voltar

Para que um usuário possa interagir com um aplicativo em processing é necessário utilizar as variáveis e eventos de entrada (inputs). Os Inputs que interessam para o texto abaixo são divididos em 2 grupos: teclado e mouse. Como foi visto anteriormente um aplicativo utilizando a estrutura setup e draw é executado continuamente até que o draw seja interrompido, isso pode ser feito fechando a janela do aplicativo ou utilizando um comando de fim de programa (exit()) durante o draw.

Enquanto o programa está em seu ciclo de funcionamento podemos incluir eventos que observam o estado de dispositivos de entrada (teclado ou mouse). O que significa observar ? existem uma série de variaveis globais no processing que armazenam dados como a posição do mouse (X e Y), posição dos botões (Pressionados ou Soltos) e outros dados importantes. Durante o ciclo do Draw podemos consultar os valores dessas variaveis para gerar alterações em um aplicativo. Por exemplo, observe o programa abaixo:

void setup() {
   size(400,400);
}

void draw() {
   fill(255,0,0);
   rect(0,0,width,height);
}

Ele gera uma janela contendo um retângulo vermelho que cobre toda a sua superfície. Agora utilizando a variável global mousePressed (Mouse Pressionado) podemos monitorar dentro do ciclo de desenho do aplicativo o momento em que um botão do mouse foi pressionado. A valor de mousePressed é booleano e pode ser comparado com True e False sem complicações. Portanto acrescentando uma estrutura de seleção simples podemos variar a cor do retangulo de acordo com o estado dos botões do mouse, observe abaixo:

void setup() {
   size(400,400);
}

void draw() {
   if (mousePressed == true) {
      fill(255,0,0);
   } else {
      fill(0,255,0);
   }
   rect(0,0,width,height);
}

Nesse caso, tanto faz qual botão do mouse for pressionado. Caso queira filtrar o botão é possível usar outra variável global: mouseButton. Essa irá informar qual foi o ultimo botão a ser pressionado pelo mouse. Na maioria dos casos só existem três opções: LEFT, CENTER, RIGHT (Esquerdo, Centro, Direito). Observe o código abaixo, que desenha círculos em posições diferentes a partir do nome do botão pressionado.

void setup() {
   size(400,400);
}

void draw() {
   fill(255);
   rect(0,0,width,height);
   if (mousePressed == true) {
      if (mouseButton == LEFT) {
         ellipse(100,200,100,100);
      } else if (mouseButton == CENTER) {
         ellipse(200,200,100,100);
      } else if (mouseButton == RIGHT) {
         ellipse(300,200,100,100);
      }
   }
}

O caso anterior demonstra como combinar as variáveis globais mousePressed e mouseButton para gerar eventos direcionados ao ação de pressionar cada botão individual do mouse. No entanto, caso tente, utilizando esse método, é difícil de gerar eventos pressionando dois botões simultaneamente. Retornaremos a essa questão adiante.

Outras variáveis que podem ser úteis com relação ao mouse são mouseX e mouseY. Essas, como provavelmente é possível deduzir pelos próprios nomes, guardam a posição do mouse (x e y) dentro da janela do aplicativo. Observe o código a seguir:

1
2
3
4
5
6
7
8
9
void setup() {
   size(400,400);
 }
 
void draw() {
   fill(255);
   rect(-1,-1,width+1,height+1);
   ellipse(mouseX,mouseY,20,20); // Essa linha usa a posição do mouse.
 }

Atente para a linha assinalada acima. As variáveis globais mouseX e mouseY são utilizadas diretamente dentro do comando de desenho da elipse. Assim a elipse deve acompanhar o mouse, quando ele estiver dentro da janela. Experimente remover as linhas 6 e 7 do código anterior e veja o que acontece.

… mais … aguarde …