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.