Close menu
Close menu

Tunnistaudu

Kirjaudu

Etkö ole vielä jäsen?

Liity jäseneksi

mouseX ja mouseY

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