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.