5.4 Koordinaatiston kierto

Yhteenveto

Komennolla rotate(radians(kulma)); voidaan pyörittää koordinaatistoa, joko myötäpäivään (kulma > 0) tai vastapäivään (kulma < 0). Kiertosuunta voidaan myös vaihtaa scale()-komennolla. Ohjelmoinnissa käytetään radiaani-asteita, siksi rotate()-komennossa on lisäksi käytettävä radians()-komentoa.


Koordinaatiston kierto

Komento

Merkitys

rotate(kulma)

Komento kiertää xy-akselia myötäpäivään kulman verran.

kulma

Kulma kertoo kierron suuruuden radiaaniasteina. Positiivisilla asteilla kierto on myötäpäivään ja negatiivisilla asteilla kierto on vastapäivään.


Komennolla saadaan koordinaatistoa pyöritettyä. Oheinen kuva havainnollistaa asiaa.


Esimerkki: Viiva ennen ja jälkeen kierron

Tutkitaan seuraavaa ohjelmaa:

SANALLINEN ALGORITMI
  1. Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Aseta viivan väriksi musta
  4. Piirrä viiva, jonka alkupiste on (200, 100) ja loppupiste on (300, 100).
  5. Pyöritä koordinaatistoa 45 astetta myötäpäivään.
  6. Piirrä viiva, jonka alkupiste on (200, 100) ja loppupiste on (300, 00).
 

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017

void setup () {

     size(400,400); // Ikkunan koko

     background(255); // Valkea taustan väri

     stroke(0); // Musta viivan väri

}

void draw() {

     line(200,100,300,100); // Viiva ennen kiertoa

     rotate(radians(45)); // Kierrä koordinaatisto

     line(200,100,300,100); // Viiva kierron jälkeen

}


Kun ohjelma ajetaan, niin huomataan koko koordinaatiston kiertyneen 45° myötäpäivään.

 


Kuten tästä esimerkistä havaitsemme, niin vaakasuoraviiva on 45° astetta vinossa kierron jälkeen. Jos kierto on yli 90 astetta niin viiva ei enää ole ikkunan sisällä. Jos halutaan, että kuvio kiertyy keskellä ikkunaa, niin ennen kiertoa meidän on siirrettävä koordinaatiston origo (0, 0) ikkunan keskelle. Tutkitaan tätä seuraavaksi.

Esimerkki: Komentojen yhdistäminen

Kuvassa alkuperäinen ellipsi saadaan komennolla ellipse(100,150,100,200); missä ellipsin keskipiste on (100, 150) ja ellipsin leveys on 100 ja korkeus 200.

Nyt kun otetaan komento: translate(400,150); niin koordinaatiston origo on siirretty pisteeseen (400, 150). Kun seuraavaksi otetaan komento: rotate(radians(90)); ja sama ellipse-komento, niin ellipsi kääntyy vaakasuuntaan kuten kuvassa eli koordinaatisto pyörähtää myötäpäivään 90 astetta.

Alkuperäisessä koordinaatistossa tämän uusi ellipsi saataisiin komennolla: ellipse(250,250,200,100); mutta tässä uudessa koordinaatistossa ellipsi saadaan samalla komennolla eli ellipse(100,150,100,200);.




Kokeile muuttaa translate(x,y) komennon arvoja, sekä rotate(radians(kulma)); arvoja.

Esimerkki: Viivan pyörittäminen ikkunan keskellä

Tehdään seuraavanlainen ohjelma.

SANALLINEN ALGORITMI
  1. Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Aseta viivan väriksi musta
  4. Siirrä origo 200 px oikealle ja 200 px alas eli siirrä origo ikkunan keskelle.
  5. Piirrä viiva, jonka alkupiste on (-100, 0) ja loppupiste on (100, 0).
  6. Pyöritä koordinaatistoa 45 astetta myötäpäivään.
  7. Piirrä viiva, jonka alkupiste on (-100, 0) ja loppupiste on (100, 0).
  8. Pyöritä koordinaatistoa 45 astetta myötäpäivään.
  9. Piirrä viiva, jonka alkupiste on (-100, 0) ja loppupiste on (100, 0).
  10. Pyöritä koordinaatistoa 45 astetta myötäpäivään.
  11. Piirrä viiva, jonka alkupiste on (-100, 0) ja loppupiste on (100, 0).
 

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
void setup () {

     size(400,400); // Ikkunan koko

     background(255); // Valkea taustan väri

     stroke(0); // Musta viivan väri

}

