5.2 Koordinaatiston siirto

Yhteenveto

Komennolla translate(x,y); voidaan siirtää koordinaatiston origon paikka x:n verran oikealle ja y:n verran alas.

Koordinaatiston siirto

Käydään seuraavaksi komentoja, joilla voidaan muokata koordinaatistoa. Koordinaatiston muokkauskomentoja ovat: siirto, skaalaus, peilaus ja kierto. Aloitetaan koordinaatiston muokkaus siirto-komennosta.

Komento	Merkitys
translate(x,y);	Komento siirtää xy-koordinaatiston x:n verran oikealle ja y:n verran alas.
x	Ilmaisee siirron suuruuden vaakasuunnassa. Positiiviset arvot siirtävät koordinaatistoa oikealle ja negatiiviset arvot siirtävät koordinaatistoa vasemmalle.
y	Ilmaisee siirron suuruuden pystysuunnassa. Positiiviset arvot siirtävät koordinaatistoa alaspäin ja negatiiviset arvot siirtävät koordinaatistoa ylöspäin.

Tutkitaan seuraavaksi koordinaatiston siirtoa esimerkin avulla.

Esimerkki: Koordinaatiston siirto

Tehdään ohjelma, jossa piirretään sama viiva ennen siirrosta ja siirroksen jälkeen.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta viivan väriksi musta Piirrä viiva, jonka alkupiste on (100, 100) ja loppupiste on (200, 200). Siirrä origo 50 px oikealle ja 100 px alaspäin. Piirrä viiva, jonka alkupiste on (100, 100) ja loppupiste on (200, 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(100,100,200,200); // Viiva ennen siirtoa

     translate(50,100); // Siirrä koordinaatisto

     line(100,100,200,200); // Viiva siirron jälkeen
}

Kun ajat ohjelman, niin huomaat, että sinulla on kaksi viivaa eri paikassa, vaikka koordinaatit ovat samat. Alempi viiva on siirtynyt 50 pikseliä oikealle ja 100 pikseliä alaspäin. Se miksi viiva on eri paikassa, johtuu koordinaatiston siirrosta. Komento: translate(50,100); siirsi koko koordinaatistoa 50 px oikealle ja 100 px alas.

Kokeile siirrosta muuttamalla lukuarvoja translate(x,y); komennossa.

Esimerkki: Koordinaatisto ikkunan keskellä

Siirretään seuraavassa esimerkissä koordinaatisto ikkunan keskelle ja piirretään sininen ympyrä ilman täyttöä, vihreä neliö ilman reunaviivaa ja keltainen kolmio punaisella reunaviivalla.

Koska koordinaatisto on nyt siirretty ikkunan keskelle, mentäessä origosta vasemmalle x-koordinaatit muuttuvat negatiivisiksi. Vastaavasti mentäessä origosta ylöspäin y-koordinaatit muuttuvat negatiiviseksi.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Siirrä origoa 200 px oikealle ja 200 px alas eli ikkunan keskelle. Aseta reunaviivan väriksi sininen. Aseta reunaviivan paksuudeksi 10. Poista täyttö. Piirrä ympyrä sinisellä paksulla reunaviivalla ilman täyttöä. Ympyrän keskipiste on paikassa (-100, -100) ja ympyrän halkaisija on 100 eli ympyrän leveys on 100 ja korkeus 100. Aseta asetus: poista reunaviiva. Aseta täyttöväriksi vihreä. Piirrä vihreä neliö ilman reunaviivaa. Neliön nurkkapiste on paikassa (50, -150) ja neliön leveys ja korkeus on 100. Aseta reunaviivan väriksi punainen. Aseta täyttöväriksi keltainen. Piirrä keltainen kolmio, jonka reunaviivan väri on punainen. Kolmion nurkkapisteet ovat (0, 0), (100, 150) ja (-100, 150).

// Ohjelman tehnyt e-Oppi Oy

// 20.2.2017

void setup() {

     size(400,400); // Ikkunan koko

     background(255); // Taustaväri valkoinen

} 



void draw() {

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

     stroke(0,0,255); // Aseta sininen reunaviivan väri

     strokeWeight(10); // Aseta reunaviivan paksuus arvoon 10

     noFill(); // Poista täyttö

     ellipse(-100,-100,100,100); // Piirrä ympyrä

     noStroke(); // Poista reunaviiva

     fill(0,255,0); //Aseta täyttöväri vihreäksi

     rect(50,-150,100,100); // Piirrä neliö

     strokeWeight(10);  // Aseta viivan paksuudeksi 10

     stroke(255,0,0);  // Aseta reunaviivan väriksi punainen

     fill(255,255,0); // Aseta täyttöväriksi keltainen

     triangle(0,0,100,150,-100,150); // Piirrä kolmio
}

Mitkä olisivat kuvioiden koordinaattipisteet, jos suorittaisit komennon translate(400,400);?

