A interação com o ambiente do Processing  ocorre pela captura de eventos como a movimentação do mouse, clique ou o acionamento de alguma tecla. Existem ainda outros dispositivos físicos especiais   que permitem  a leitura de outros tipos de inputs como  os sensores de movimento, temperatura, pressão e mesmo de imagens de uma  simples webcam.Neste tópico veremos eventos exclusivos de mouse e teclado.

Propriedades do Mouse

Se imaginamos que existe um objeto virtual   associado ao mouse físico então seria possível que existam áreas  de memória (variáveis)  que armazenam  a posição (coordenadas) registradas pelo mouse físico. As  propriedades  são estas variáveis  que guardam certos valores ou atributos associados a um objeto.  No Processing, estas são as propriedades relativas ao mouse:

mouseX
mouseY
pmouseX
pmouseY

Iniciamos com a utilização destas propriedades. Veja o código:

 

void setup() {
  size (500,500);
  background(0);
  smooth();
  noStroke();
  noCursor();
}

void draw() {
  float diam=random(2,5);
  ellipse(mouseX,mouseY,diam,diam);
}

 

Neste sketch criamos uma ferramenta simples de desenho. Na função draw() ,  a variável diam armazena um valor aleatório que varia entre 2 e 5. Este valor randômico é utilizado para determinar a largura e altura da circunferência desenhada na função ellipse().

As posição do mouse armazenadas automaticamente nas variáveis mouseX e mouseY determinam a posição vertical e horizontal  dos círculos   desenhados no looping.  Teste  o código clicando e arrastando o mouse sobre o sketch abaixo:

 

 

Perceba que o cursor (seta) do mouse foi desabilitada pela função noCursor() escrita dentro do setup(). Utilizamos apenas uma variável aleatória  (diam) para determinar tanto a largura quanto a altura da elipse , pois queremos uma circunferência perfeita.

Em muitas aplicações interativas surge a necessidade de verificar a velocidade de deslocamento do mouse para a obtenção de resultados dinâmicos. Por exemplo, uma aplicação de ilustração pode registrar a velocidade do gesto  para simular a pressão do pincel ou lápis, variando o visual da espessura  do traço ou “pincelada”.

Vamos recordar que velocidade pode ser traduzida pela variação de deslocamento com relação ao tempo decorrido da ação (espaço/tempo). No Processing, o tempo é mensurado em frames e o espaço  em  pixels (coordenadas xy). As propriedades pmouseX e pmouseY facilitam muito esse cálculo da velocidade, pois registram as posições do mouse em frames  (instantes) anteriores. Veja o exemplo:

 

void setup() {
  size (500,500);
  background(0);
  strokeWeight(8);
  stroke(255);
  smooth();
  noCursor();
  frameRate(10);
}

void draw() {
  background(0);
  line (mouseX,mouseY,pmouseX,pmouseY);
}

A função line()  necessita de dois pontos. O primeiro ponto é retirado da posição atual do mouse (mouseX,mouseY). O segundo ponto corresponde a posição do mouse em outro momento (pmouseX,pmouseY). Teste  o código clicando e arrastando o mouse sobre o sketch abaixo:

 

 

Aqui a extensão do traço varia conforme  a velocidade, quanto mais rápido o gesto maior é a linha. Agora, vamos modificar o primeiro exemplo:

 

  size (500,500);
  background(0);
  smooth();
  noStroke();
  noCursor();
}

void draw() {
  float diam=abs(pmouseX-mouseX);
  ellipse(mouseX,mouseY,diam,diam);
}

 

 

O tamanho dos círculos variam conforme a quantidade de deslocamento (distância percorrida pelo mouse) calculado em:

 float diam=abs(pmouseX-mouseX);

subtraímos a posição final do mouse da posição inicial e  esta diferença pode gerar um número negativo. Por exemplo, num instante o mouse pode estar na posição x=200 e no frame seguinte está na posição x=100. O resultado da subtração (100-200)  é  -100 (100 negativo) e esse valor não pode ser aplicado para a altura ou largura na função ellipse().

No Processing, a função matemática abs()  converte qualquer número em seu valor absoluto, ou seja, converte para o valor positivo. Logo, abs(100-200) equivale a 100 (positivo). Veja aqui mais detalhes sobre esta função.

No próximo trataremos de eventos de mouse e teclado.

 

 

Tagged with: