5.3 Koordinaatiston skaalaus ja peilaus

Yhteenveto

Komennolla scale(koko); voidaan koordinaatistoa venyttää suuremmaksi (koko > 1) tai kutistaa pienemmäksi (koko < 1). Jos skaalauksessa käytetään negatiivisia arvoja, niin tällöin saadaan aikaiseksi x tai y-akselin peilaus. Koko-arvo voidaan tehdä erikseen x- ja y- akselille. Jos käytät kahta eri koko arvoa, niin laita tällöin pilkku väliin.

Koordinaatiston skaalaus

Tällä tunnilla tutkitaan skaalaus-komentoa, joka on muotoa.

scale(x,y);	Komento skaalaa koordinaatistoa joko isommaksi tai pienemmäksi. Skaalaus voidaan tehdä erikseen vaaka- ja pystysuunnassa. Kun lukuarvo x tai y on suurempi kuin 1, niin koordinaatisto skaalautuu isommaksi. Kun lukuarvo x tai y on pienempi kuin 1, niin koordinaatisto skaalautuu pienemmäksi. Käyttämällä negatiivisia arvoja, voidaan koordinaatistosta ottaa peilikuva.
x	Ilmoittaa skaalauksen suuruuden vaakasuunnassa.
y	Ilmoittaa skaalauksen suuruuden pystysuunnassa.

Lähdetään esimerkistä liikkeelle. Tehdään seuraava esimerkki ohjelma.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta täyttöväriksi punainen. Aseta asetus: Ei reunaviivaa. Skaalaa koordinaatisto 1-kertaiseksi. Piirrä ellipsi, jonka keskipiste on kohdassa (50, 50) ja halkaisija 100.

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
void setup () {

     size(400,400); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     fill(255,0,0); // Täyttöväri punainen

     noStroke();  // Poista reunaviiva

}

void draw () {

     scale(1); // Zoomaa 1-kertaiseksi

     ellipse(50,50,100,100);

}

Ohjelma piirtää punaisen ympyrän ilman reunaviivaa valkeaan ikkunaan, jonka koko on 400 x 400. Lisätään ennen ympyrän piirtämistä scale(1); komento. Arvolla 1 emme skaalaa koordinaatistoa, vaan kuvio piirtyy alkuperäisenä.

Lähdetään muuttamaan esimerkin scale(1); arvoja ja katsotaan mitä tapahtuu.

scale(2);	scale(4);
Komento muuttaa pysty- ja vaakasuunnan kaksinkertaiseksi. Ikkunaan mahtuu koordinaatisto, jonka koko on 200 x 200. Matematiikassa tämä vastaa mittakaavaa 2:1.	Komento muuttaa pysty- ja vaakasuunnan nelinkertaiseksi. Ikkunaan mahtuu koordinaatisto, jonka koko on 100 x 100. Matematiikassa tämä vastaa mittakaavaa 4:1.

scale(0.5);	scale(0.1);
Komento kutistaa koordinaatiston puoleen alkuperäisestä. Ikkunaan mahtuu koordinaatisto, jonka koko on 800 x 800. Matematiikassa tämä vastaa mittakaavaa 1:2.	Komento kutistaa koordinaatiston 10-osaan alkuperäisestä. Ikkunaan mahtuu koordinaatisto, jonka koko on 4 000 x 4 000. Matematiikassa tämä vastaa mittakaavaa 1:10.

scale(2,4);	scale(4,2);
Komento muuttaa vaakasuunnan kaksinkertaiseksi ja pystysuunnan nelinkertaiseksi. Ikkunaan mahtuu koordinaatisto, jonka koko on 200 x 100.	Komento muuttaa vaakasuunnan nelinkertaiseksi ja pystysuunnan kaksinkertaiseksi. Ikkunaan mahtuu koordinaatisto, jonka koko on 100 x 200.

Koordinaatiston peilaus

Tutkitaan kuinka peilaukset onnistuvat scale(x,y); komennolla. Lähdetään esimerkistä liikkeelle.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta täyttöväriksi musta. Aseta viivan väriksi musta. Aseta viivan paksuudeksi 5. Siirrä origoa 200 px oikealle ja 200 px alas eli siirrä origo ikkunan keskelle. Laita peilaus-komento päälle. Vaakasuuntainen peilaus on 1 ja pystysuuntainen peilaus on 1. Piirrä x-akseli eli viiva, jonka alkupiste on (-200, 0) ja loppupiste on (200, 0). Piirrä y-akseli eli viiva, jonka alkupiste on (0, 200) ja loppupiste on (0, -200). Piirrä piste paikkaan (100, 50).

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
void setup () {

     size(400,400); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     fill(0); // Täyttöväri musta

     stroke(0); // Viivanväri musta

     strokeWeight(5); // Viivan paksuus 5

}