Koordinaatisto automaattisesti ikkunan keskelle

Jos välillä muutetaan ikkunan kokoa, niin kuinka koordinaatisto saadaan aina ikkunan keskelle? Tämä onnistuu width ja height komennoilla, jossa on tieto nykyisestä ikkunan koosta. Tehdään ohjelma, jossa koordinaatisto on aina ikkunan keskellä riippumatta siitä minkä kokoinen on ikkunan koko.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 600 px vaakaan ja 500 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Siirrä origo ikkunan keskelle. Vaakasuuntainen paikka on puolet ikkunan leveydestä (width) ja pystysuuntainen paikka on puolet ikkunan korkeudesta (height). Piirrä vaakaaviiva eli x-akseli komennon width avulla. Piirrä pystyviiva eli y-akseli komennon height avulla.

// Ohjelman tehnyt e-Oppi Oy

// 30.8.2017

void setup () {

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

     background(255); // Taustaväri valkoinen

}

void draw () {

     translate(width/2,height/2); // Siirto on puolet ikkunan koosta

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

     line(0,-height/2,0,height/2); // Piirrä pystyviiva

}

Kokeile muuttaa size(x,y); komennossa ikkunan kokoa ja origon pitäisi olla aina ikkunan keskellä.

Monta siirtoa peräkkäin

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.

Kohteen liikuttelu hiirellä

mouseX	Lukee hiiren vaaka- eli x-koordinaatin arvon.
mouseY	Lukee hiiren pysty- eli y-koordinaatin arvon.

Hiiren koordinaatit voidaan lukea mouseX- ja mouseY- komennoilla. Koordinaatistoa voidaan liikutella myös hiiren avulla. Samalla kaikki kuviot koordinaatiston mukana liikkuvat. Tutkitaan seuraavaa esimerkkiä.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta punainen täyttöväri. Tyhjennä tausta ja väritä se valkoiseksi. Ota koordinaatisto muistiin. Liikuta koordinaatistoa hiirellä. Piirrä ympyrä origoon. Ympyrä liikkuu koordinaatiston mukana. Palauta koordinaatisto muistista.

// Ohjelman tehnyt e-Oppi Oy

// 30.8.2017

void setup() {

     size(400, 400);  // Ikkunan koko

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

}



void draw() {

     background(255); // Tyhjennä tausta

     pushMatrix(); // Koordinaatisto muistiin

     translate(mouseX, mouseY);  // Liikuta koordinnatistoa hiirellä

     ellipse(0, 0, 50, 50);  // Piirrä ympyrä

     popMatrix();  // Palauta koordinaatisto

}

Lisää toinen ympyrä, mutta eri paikkaan. Laita ympyrä juuri ennen popMatrix(); komentoa. Mitä tapahtui? Entä, jos siirrät toisen ympyrän popMatrix(); komennon jälkeen. Mikä muuttui?

Esimerkki: Kaksi hiiriosoitinta yhtä aikaa

Tehdään ohjelma, joka piirtää kahta eriväristä viivaa yhtä aikaa. Se onnistuu translate(x,y)- komennolla. Ohjelma on seuraavanlainen.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 800 px vaakaan ja 800 px pystyyn. Aseta ikkunan taustaväriksi valkoinen Aseta asetus: poista reunaviiva. Aseta täyttöväriksi keltainen. Määritellään kokonaislukumuuttuja x ja sijoitetaan siihen muistiin tämän hetkinen hiiren vaakakoordinaatti. Määritellään kokonaislukumuuttuja y ja sijoitetaan siihen muistiin tämän hetkinen hiiren pystykoordinaatti. Jos hiiren painike on pohjassa, niin Aseta punainen täyttöväri. Piirrä punainen ympyrä, jonka halkaisija on 20, paikkaan (x,y). Siirrä origoa 100 px oikealle ja 50 px alas. Aseta sininen täyttöväri. Piirrä sininen ympyrä, jonka halkaisija on 20, paikkaan (x,y). Sininen ympyrä piirretään eri paikkaan kuin punainen ympyrä, koska origo on eri paikassa.

// Ohjelman tehnyt e-Oppi Oy

// 30.8.2017

void setup () {

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

     background(255); // Taustaväri valkoinen

     noStroke(); // Ei reunaviivaa

}

void draw () {

     int x = mouseX; // Lue hiiren x-koordinaatti

     int y = mouseY; // 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

         translate(100,50); // Siirrä koordinaatisto

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

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

     }

}

Ohjelmaan on lisätty ehtolause. Jos hiiren painike on pohjassa (true), niin silloin piirrä kahta eriväristä ympyrää kahteen eri paikkaan. Punainen ympyrä on hiiren oikea paikka, sininen on hiiren siirretty paikka. Aja ohjelma, paina hiiren painike pohjaan ja liikuta hiirtä. Kuinka lisäisit kolmannen ympyrän eri paikkaan?