Esimerkki: Naama


Kuinka piirtäisit kuvan mukaisen naaman? Origo on ikkunan keskellä. Seuraavilla komennoilla saataisiin naama aikaiseksi.

 fill(200,100,50);  // Ruskea väri

 ellipse(0,0,200,200); // Taakse tuleva ympyrä

 fill(100,200,200);  // Sininen väri

 ellipse(-25,-25,40,80);  // Vasen silmä

 ellipse(25,-25,40,80);  // Oikea Silmä

 fill(0);  // Musta väri

 ellipse(-25,0,20,20);  // Silmän mustuainen, vasen

 ellipse(25,0,20,20); // Silmän mustuainen, oikea

 fill(255,0,0);  // Punainen väri

 arc(0,50,100,50,radians(0),radians(180),PIE);  // Suu

Mietitään seuraavaksi, kuinka tästä kannattaa tehdä aliohjelma. Kaikkein järkevin tapa on käyttää aliohjelmassa translate(x,y) ja scale(r); komentoja. Jolloin pääohjelma ja aliohjelma on seuraavanlaiset.

SANALLINEN ALGORITMI
  1. Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkea.
  3. Määrittele for-silmukka (Määrittele kokonaislukumuuttuja a, joka saa alkuarvon 50. Toista niin kauan kun a on pienempi tai yhtä suuri kuin 350. Kasvata muuttujaa a 50:llä).
    1. Kutsu aliohjelmaa naama. Välitä aliohjelmalle naaman keskipiste (a,50) ja naaman koko 50.
    2. Kutsu aliohjelmaa naama. Välitä aliohjelmalle naaman keskipiste (a,150) ja naaman koko 100.
    3. Kutsu aliohjelmaa naama. Välitä aliohjelmalle naaman keskipiste (a,300) ja naama koko 150.
  4. Aloita aliohjelma naama (Määrittele kokonaislukumuuttujat x, y, w)
    1. Ota nykyinen koordinaatisto muistiin.
    2. Siirrä origo x:n verran oikealle ja y:n verran alaspäin. Naama siirtyy origon mukana.
    3. Skaalaa kuvio isommaksi tai pienemmäksi suhteella w/200.0.
    4. Aseta ruskea väri, jonka väriarvo on (R=200,G=100,B=50).
    5. Piirrä hahmon pää eli ympyrä, jonka keskipiste on (0,0) ja halkaisija 200.
    6. Aseta sininen väri, jonka väriarvo on (R=100,G=200,B=200).
    7. Piirrä vasen silmä eli ellipsi, jonka keskipiste on (-25,-25), leveys 40 ja korkeus 80.
    8. Piirrä oikea silmä eli ellipsi, jonka keskipiste on (25,25), leveys 40 ja korkeus 80.
    9. Aseta musta väri.
    10. Piirrä silmän vasen mustuainen eli ympyrä, jonka keskipiste on (-25,0) ja halkaisija 20.
    11. Piirrä silmän oikea mustuainen eli ympyrä, jonka keskipiste on (25,0) ja halkaisija 20.
    12. Aseta punainen väri.
    13. Piirrä suu eli sektori, jonka keskipiste on (0,50), leveys 100 ja korkeus 50, kulman aloituskulma on 0° (idässä) ja lopetuskulma on 180° (lännessä).
    14. Palauta muistissa oleva koordinaatisto takaisin.
 

// Ohjelman tehnyt e-Oppi Oy

// 30.8.2017

 void setup() { 

     size(400, 400); // Ikkunan koko

     background(255); // Taustaväri valkoinen

}

void draw() {

     for (int a=50; a <= 350; a=a+50) {  

          // a saa arvoja 50,100,150,200,250,300,350

          naama(a,50,50);  // Ylärivi, Huomaa x-koordinaatissa muuttuja a

          naama(a,150,100);  // Keskellä

          naama(a,300,150);  // Alarivi

     }

}

