Lisätietoa

Hiiren ohjelmointi

mouseX Lukee hiiren vaaka- eli x-koordinaatin arvon.
mouseY Lukee hiiren pysty- eli y-koordinaatin arvon.


Hiiren vaakasuuntainen koordinaatti saadaan selville komennolla mouseX, ja hiiren pystysuuntainen koordinaatti saadaan selville komennolla mouseY. Kokeile laittaa nämä piirtokomentoon eli tee seuraava esimerkki, mitä huomaat?

// Ohjelman tehnyt: e-Oppi Oy
// 30.1.2017
void setup() {
size(600,400); // Ikkunan koko
background(255); // Valkea taustan väri
fill(0,255,0); // Vihreä täyttöväri
}
void draw() {
ellipse(mouseX,mouseY,80,80);
}


Komennot: mouseX ja mouseY, lukevat hiiren xy-koordinaatin kokonaislukuarvot ikkunan sisältä. Koska void draw ( )-lohko on ikuisessa silmukassa, niin koordinaattien lukeminen tapahtuu jatkuvasti ja lopputuloksena on peräkkäisten ympyröiden jono. Jono liikkuu täysin hiiren liikkeiden mukaan. Oheinen kuva havainnollistaa ohjelman esimerkkiajoa.



Voit kokeilla muuttaa background(255); -komennon void draw () -lohkoon ennen ellipse() -komentoa. Mikä muuttui? Kuinka saisit ympyrän koon kasvamaan hiiren liikkeiden avulla?

Kun vielä lisäät mukaan arpomiskomennot, niin lopputulos on eläväinen. Tutki, mitä seuraava koodi tekee.

void setup() {

     size(600,400); // Ikkunan koko

     background(0); // Taustaväri musta
} 

void draw() {

      float halkaisija = random(200); // Arvotaan halkaisija

      fill(random(255),random(255),random(255)); // Arvotaan täyttöväri

      ellipse(mouseX,mouseY,halkaisija,halkaisija); // Piirrä ellipsi
}

Hiiren tapahtumat

Seuraavat komennot reagoivat hiiren painikkeen painallukseen.

mousePressed ()

Komento reagoi hiiren vasemman tai oikean painikkeen painallukseen.

mouseReleased ()

Komento reagoi, kun hiiren vasenta tai oikeaa painiketta ei ole painettu.

Esimerkki: Hiiren painike värittää

Tehdään ohjelma joka piirtää ympyröiden jonon siten, että ympyrän väri muuttuu aina kun painetaan hiiren vasen painike pohjaan.

// Ohjelman tehnyt: e-Oppi Oy
// 30.1.2017
void setup() {
size(600,400); // Ikkunan koko
background(255); // Valkea taustan väri
}
void draw() {
int x = mouseX;
int y = mouseY;
if (mousePressed == true) { // Jos hiiren painike pohjassa, niin aseta
fill(255,0,0); // punainen väri
} else { // muutoin (jos ei ole pohjassa) aseta
fill(255,255,0); // keltainen väri
}
ellipse(x,y,80,80); // Piirrä ellipsi
}


Ohjelmassa on ehtolause if (mousePressed == true). Tämä tarkoittaa, että jos hiiren vasen painike on pohjassa eli true, niin silloin täytä punaisella värillä, muutoin täytä keltaisella värillä. Toinen huomioitava asia on muuttujien x ja y käyttö. On järkevää määritellä kaksi kokonaisluku muuttujaa x ja y, johon voidaan tallentaa hiiren xy-koordinaatit. Koska muuttujat ovat void draw ( ) -lohkon sisällä, koordinaattien lukeminen tapahtuu ikuisessa silmukassa. Ohjelman esimerkkiajo näyttää tältä.


Tämä sama ohjelma voitaisiin kirjoittaa hieman toisella tavalla eli käyttämällä hiirenpainalluksille omia lohkoja void mousePressed () ja void mouseReleased (). Nämä lohkot suoritetaan vain silloin kun hiiren vasen painike on pohjassa tai ei ole pohjassa.

// Ohjelman tehnyt: e-Oppi Oy
// 30.1.2017
void setup() {
size(600,400); // Ikkunan koko
background(255); // Valkea taustan väri
fill(255,255,0); // Alussa väri on keltainen
}
void draw() {
int x = mouseX;
int y = mouseY;
ellipse(x,y,80,80); // Piirrä ympyröitä
}
void mousePressed () { // Hiiren vasen painike pohjassa
fill(255,0,0); // aseta väriksi punainen
}
void mouseReleased () { // Hiiren vasen painike ei ole pohjassa
fill(255,255,0); // aseta väriksi keltainen
}

