Processing suomeksi

Hiiri

Hiiren tapahtumat

Tässä luvussa näemme ohjelman vuorovaikutuksen hiiren kanssa. Processing kerää hiireltä tietoja, kuten hiiren sijainnin ja napsautukset. Luomme pienen ohjelman, joka perustuu ympyröihin, jolla esittelemme satunnaiset liikkeet.

Hiiren sijainti

Hiiren koordinaatit ikkunassa nähdään kahdella muuttujalla: mouseX ja mouseY. Niillä voimme tietää hiiren sijainnin suhteessa piirrosikkunaamme, alkaen ikkunan vasemmasta yläkulmasta. Seuraavassa esimerkissä luomme ohjelman, joka piirtää ympyrän hiiren sijaintiin.

void setup() {
  size(200,200);
  smooth();
}

void draw() {
  ellipse(mouseX,mouseY,15,15);
}

Muutamme edellisen esimerkin muuttamalla dynaamisesti ympyrän läpimittaa. Se valitaan satunnaisesti metodilla random(), joka luo satunnaisen numeron tietyllä arvovälillä. Kun Processing tekee komennon execute(), muuttuja r täytetään satunnaisella numerolla väliltä 3-30: 12, 25, 23, 11, 22, 4, 10, 11, 25... Ympyrän läpimitan muutos johtaa ympyrän välkkymiseen hiiren kursorin ympärillä.

02_Souris_Cercles_Random

void setup() {
  size(300,300);
  smooth();
}

void draw() {
  float r = random(3,30);
  ellipse(mouseX,mouseY,r,r);
}

Kun hiiri lähtee ikkunasta, hiiren sijaintia ei enää välitetä ohjelmallemme. Ympyrät piirretään ja ne kerääntyvät hiiren viimeiseen sijaintiin.

Napsautukset

Voimme vastaanottaa hiiren napsautuksia käyttäen metodeita mousePressed() ja mouseReleased().

Molemmat metodit sallivat meidän tietää koska hiiren nappia painetaan ja koska se on vapaana. Edellisen esimerkin mukaan voimme muuttaa ympyrän täyttöväriä sen mukaan painaako käyttäjä hiiren nappia. Valitsemme harmaan sävyn satunnaisesti komennolla fill(), kun hiiren nappia painetaan.

03_Souris_Cercles_Random_Gris_02

float ton_de_gris = 255;

void setup() {
  size(300, 300);
  smooth();
}

void draw() {
  float r = random(10, 80);
  fill(grey);
  ellipse(mouseX, mouseY, r, r);
}

void mousePressed() {
  grey = random(255);
}

Processingin avulla voimme tietää mitä hiiren nappia painetttiin. Tähän käytämme muuttujaa MouseButtons, joka tunnistaa painetaanko vasenta, oikeaa tai keskimmäistä hiiren nappia (LEFT, RIGHT, CENTER). Käytä tätä muuttujaa piirtääksesi ympyrän, joka vaihtaa väriä riippuen siitä mitä hiiren nappia painetaan.

07_Souris_Composition_2

void setup() {
  size(200,200);
  smooth();
}

void draw() {
  background(255);
  ellipse(100,100,200,200);
}

void mousePressed() {
  if (mouseButton == LEFT)   fill(0);
  if (mouseButton == RIGHT)  fill(255);
  if (mouseButton == CENTER) fill(128);
}

Muut tapahtumat

Processing kaappaa kaksi muuta hiiren tapahtumaa täsmälleen sen sijainnissa ikkunan yläpuolella.

mouseMoved() havaitsee hiiren liikkeen kun se liikkuu piirrosikkunan yläpuolella. Jos hiiren osoitin poistuu ikkunan alueelta tai lopettaa liikkeen tämä metodi ei toimi.

mouseDragged() kutsutaan, kun käyttäjä napsauttaa nappia ja liikuttaa hiirtä ikkunan päällä. Sen ominaisuuksiin kuuluu hiiren vetämisen hallinta. mouseDragged() toimii, vaikka hiiren osoitin lähtisi ulos ikkunasta.

Seuraavassa esimerkissä käytämme näitä metodeja. Kun mouseMoved() kutsutaan, muutetaan ympyrän täyttöväriä, ja kun mouseDragged kutsutaan, muutetaan ympyrän kokoa.
04_Souris_Dragged

int r = 100;
int c = 100;

void setup() {
  size(255, 255);
  smooth();
}

void draw() {
  background(255);
  fill(c);
  ellipse(width/2, height/2, r, r);
}

void mouseMoved() {
    c = mouseY;
}

void mouseDragged() {
  r = mouseX;
}

Kohdistin

Joskus on hyvä kätkeä hiiren kohdistin. Tässä on käsky kohdistimen piilottamiseksi:

noCursor();

On myös mahdollista muuttaa kursorin muotoa osoittamaan eri tapahtumia käyttäjälle. Tähän käytetään komentoa cursor() parametreillä ARROW, CROSS, HAND, MOVE, TEXT, WAIT.

void setup() { 
   fill(255);
   rect(10, 10, 20, 80);
   fill(175);
   rect(40, 10, 20, 80);
   fill(100);
   rect(70, 10, 20, 80);
}

void draw() 
   // Katsomme voitko lennättää yhtä kolmesta neliöstä    // Ja muutamme kursoria vastaavasti 
   if (mouseX > 10 && mouseX < 30 && mouseY > 10 && mouseY < 90) {
      cursor(HAND); // Näyttää käden
   }
   else
   if (mouseX > 40 && mouseX < 60 && mouseY > 10 && mouseY < 90) {
      cursor(ARROW); // Näyttää nuolen
   }
   else
   if (mouseX > 70 && mouseX < 90 && mouseY > 10 && mouseY < 90) {
      cursor(WAIT); // Näyttää tiimalasin
  }
  else {
     cursor(CROSS); // Näyttää ristin jos emme tee mitään
  }
}