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?