void draw() {

     translate(200,200); // Siirrä origo ikkunan keskelle

     line(-100,0,100,0); // Piirrä 1. vaakaviiva

     rotate(radians(45)); // Kierrä 45° myötäpäivään

     line(-100,0,100,0); // Piirrä 2. vaakaviiva

     rotate(radians(45)); // Kierrä 45° myötäpäivään

     line(-100,0,100,0); // Piirrä 3. vaakaviiva

     rotate(radians(45)); // Kierrä 45° myötäpäivään

     line(-100,0,100,0); // Piirrä 4. vaakaviiva

}


Kuvio saadaan pyörimään, kun ensin siirretään origo eli piste (0, 0) ikkunan keskelle translate(x,y) komennolla. Viiva on nyt piirretty siten, että viivan keskipiste on origossa. Viivan alkupiste on nyt kohdassa (-100, 0) ja loppupiste kohdassa (100, 0). Nyt kun koordinaatistoa kierretään, niin viivan keskipiste pysyy samana koko ajan. Alla oleva kuva havainnollistaa ohjelman ajoa.



Kuinka muuttaisit koodia, jos sinun pitäisi piirtää yllä olevan kuvan jokaiseen väliin vielä uusi viiva, jolloin viivoja olisi jo yhteensä kahdeksan?

Kierto vastapäivään

Jos käytät matematiikan xy-koordinaatistoa eli siirrät origon ikkunan keskelle ja peilaat y-koordinaatit scale(1,-1); komennolla, kiertosuunta muuttuu päinvastaiseksi. Tutkitaan asiaa esimerkin avulla.

SANALLINEN ALGORITMI
  1. Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Aseta viivan väriksi musta
  4. Siirrä origo 200 px oikealle ja 200 px alas eli siirrä origo ikkunan keskelle.
  5. Peilaa y-akseli eli y:n arvot kasvavat ylöspäin.
  6. Piirrä viiva, jonka alkupiste on (-100, 0) ja loppupiste on (100, 0).
  7. Pyöritä 30°:tta vastapäivään (koska kiertosuunta muuttui peilauksen yhteydessä).
  8. Piirrä viiva, jonka alkupiste on (-100, 0) ja loppupiste on (100, 0).
 

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
void setup () {

    size(400,400); // Ikkunan koko

    background(255); // Taustaväri valkoinen

    stroke(0); // Musta viivan väri

}

void draw () {

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

    scale(1,-1); // Peilaa y-koordinaatit

    line(-100,0,100,0); // Viiva ennen kiertoa

    rotate(radians(30)); // Kierrä 30° vastapäivään

    line(-100,0,100,0); // Viiva kierron jälkeen

}

Esimerkki: Kierto ympäri

Komennolla: rotate(radians(kulma)); voidaan helposti sijoittaa mitä tahansa kuvioita ympyrän kehälle. Tehdään ohjelma, jossa kahdeksan punaista ympyrää sijoitetaan ympyrän kehälle.

SANALLINEN ALGORITMI
  1. Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Aseta viivan väriksi musta
  4. Aseta punainen täyttöväri.
  5. Siirrä origo 200 px oikealle ja 200 px alas eli siirrä origo ikkunan keskelle.
  6. Piirrä ympyrä paikkaan (100, 0), jonka korkeus ja leveys on 20.
  7. Pyöritä 45 astetta myötäpäivään.
  8. Piirrä ympyrä paikkaan (100, 0), jonka korkeus ja leveys on 20.
  9. Pyöritä 45 astetta myötäpäivään.
  10. Piirrä ympyrä paikkaan (100, 0), jonka korkeus ja leveys on 20.
  11. Pyöritä 45 astetta myötäpäivään.
  12. Piirrä ympyrä paikkaan (100, 0), jonka korkeus ja leveys on 20.
  13. Pyöritä 45 astetta myötäpäivään.
  14. Piirrä ympyrä paikkaan (100, 0), jonka korkeus ja leveys on 20.
  15. Pyöritä 45 astetta myötäpäivään.
  16. Piirrä ympyrä paikkaan (100, 0), jonka korkeus ja leveys on 20.
  17. Pyöritä 45 astetta myötäpäivään.
  18. Piirrä ympyrä paikkaan (100, 0), jonka korkeus ja leveys on 20.
  19. Pyöritä 45 astetta myötäpäivään.
  20. Piirrä ympyrä paikkaan (100, 0), jonka korkeus ja leveys on 20.
 

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
void setup () {

     size(400,400); // ikkunan koko

     background(255); // Valkea taustaväri

     stroke(0); // Musta viivan väri

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

}