void naama(int x, int y, int w) {

     pushMatrix(); // Koordinaatisto muistiin

     translate(x, y); // Siirrä hahmoa x:n verran oikealla ja y:n verran alas 

     scale(w/200.0); // Skaalaa kuvio isommaksi tai pienemmäksi

     fill(200,100,50); // Ruskea väri

     ellipse(0,0,200,200); // Taakse tuleva ympyrä

     fill(100,200,200); // Sininen väri

     ellipse(-25,-25,40,80); // Vasen silmä

     ellipse(25,-25,40,80); // Oikea Silmä

     fill(0); // Musta väri

     ellipse(-25,0,20,20); // Silmän mustuainen, vasen

     ellipse(25,0,20,20); // Silmän mustuainen, oikea

     fill(255,0,0); // Punainen väri

     arc(0,50,100,50,radians(0),radians(180),PIE); // Suu

     popMatrix(); // Palauta muistissa oleva koordinaatisto

}


Kun ohjelma ajetaan, se tulostaa seuraavaa.




Kuten huomasit, lisäämällä pääohjelmaan for-silmukka, aliohjelmaa voidaan kutsua useasti.

Muutetaan pääohjelmassa koodi seuraavasti.

SANALLINEN ALGORITMI
  1. Siirrä origoa 200 oikealle ja 200 alas eli siirrä origo ikkunan keskelle.
  2. Määrittele for-silmukka (Määrittele kokonaislukumuuttuja a, joka saa alkuarvon 0. Toista niin kauan kun a on pienempi tai yhtä suuri kuin 12. Kasvata muuttujaa a yhdellä).
    1. Pyöritä koordinaatistoa 30° myötäpäivään aina kun muuttuja a kasvaa for-silmukassa.
    2. Kutsu aliohjelmaa naama. Välitä aliohjelmalle naaman keskipiste (100,0) ja naaman koko 50.
 

void draw() {

     translate(200,200);

     for (int a=0; a <= 12; a++) {  // a = 0,1,2,3,4,5,6,7,8,9,10,11,12

          rotate(radians(30));  // Pyöritä 30° myötäpäivään

          naama(100,0,50);  // Aliohjelman kutsu

     }

}

Tulostuu 12 kappaletta naamoja ympyrän kehälle.




Kuinka naamat saataisiin spiraalille? Muutetaan pääohjelma seuraavanlaiseksi.

SANALLINEN ALGORITMI
  1. siirrä origoa 200 oikealle ja 200 alas eli siirrä origo ikkunan keskelle.
  2. Määrittele for-silmukka (Määrittele kokonaislukumuuttuja a, joka saa alkuarvon 0. Toista niin kauan kun a on pienempi tai yhtä suuri kuin 230. Kasvata muuttujaa a 10:llä).
    1. Pyöritä koordinaatistoa 30° myötäpäivään aina kun muuttuja a kasvaa for-silmukassa.
    2. Kutsu aliohjelmaa naama. Välitä aliohjelmalle naaman keskipiste (a,0) ja naaman koko a. Koska muuttuja on mukana keskipisteessä, niin naama siirtyy kohti ulkoreunaa, kun a kasvaa for-silmukassa. Koska muuttuja on mukana naaman koossa, niin naaman koko kasvaa samaan tahtiin kuin muuttuja a kasvaa for-silmukassa.
 

void draw() {

     translate(200,200);  // Origo ikkunan keskelle

     for (int a=0; a <= 360; a=a+10) {  // a = 0,10,20,30,...360

          rotate(radians(30)); // Pyöritä 30 myötäpäivään

          naama(a,0,a);  // Aliohjelma kutsu

     }

}


Naama menee kohti ulkoreunaa ja samalla koko kasvaa.



Aliohjelmaa voidaan myös ohjata hiirellä. Tehdään seuraava muutos pääohjelmassa olevaan koodiin.

void draw() {

    naama(mouseX,mouseY,100);

}


Tällöin ohjelma tulostaa seuraavaa, kun liikutat hiirtä ikkunassa:




Voit kokeilla vielä liikutella hahmoa laskurilla.