void draw () {

     translate(200,200); // Origo ikkunan keskelle

     scale(1,1); // Ei peilausta

     line(-200,0,200,0); // x-akseli

     line(0,200,0,-200); // y-akseli

     point(100,50); // 100 oikealle ja 50 alas

}

Määritetään ikkunan kooksi 400 x 400. Siirretään koordinaatisto ikkunan keskelle. Koska meillä ei vielä ole käytössä peilausta, niin x-koordinaatit kasvavat oikealle ja y-koordinaatit kasvavat alaspäin. Piste piirretään origosta eli ikkunan keskeltä 100 px oikealle ja 50 px alas. Lopputulos on kuvan mukainen.

Tutkitaan mitä arvoja scale(x,y); komentoon voidaan laittaa, jos haluamme peilata koordinaatistoja.

scale(1,1);	scale(1,-1);
Koordinaatistossa ei ole peilausta eli x:n arvot kasvavat oikealle ja y:n arvot kasvavat alas.	Peilataan y-akseli peilikuvaksi. X:n arvot kasvavat oikealle ja y:n arvot kasvavat ylös.

scale(-1,1);	scale(-1,-1);
Peilataan x-akseli peilikuvaksi. X:n arvot kasvavat vasemmalle ja y:n arvot alas.	Peilataan, sekä x-akseli, että y-akseli peilikuvaksi. X:n arvot kasvavat vasemmalle ja y:n arvot ylös.

Matematiikan xy-koordinaatisto

Matematiikassa on käytössä koordinaatisto, jossa origo on ikkunan keskellä. X:n arvot kasvavat oikealle ja y:n arvot kasvavat ylös. Ohjelma, joka asettaa xy- koordinaatiston, piirtää x- ja y- akselit on seuraava. Nyt kun laitat koordinaatistoon pisteen (100, 50), niin se menee oikeaan paikkaan.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta viivan väriksi musta Aseta viivan paksuudeksi 5. Siirrä origoa 200 px oikealle ja 200 px alas eli siirrä origo ikkunan keskelle. Peilaa koordinaatiston y-akseli, jolloin y:n arvot kasvavat ylöspäin. Piirrä x-akseli eli viiva, jonka alkupiste on (-200, 0) ja loppupiste on (200, 0). Piirrä y-akseli eli viiva, jonka alkupiste on (0, 200) ja loppupiste on (0, -200). Piirrä piste paikkaan (100, 50).

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
void setup () {

     size(400,400); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     stroke(0); // Viivanväri musta

     strokeWeight(5); // Viivan paksuus 5

}



void draw () {

     translate(200,200); // Origo ikkunan keskelle

     scale(1,-1); // Peilaa y-akseli

     line(-200,0,200,0); // x-akseli

     line(0,200,0,-200); // y-akseli

     point(100,50); // 100 oikealle ja 50 ylös
}

Ohjelman suoritus näyttää tältä.

Jos haluat, että origo menee aina ikkunan keskelle riippumatta siitä minkä kokoinen ikkuna on, käytä tällöin komentoa: translate(width/2,height/2);

Jos haluamme piirtää vain koordinaatiston I-neljänneksen, niin silloin asetamme translate(x,y); komennolla origon ikkunan vasempaan alareunaan. Lisäksi peilaamme y-akselin. Kokonainen ohjelma on tällöin muotoa.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta viivan väriksi musta Aseta viivan paksuudeksi 5. Siirrä origoa 0 px oikealle ja 400 px alas eli siirrä origo ikkunan vasempaan alareunaan. Peilaa koordinaatiston y-akseli, jolloin y:n arvot kasvavat ylöspäin. Piirrä x-akseli eli viiva, jonka alkupiste on (0, 0) ja loppupiste on (400, 0). Piirrä y-akseli eli viiva, jonka alkupiste on (0, 400) ja loppupiste on (0, 0). Piirrä piste paikkaan (100, 50).

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017

void setup () {

     size(400,400); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     stroke(0); // Viivanväri musta

     strokeWeight(5); // Viivan paksuus 5

}

void draw () {

     translate(0,400); // Origo alas vasemmalle

     scale(1,-1); // Peilaa y-akseli

     line(0,0,400,0); // x-akseli

     line(0,400,0,0); // y-akseli

     point(100,50); // 100 oikealle ja 50 ylös

}

Ohjelman suoritus näyttää nyt tältä.

Jos haluat, että origo menee aina vasemapaan alareunaa riippumatta siitä minkä kokoinen ikkuna on, käytä tällöin komentoa: translate(0,height);

Esimerkki: Monta peilausta peräkkäin