void draw() {

     translate(200,200); // Origo eli piste (0,0) on siirretty ikkunan keskelle

     ellipse(100,0,20,20); // Piirrä 1. ympyrä

     rotate(radians(45)); // Kierrä 45° myötäpäivään

     ellipse(100,0,20,20); // Piirrä 2. ympyrä

     rotate(radians(45)); // Kierrä 45° myötäpäivään

     ellipse(100,0,20,20); // Piirrä 3. ympyrä

     rotate(radians(45)); // Kierrä 45° myötäpäivään

     ellipse(100,0,20,20); // Piirrä 4. ympyrä

     rotate(radians(45)); // Kierrä 45° myötäpäivään

     ellipse(100,0,20,20); // Piirrä 5. ympyrä

     rotate(radians(45)); // Kierrä 45° myötäpäivään

     ellipse(100,0,20,20); // Piirrä 6. ympyrä

     rotate(radians(45)); // Kierrä 45° myötäpäivään

     ellipse(100,0,20,20); // Piirrä 7. ympyrä

     rotate(radians(45)); // Kierrä 45° myötäpäivään

     ellipse(100,0,20,20); // Piirrä 8. ympyrä 

}


Tässä ohjelmassa origo eli piste (0, 0) on ensin siirretty ikkunan keskelle translate(x,y)-komennolla. Ensimmäinen ympyrä on piirretty ikkunan keskikohdasta 100 pikseliä oikealle. Jonka jälkeen koordinaatistoa on kierretty 45° myötäpäivään ja piirretty uusi ympyrä. Ympyrällä on aina samat koordinaatit. Ympyrän paikka muuttuu, koska koordinaatisto kiertyy myötäpäivään. Alla on esitetty ohjelman esimerkkiajo.



Mikä olisi kierron suuruus, jos haluaisit piirtää 12 punaista ympyrää?

Esimerkki: Piirtelyä rotaation avulla

Tutkitaan seuraavaa esimerkkiä.

SANALLINEN ALGORITMI
  1. Aseta ikkunan kooksi 800 px vaakaan ja 800 px pystyyn.
  2. Aseta ikkunan taustaväriksi musta.
  3. Aseta asetus: ei reunaviivaa.
  4. Siirrä origo ikkunan keskelle komentojen width (ikkunan leveys) ja height (ikkunan korkeus) avulla.
  5. Määrittele kokonaislukumuuttuja x ja sijoita siihen hiiren vaakakoordinaatti, jossa on huomioitu origon vaakasuuntainen uusi paikka.
  6. Määrittele kokonaislukumuuttuja y ja sijoita siihen hiiren pystykoordinaatti, jossa on huomioitu origon pystysuuntainen uusi paikka.
  7. Jos hiiren painike on pohjassa, niin
  8. Aseta punainen väri.
  9. Piirrä punainen ympyrä, jonka leveys ja korkeus on 20 paikkaan (x, y).
  10. Pyöritä koordinaatistoa 90 astetta myötäpäivään.
  11. Aseta sininen väri.
  12. Piirrä sininen ympyrä, jonka leveys ja korkeus on 20 paikkaan (x, y). Vaikka koordinaatti on sama, paikka on eri johtuen koordinaatiston pyörittämisestä.
  13. Pyöritä koordinaatistoa 90 astetta myötäpäivään.
  14. Aseta vihreä väri.
  15. Piirrä vihreä ympyrä, jonka leveys ja korkeus on 20 paikkaan (x, y). Vaikka koordinaatti on sama, paikka on eri johtuen koordinaatiston pyörittämisestä.
  16. Pyöritä koordinaatistoa 90 astetta myötäpäivään.
  17. Aseta keltainen väri.
  18. Piirrä keltainen ympyrä, jonka leveys ja korkeus on 20 paikkaan (x, y). Vaikka koordinaatti on sama, paikka on eri johtuen koordinaatiston pyörittämisestä.
 

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
void setup () {

     size(800,800); // Ikkunan koko voi olla mikä tahansa

     background(0); // Taustaväri musta

     noStroke(); // Ei reunaviivaa

}

