Esitellään muutama uusi komento.
Komento | Merkitys |
mouseX | Komento lukee tämän hetkisen hiiren vaaka-koordinaatin arvon. Pienin arvo on 0 ja suurin arvo on sama kuin ikkunan leveys, joka on määritelty createCanvas(leveys,korkeus) komennolla. |
mouseY | Komento lukee tämän hetkisen hiiren pysty-koordinaatin arvon. Pienin arvo on 0 ja suurin arvo on sama kuin ikkunan korkeus, joka on määritelty createCanvas(leveys,korkeus) komennolla. |
pmouseX | Komento näyttää edellisen hiiren pysty-koordinaatin arvon. |
pmouseY | Komento näyttää edellisen hiiren vaaka-koordinaatina arvon. |
function mousePressed () { } | Funktio, joka käynnistetään kun hiiren jotain painiketta on painettu. |
mouseX ja mouseY
Tutustutaan tarkemmin komentoihin, joilla voidaan lukea hiiren koordinaatit. Komennolla mouseX voidaan lukea hiiren tämän hetkinen paikka vaakasuunnassa ja komennolla mouseY voidaan lukea hiiren tämän hetkinen paikka pystysuunnassa. Kun nämä laitetaan piirtokomentoihin siihen kohden, jossa on kuvion paikka ilmaistu, niin tällöin saadaan kuvio liikkumaan mukana. Syy tähän on se, että draw-funktio on ikuisessa silmukassa eli päivittyy kokoajan. Jos (mouseX,mouseY) komennot laittaa setup-funktioon, niin kuvio ei silloin seuraa hiirtä, koska setup-funktio toistetaan vain kerran. Katsotaan asiaa esimerkin avulla.
function setup() { createCanvas(600, 600); // Ikkunan koko on 600 x 600 } function draw() { background(255,255,0); // Tyhjennä tausta ja väritä se keltaiseksi fill(255,0,0); // Aseta täyttöväriksi punainen ellipse(mouseX,mouseY,50,50); // Piirrä ympyrä, jonka keskipiste luetaan hiiren koordinaateista fill(0,255,0); // Aseta täyttöväriksi vihreäksi rect(width-mouseX,height-mouseY,50,50); // Piirrä neliö, jonka keskipiste on 600 vähennettynä hiiren koordinaatin arvo fill(0,0,255); // Aseta täyttöväriksi sininen triangle(mouseY,mouseX,mouseY,mouseX+50,mouseY+50,mouseX); // Piirrä kolmio, vaihda mouseX ja mouseY toisinpäin. } |
Huomio: komento width poimii ikkunan leveyden ja komento height poimii ikkunan korkeuden
Myös kuvion koko voi muuuttua hiiren avulla. Tehdään ohjelma, jossa toisen suorakulmion koko kasvaa hiiren x-koordinaatin mukaan ja toisen suorakulmion koko kasvaa hiiren y-koordinaatin mukaan. Kun laitamme fill-komentoon mukaan alfa-arvon, niin kuviot ovat läpinäkyviä.
function setup() { createCanvas(600, 600); // Ikkunan koko on 600 x 600 } function draw() { background(200,100,0); // Tyhjennä näyttö ja aseta taustaväri fill(0,100,200,100); // Aseta täyttöväri, jonka väriarvo RGB = (0,100,200) ja alfa-arvo = 100 rect(300-mouseY/2,300-mouseY/2,mouseY,mouseY); // Kasvata neliötä nurkista kun hiiri liikkuu pystysuunnassa fill(200,0,200,100); // Aseta täyttöväri, jonka väriarvo RGB = (200,0,200) ja alfa-arvo = 100 rect(300-mouseX/2,300-mouseX/2,mouseX,mouseX); // Kasvata neliötä nurkista, kun hiiri liikkuu vaakasuunnassa } |
MousePressed-funktio
Tehdään ohjelma, jossa arvotaan satunnainen väri (R, G, B). Lisäksi laitetaan alfa-arvoksi 200 eli hieman läpinäkyvyyttä. Luetaan hiiren koordinaatin arvot komennoilla (mouseX, mouseY) ja käytetään näitä ympyrän keskipisteen arvoina. Arvotaan ympyrän halkaisija väliltä 50..100, jolloin ympyrän pitäisi seurata hiirtä samalla piirtäen erikokoisia ympyröitä koko ajan ikkunaan. Lisätään myös mousePressed-funktio eli aina kun napsautat jotain hiiren painiketta, niin ikkuna tyhjennetään satunnaisella värillä.
function setup() { createCanvas(600, 600); // Aseta ikkunan kooksi 600 x 600 background(0); // Aseta taustaväriksi musta } function draw() { fill(random(255),random(255),random(255),200); // Arvotaan satunnainen väri ellipse(mouseX,mouseY,random(50,100),random(50,100)); // Piirretään ympyrä, jonka keskipiste luetaan hiiren koordinaattipisteistä } // Arvotaan ympyrän halkaisija väliltä [50,100] function mousePressed () { // Kun hiiren painiketta napsautetaan, niin background(random(255),random(255),random(255)); // Tyhjennä ruutu ja arvo uusi taustaväri } |
Huomio: Ympyrän värin arpominen pitää laittaa draw-funktion sisälle, koska draw-funktio on ikuisessa silmukassa. Jos arpominen laitettaisiin setup-funktion sisälle, niin arpominen tapahtuisi vain kerran. Siksi myös komentio: (mouseX,mouseY) liikuttaa ympyrää hiiren liikeiden mukaan, koska se on draw-funktion sisällä.
pmouseX ja pmouseY
Tehdään vielä toinen ohjelma, joka havainnollistaa komentoa (pmouseX, pmouseY), joka palauttaa muistista hiiren edellisen arvon. Koska hiirelle saadaan nykyinen arvo komennolla (mouseX,mouseY) ja edellinen arvo komennolla (pmouseX,pmouseY), niin voimme piirtää viivan näiden kahden pisteen välille komennolla: line(mouseX,mouseY,pmouseX,pmouseY); Tehdään tästä piirtelyohjelma. Ohjelma arpoo viivan paksuuden välillä 5..20 ja viivan värin. Lisätään myös tähän ohjelmaan mousePressed-funktio, jonka avulla voimme nollata ikkunan hiirtä napsauttamalla. Kokonainen ohjelma on seuraavanlainen.
function setup() { createCanvas(600, 600); // Ikkunan koko on 600 x 600 background(0); // Taustaväri on alussa musta } function draw() { strokeWeight(random(5,20)); // Arvotaan viivan paksuus stroke(random(255),random(255),random(255)); // Arvotaan viivan väri line(mouseX,mouseY,pmouseX,pmouseY); // Piirretään viiva pisteiden (mouseX,mouseY) ja (pmouseX,pmouseY) välille. } function mousePressed () { // Jos hiiren jotain painiketta napsautetaan, niin background(random(255),random(255),random(255)); // tyhjennetään ikkuna satunnaisella värillä } |
Ohjelma toimii seuraavasti