Esimerkki: Oma piirustusohjelma

// Ohjelman tehnyt: e-Oppi Oy
// 30.1.2017
void setup() {
size(600,400); // Ikkunan koko
background(255); // Valkea taustan väri
strokeWeight(10); // Viivan paksuus 10
stroke(255,0,0); // Punainen viivan väri
}
void draw() {
if (mousePressed == true) { // Jos hiiren vasen painike on pohjassa
line(mouseX,mouseY,pmouseX,pmouseY); // niin silloin piirrä viivaa.
}
}


Komennolla (mouseX,mouseY) saadaan hiiren koordinaatit. Lisäksi on komento (pmouseX,pmouseY), jolla saadaan selville hiiren edelliset koordinaatit. Kun nämä laitetaan line() -komennon sisälle, niin meillä on oman piirustusohjelman idea valmiina. Yhtenäinen viiva saadaan näiden kahden pisteen välille. Lisäksi tarvitaan ehto, että viivaa piirretään vain, kun hiiren vasen painike on pohjassa.

Esimerkki: Suorakulmion piirtäminen hiiren avulla

Suorakulmio voidaan piirtää hiiren avulla seuraavalla ohjelmalla.

// Ohjelman tehnyt: e-Oppi Oy
// 30.1.2017
int x, y, leveys, korkeus; // Tarvittavat muuttujat
boolean piirra = false; // Aseta oletuksena piirra-muuttujalle arvo epätosi (kursori tila)
void setup() {
size(600,600); // Ikkunan koko
fill(0,0,255); // Täyttöväri sininen
noStroke(); // Ei reunaviivaa
}
void draw() {
background(255,255,0); // Tyhjentää taustan ja värittää sen keltaiseksi
// If-lause, jonka avulla saadaan suorakulmion koko, kun hiiren painiketta painettu
if (mousePressed == true ) { // Jos hiiren painiketta painettu
piirra = true; // Tällöin aseta piirra-muuttujalle arvo tosi
leveys = mouseX-x; // Laske suorakulmion leveys alkupisteestä
korkeus = mouseY-y; // Laske suorakulmion korkeus alkupisteestä
} else { // Jos hiiren painiketta ei ole painettu
piirra = false; // Tällöin aseta piirra-muuttuja arvoon; epätosi
}
// If-lause, jonka avulla piirretään suorakulmio tai kursori
if (piirra == true) { // Kun arvo on tosi, niin silloin
rect(x,y,leveys,korkeus); // Piirrä suorakulmio
} else { // Kun arvo epätosi, niin silloin
x = mouseX; // Aseta neliön alkupiste hiiren tämänhetkisestä paikasta
y = mouseY;
rect(x,y,10,10); // Piirrä pieni neliö osoittamaan hiiren paikkaa
}
}

Ohjelma toimii siten, että kun hiiren painiketta ei ole painettu, niin tällöin piirretään 10x10 neliö hiiren liikkeiden mukaan eli neliö toimii kursorina. Kun hiiren painike on painettu pohjaan, niin tällöin piirretään suorakulmio, jonka koko määräytyy muuttujien leveys ja korkeus avulla. Suorakulmion aloituspiste määräytyy silloin kun painetaan hiiren vasen painike pohjaan. Koska aloituspiste ei saa muuttua, kun painetaan hiiren vasen painike pohjaan, sitä varten tarvitaan boolean-tyyppinen muuttuja piirra. Kun piirra-muuttuja saa arvon false, niin tällöin asetetaan piirrettävän suorakulmion nurkkapiste x ja y tämän hetkisestä hiiren paikasta. Kun piirra-muuttuja saa arvon true, niin tällöin piirretään suorakulmio, jonka nurkkapiste pysyy nyt muuttumattomana x ja y. Piirrettävän suorakulmion koko saadaan kasvamaan korkeuden ja leveyden mukaan, jotka lasketaan hiiren nykyisen aseman ja muuttujiin x ja y tallennetun aloituspaikan erotuksena. Kopioi koodi ja kokeile se käytännössä.



Kun painat hiiren painikkeen pohjaan ja liikutat hiirtä, suorakulmion koko kasvaa aloituspaikasta. Aloituspaikka on suorakulmion vasemmassa yläreunassa. Lopetuspaikka määräytyy hiiren liikkeiden mukaan ja se on suorakulmion oikeassa alareunassa, jos liikutat hiirtä samaan suuntaan.