hiiren-painallukset.org

Hiiren painallukset

{{{example}}}

Vie hiiren kursori alla olevaan piirtoikkunaan ja painele hiiren nappia eri kohdissa.

void setup ()
{
  size (400, 400);
  colorMode (HSB, 100);
  background (0);
}

// tyhjä piirtofunktio, joka vain pitää ohjelman käynnissä
void draw ()
{
}

// tätä funktiota kutsutaan, kun hiirtä on painettu
void mousePressed ()
{
  final int SIVU = 20;
  // hiiren koordinaatit ovat automaattisesti muuttujissa 
  // mouseX ja mouseY
  rect (mouseX, mouseY, SIVU, SIVU);
}

Yllä oleva interaktiivinen ohjelma on tehty alla olevalla Processing-ohjelmalla. Huomaa, että aiemmin piirretyt neliöt jäävät piirtoikkunaan: ohjelmassa ei missään vaiheessa piirretä taustaa uudestaan funktiolla background().

<<hiiren-painallukset-neliot>>

Hiiren painallukset Processing-ohjelmassa

Jos Processing-ohjelmaan on kirjoitettu funktio mousePressed(), niin funktiota kutsutaan aina, kun käyttäjä painaa hiiren nappia piirtoikkunan sisällä. Funktion sisällä muuttujien mouseX ja mouseY arvot ovat hiiren kursorin \(x\)- ja \(y\)-koordinaatit.

{{{example}}}

Alla oleva ohjelmakoodin tuloksena saadaan tällä sivulla oleva interaktiivinen animaatio. Animaatiossa ympyrä liikkuu oikealle tai vasemmalle riippuen siitä, painetaanko hiiren painiketta ympyrän keskipisteen oikealla vai vasemmalla puolella.

<<hiiren-painallukset-ympyran-ohjaus>>

Yllä olevassa ohjelmassa ei kutsuta funktiota frameRate(), jolloin päivitystaajuudessa käytetään oletusarvoa 60.

Animaatioiden oletusarvoinen piirtonopeus

Jos Processing-animaatiossa ei kutsuta funktiota frameRate(), niin tällöin piirretään oletusarvoisella nopeudella, joka on 60 kuvaa sekunnissa.

{{{example}}}

Alla oleva ohjelmakoodin tuloksena saadaan tällä sivulla oleva interaktiivinen ohjelmaa. Käyttäjä voi valita vasemmassa reunassa olevasta väripaletista sen värin, jolla ympyrä piirretään. Ohjelman toteutus perustuu siihen, että esimerkiksi värisävyä 50 vastaava viiva piirretään \(y\)-koordinaattiin 50. Niinpä väriä valittaessa värisävy saadaan suoraan hiiren \(y\)-koordinaatista. (Ohjelma ei tarkista, onko hiiren painalluskohta väripaletin sisällä.)

<<hiiren-painallukset-varin-valinta>>

Tehtäviä

1. Tee tällä sivulla oleva interaktiivinen ohjelma, joka piirtää hiiren painalluskohtaan kursorin \(x\)-koordinaatin.
2. Tee tällainen ohjelma, joka piirtää ristikon hiiren kursorin kohtaan.
3. Kirjoita tällainen interaktiivinen ohjelma, joka piirtää murtoviivaa. Murtoviivan pää on alussa origossa, ja pää siirtyy hiiren nappia painettaessa kursorin koordinaatteihin. [Vihje: funktio draw() ei tee mitään tässä ohjelmassa.]
4. Kirjoita ohjelma, joka toteuttaa tällä sivulla olevan interaktiivisen animaation. Alussa ympyrän koko ei muutu. Kun hiiren nappia painetaan, ympyrä alkaa kasvaa. Tämän jälkeen uudet hiiren nappien painallukset alkavat vuorotellen pienentää tai suurentaa ympyrää.

   Processing-kielessä voi piirtää ympyrän, jolla on negatiivinen halkaisija (tällöin ohjelma ei välitä halkaisijan etumerkistä). Jotta ohjelmasi toimisi oikein, päivitä halkaisija vain jos uusi halkaisija on positiivinen.

5. Kirjoita tällä sivulla oleva interaktiivinen ohjelma. Ohjelmassa hiiren painallus synnyttää laajenevan ja tummenevan valkoisen ympyrän. Ympyrän halkaisija on heti painalluksen jälkeen 10 ja laajenee yhden yksikön kunkin askeleen aikana. Ympyrän kirkkaus puolestaan on heti painalluksen jälkeen 100 ja vähenee 3 prosenttia kullakin askeleella.
6. Tee tällä sivulla oleva interaktiivinen animaatio. Voit valita tarpeelliset mitat itse.

Ratkaisuja

1. <<hiiren-painallukset-x-koordinaatti>>
       

2. <<hiiren-painallukset-ristikko>>
       

3. <<hiiren-painallukset-murtoviiva>>
       

4. <<hiiren-painallukset-oskilloiva-ympyra>>
       

5. <<hiiren-painallukset-maalitippa>>
       

6. <<hiiren-painallukset-aaltoliike>>