Tehdään ohjelma, jossa on useita koordinaatiston siirtoja. Piirretään keltaisia suorakulmioita pisteeseen (100, 100), jonka leveys on 100 px ja korkeus 50 px. Tehdään aluksi kaksi siirtoa, mutta lopussa haluamme palata alkuperäiseen koordinaatistoon ja piirtää vihreän suorakulmion ensimmäisen suorakulmion oikealle puolen. Ohjelma on seuraava.
SANALLINEN ALGORITMI
- Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
- Aseta ikkunan taustaväriksi valkoinen.
- Aseta viivan väriksi musta
- Aseta täyttöväriksi keltainen.
- Piirrä keltainen suorakulmio, jonka nurkkapiste on (100, 100), leveys 100 ja korkeus 50.
- Siirrä origoa 20 px oikealle ja 40 px alas.
- Piirrä keltainen suorakulmio, jonka nurkkapiste on (100, 100), leveys 100 ja korkeus 50.
- Siirrä origoa 20 px oikealle ja 40 px alas.
- Piirrä keltainen suorakulmio, jonka nurkkapiste on (100, 100), leveys 100 ja korkeus 50.
- Siirrä origoa 40 px vasemmalle ja 80 px ylös.
- Aseta vihreä täyttöväri.
- Piirrä vihreä suorakulmio, jonka nurkkapiste on (200, 100), leveys 100 ja korkeus 50.
|
// 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() {
fill(255,255,0); // Keltainen täyttöväri
rect(100,100,100,50);
translate(20,40); // Siirrä koordinaatisto 20 oikealle ja 40 alas
rect(100,100,100,50);
translate(20,40); // Siirrä koordinaatisto 20 oikealle ja 40 alas
rect(100,100,100,50);
translate(-40,-80); // Siirrä koordinaatisto 40 vasemalle ja 80 ylös
fill(0,255,0); // Vihreä täyttöväri
rect(200,100,100,50);
}
Ohjelman suoritus näyttää tältä.
Kuten huomasit, niin uusi siirto tehdään aina laskien sen hetkisestä koordinaatistosta, ei alkuperäisestä koordinaatistosta. Kun haluamme palata takaisin alkuperäiseen koordinaatistoon, niin meidän pitää tehdä yhtä suuri siirto takaisin päin, mutta vastakkaiseen suuntaan eli negatiiviseen suuntaan.
Olisiko mahdollista palauttaa alkuperäinen koordinaatisto jollain komennolla? Kyllä, se onnistuu komennoilla: pushMatrix(); ja popMatrix();
| pushMatrix( ); |
Komento ottaa muistiin tämän hetkisen koordinaatiston. |
| popMatrix( ); |
Komento palauttaa muistissa olevan koordinaatiston takaisin. |
Edellinen esimerkki voidaan kirjoittaa nyt muodossa.
SANALLINEN ALGORITMI
- Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
- Aseta ikkunan taustaväriksi valkoinen.
- Aseta viivan väriksi musta
- Aseta täyttöväriksi keltainen.
- Piirrä keltainen suorakulmio, jonka nurkkapiste on (100, 100), leveys 100 ja korkeus 50.
- Ota koordinaatisto muistiin.
- Siirrä origoa 20 px oikealle ja 40 px alas.
- Piirrä keltainen suorakulmio, jonka nurkkapiste on (100, 100), leveys 100 ja korkeus 50.
- Siirrä origoa 20 px oikealle ja 40 px alas.
- Piirrä keltainen suorakulmio, jonka nurkkapiste on (100, 100), leveys 100 ja korkeus 50.
- Palautetaan koordinaatisto muistista.
- Aseta vihreä täyttöväri.
- Piirrä vihreä suorakulmio, jonka nurkkapiste on (200, 100), leveys 100 ja korkeus 50.
|
// 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() {
fill(255,255,0); // Keltainen täyttöväri
rect(100,100,100,50);
pushMatrix(); // Otetaan koordinaatisto muistiin
translate(20,40); // Siirrä koordinaatisto 20 oikealle ja 40 alas
rect(100,100,100,50);
translate(20,40); // Siirrä koordinaatisto 20 oikealle ja 40 alas
rect(100,100,100,50);
popMatrix(); // Palautetaan muistissa oleva koordinaatisto
fill(0,255,0); // Vihreä täyttöväri
rect(200,100,100,50);
}
Kokeile laittaa translate(x,y) komentoon mitä arvoja tahansa ja vihreä suorakulmio piirretään aina samaan paikkaan.