Tehdään ohjelma, jossa on useita peilauksia.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta viivan väriksi musta Aseta viivan paksuudeksi 5. Siirrä origoa 200 px oikealle ja 200 px alas eli siirrä origo ikkunan keskelle. Piirrä x-akseli eli viiva, jonka alkupiste on (-200, 0) ja loppupiste on (200, 0). Piirrä y-akseli eli viiva, jonka alkupiste on (0, 200) ja loppupiste on (0, -200). Aseta punainen täyttöväri. Piirrä punainen kolmio, jonka nurkkapisteet ovat (50, 50), (150, 50) ja (50, 100). Peilaa koordinaatiston y-akseli, jolloin y:n arvot kasvavat ylöspäin. Aseta vihreä täyttöväri. Piirrä vihreä kolmio, jonka nurkkapisteet ovat (50, 50), (150, 50) ja (50, 100). Peilaa koordinaatiston x-akseli, jolloin x:n arvot kasvavat vasemmalle. Aseta sininen täyttöväri. Piirrä vihreä kolmio, jonka nurkkapisteet ovat (50, 50), (150, 50) ja (50, 100).

// Ohjelman tehnyt e-Oppi Oy

// 30.8.2017

void setup () {

     size(400,400); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     stroke(0); // Viivanväri musta

     strokeWeight(5); // Viivan paksuus 5

}



void draw () {

     translate(200,200); // Origo ikkunan keskelle

     line(-200,0,200,0); // x-akseli

     line(0,200,0,-200); // y-akseli

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

     triangle(50,50,150,50,50,100); // Piirrä punainen kolmio

     scale(1,-1); // Peilaa y-akseli

     fill(0,255,0); // Vihreä

     triangle(50,50,150,50,50,100); // Piirrä vihreä kolmio

     scale(-1,1); // Peilaa x-akseli

     fill(0,0,255); // Sininen

     triangle(50,50,150,50,50,100); // Piirrä sininen kolmio

}

Kannattaa huomata, että kolmio-komento on sama kaikilla kolmioilla. Ensimmäiseksi piirretään punainen kolmio oikealle alas, koska ilman peilausta x:n arvot kasvavat oikealle ja y:n arvot kasvavat alas. Tämän jälkeen peilataan y-akseli peilikuvaksi. Kun seuraavaksi piirretään vihreä kolmio samoilla koordinaateilla, niin vihreä kolmio piirretään nyt oikealle ylös, koska nyt x:n arvot kasvavat oikealle ja y:n arvot ylös. Seuraavaksi peilataan x-akseli. Kun nyt piirretään sininen kolmio, niin se piirretään vasemmalle ylös, koska nyt x:n arvot kasvavat oikealle ja y:n arvot kasvavat ylös. Koska y:n arvot jo peilattiin punaisen kolmion jälkeen, niin se asetus on yhä päällä piirrettäessä sinistä kolmiota. Tärkeintä on huomata, että komennot suoritetaan järjestyksessä. Ohjelman suoritus näyttää tältä.

Esimerkki: Piirtelyä peilikuvana

Seuraavat komennot lukevat hiiren koordinaattipisteet:

mouseX;	Lukee hiiren x-koordinaatin arvon
mouseY;	Lukee hiiren y-koordinaatin arvon

Seuraavalla ohjelmalla voit piirtää peilikuvana.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 800 px vaakaan ja 800 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Siirrä origoa 400 px oikealle ja 400 px alas eli siirrä origo ikkunan keskelle. Aseta reunaviivan väriksi musta. Määrittele kokonaislukumuuttuja x ja tallenna siihen hiiren x-koordinaatti siirrettynä ikkunan keskelle. Määrittele kokonaislukumuuttuja y ja tallenna siihen hiiren y-koordinaatti siirrettynä ikkunan keskelle. Jos hiiren vasen painike on pohjassa, niin Aseta punainen täyttöväri. Piirrä punainen ympyrä, jonka halkaisija on 20, paikkaan (x, y). Peilaa x:n akseli eli x:n arvot kasvavat vasemmalle. Aseta sininen täyttöväri, Piirrä sininen ympyrä, jonka halkaisija on 20, paikkaan (x, y). Sininen ympyrä piirretään peilikuvana, koska x-akseli osoittaa eri suuntaan.

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
void setup() {

     size(800,800); // Ikkunan koko

     background(255); // Valkea tausta

} 

void draw() {

     translate(400,400); // Origo ikkunan keskelle

     stroke(0); // Reunaviivan väri musta

     line(0,-400,0,400);  // Piirrä pystyviiva ikkunan keskelle

     noStroke(); // Ei reunaviivaa

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

     int y = mouseY-400; // Lue hiiren y-koordinaatti

     if (mousePressed == true) { // Jos hiirtä painettu

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

          ellipse(x,y,20,20);    // Piirrä punainen ympyrä

          scale(-1,1);           // Peilaa koordinaatisto

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

          ellipse(x,y,20,20);    // Piirrä sininen ympyrä

     }

}

Kuinka koodi pitäisi muuttaa, että voisit peilata vaakasuunnassa? Entä jos haluaisit peilata sekä pysty- että vaakasuunnassa yhtä aikaa?