void draw () {

     translate(width/2,height/2); // Origo ikkunan keskelle

     int x = mouseX-(width/2); // Lue hiiren x-koordinaatti

     int y = mouseY-(height/2); // Lue hiiren y-koordinaatti

     if (mousePressed == true) { // Jos hiiren painike on pohjassa

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

          ellipse(x,y,20,20); // Piirrä ympyrä ennen siirrosta

          rotate(radians(90)); // Pyöritä koordinaatistoa 90°:tta

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

          ellipse(x,y,20,20); // Piirrä ympyrä siirroksen jälkeen

          rotate(radians(90)); // Pyöritä koordinaatistoa 90°:tta

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

          ellipse(x,y,20,20); // Piirrä ympyrä siirroksen jälkeen

          rotate(radians(90)); // Pyöritä koordinaatistoa 90°:tta

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

          ellipse(x,y,20,20); // Piirrä ympyrä siirroksen jälkeen

     }

}

Kun ajat ohjelman, voit piirtää yhtä aikaa neljällä eri värillä siten, että jokainen eri väri piirtojälki kiertyy 90 astetta myötäpäivään edelliseen nähden. Eli pidä hiiren vasen painike pohjassa ja liikuta hiirtä ikkunassa. Origo on nyt ikkunan keskellä. Kannattaa huomata, että translate()- komento ei vaikuta hiiren koordinaatteihin (mouseX, mouseY). Tarvitaan siis korjaus, kun määritellään muuttujille x ja y arvot. Koska origo on ikkunan keskellä, mouseX ja mouseY arvoista pitää vähentää puolet ikkunan koosta pois, jotta piirtäminen sujuu oikein.

Esimerkki: Skaalaus ja kierto hiiren avulla

Tutkitaan seuraavaa esimerkkiä.

SANALLINEN ALGORITMI
  1. Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
  2. Aseta täyttöväriksi punainen.
  3. Aseta asetus, että liike on pehmeää.
  4. Tyhjennä tausta ja väritä se valkoiseksi.
  5. Määrittele kokonaislukumuuttuja x ja sijoita siihen hiiren vaakasuuntainen koordinaatin arvo.
  6. Määrittele desimaalilukumuuttuja y ja sijoita siihen hiiren pystysuuntainen koordinaatin arvo. Skaalataan hiiren koordinaatti map()- funktiolla asteikolta [0, 400] asteikolle [0, 20].
  7. Siirretään origo 200 px oikealle ja 200 px alas eli siirretään origo ikkunan keskelle.
  8. Pyöritä koordinaatistoa myötäpäivään muuttujan x arvon verran. Hiiren vaakasuuntainen liike pyörittää koordinaatistoa.
  9. Skaalaa koordinaatiston asteikkoa isommaksi muuttujan y arvon verran. Hiiren pystysuuntainen liike suurentaa koordinaatistoa.
  10. Piirrä neliö, jonka nurkkapiste on kohdassa (-10, -10) ja neliön leveys on 20. Neliön pyörimistä ja kokoa muutetaan translate()- ja rotate()- komennoilla.
 

// Ohjelman tehnyt e-Oppi Oy

// 30.9.2017

void setup () {

     size(400,400); // ikkunan koko

     fill(255,0,0); // Täyttöväri punainen

     smooth();  // Pehmeä liike

}



void draw () {

     background(255); // Tyhjennä tausta

     int x = mouseX;  // Lue hiiren vaakakoordinaatti

     float y = map(mouseY,0,400,0,20);  // Skaalaa asteikolle [0,20]

     translate(200,200); // Siirrä origo ikkunan keskelle

     rotate(radians(x));  // Hiiren vaakasuuntainen liike pyörittää

     scale(y);  // Hiiren pystysuuntainen liike kasvattaa kokoa

     rect(-10,-10,20,20);  // Piirrä 20x20 neliö ikkunan keskelle

}

Suorita ohjelma ja samalla liikuta hiirtä ylös ja alas, sekä oikealle ja vasemmalle. Huomaat, että kun hiiren liike on vaakasuuntainen, niin neliö pyörii ympäri ja kun hiiren liike on pystysuuntainen, niin neliön koko kasvaa.