Hiiren sijainti

Hiiren sijainnin saat selville käyttämällä mouseX ja mouseY -nimisiä muuttujia. Ne toimivat aivan samaan tapaan kuin width ja height.

void setup(){
  size(500, 500);
  background(255);
}

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

Esimerkki piirtää hiiren sijaintiin ympyrän, joka on läpimitaltaan 40 pikseliä.

Voit käyttää hiiren koordinaatteja vaikuttaaksesi mihin tahansa arvoihin ohjelmassasi. Voit esimerkiksi luoda käyttämäsi värit hiiren sijainnin pohjalta. Tässä on hyvänä apuna map-metodi. MouseX saa arvoja välillä 0-width. Fill ja stroke -metodit ottavat arvoja välillä 0-255. Map-metodilla voit kätevästi skaalata arvot uudelle alueelle: map(mouseX, 0, width, 0, 255). Komento ottaa arvon mouseX, joka on välillä 0-width ja antaa takaisin arvon, joka on välillä 0-255. Kokeile seuraavaa esimerkkiä, jossa ympyrän väri määritetään hiiren koordinaattien perusteella:

void setup(){
  size(500, 500);
  background(255);
}

void draw(){
  float r = map(mouseX, 0, width, 0, 255);
  float g = map(mouseY, 0, height, 0, 255);
  fill(r, g, 20);
  ellipse(mouseX, mouseY, 40, 40);
}

Hiiren klikkaus

Edellisen sivun esimerkki piirsi jatkuvasti uusia ympyröitä hiiren sijaintiin. Entä jos haluamme ympyrän ilmestyvän hiiren kohdalle vasta painettaessa hiirtä? Tähän on apuna mouseClicked-metodi.

Draw-metodi huolehtii ruudun päivittämisestä sekä tarkkailee hiirtä ja näppäimistöä. Kun huomataan, että hiirtä on klikattu, tarkistetaan onko mouseClicked-metodia määritelty koodissa. Jos on, suoritetaan sen sisältö. Tämän vuoksi koodissa on oltava draw-metodi, vaikka se olisi tyhjä - ruutu ei muuten päivity!

MouseClicked-metodi määritellään aivan kuten setup ja draw. Aaltosulkujen välissä olevat komennot suoritetaan, kun hiirtä on klikattu.

Kokeile alla olevaa ohjelmaa kopioimalla se Processing-editoriin.

void setup(){
  size(500, 500);
  background(255);
}

void draw(){
  
}

void mouseClicked(){
  ellipse(mouseX, mouseY, 40, 40);
}

Näppäimistö

Näppäimistön tarkkailuun on käytössä keyPressed-metodi. KeyPressed-metodi toimii samalla periaatteella kuin mouseClicked-metodi. Draw-metodi tarkkailee näppäimistöä ja suorittaa keyPressed-metodin, jos jotakin näppäimistön näppäintä painetaan.

Voit sijoittaa keyPressed-metodin mouseClicked-metodin jälkeen, ja laittaa sen piirtämään vaikkapa neliön:

void setup(){
  size(500, 500);
  background(255);
}

void draw(){
  
}

void mouseClicked(){
  ellipse(mouseX, mouseY, 40, 40);
}

void keyPressed(){
  rect(mouseX, mouseY, 50, 50);
}

Lisää metodeja

Processingissa on omia metodeja myös muille hiiren ja näppäimistön tapahtumille, esimerkiksi hiiren liikuttamiselle tai näppäimistön näppäimen vapauttamiselle. Löydät ne Referencestä Input-otsikon alta. Nämä metodit toimivat kuten mouseClicked ja keyPressed.