Komento | Merkitys |
translate(x,y); | Komento siirtää koordinaatistoa x:n verran oikealle ja y:n verran alas. |
scale(kerroin); | Komento suurentaa tai pienentää koordinaatistoa. Kun kerroin on välillä 0…1, niin koordinaatisto pienenee. Kun kerroin on suurempi kuin yksi, niin koordinaatisto suurenee. Arvo 0 ei ole sallittu. |
rotate(radians(kulma)); | Komennolla voidaan pyörittää koko koordinaatistoa joko myötä- tai vastapäivään. Positiivisilla arvoilla pyöritys tapahtuu myötäpäivään ja negatiivisilla arvoilla pyöritys tapahtuu vastapäivään. |
Esimerkiksi komento: translate(200,100); siirtää origoa 200 px oikealle ja 100 px alas. Kaikki komennon jälkeen annetut piirrosobjektit siirtyvät mukana. Oheinen kuva havainnollistaa asiaa.
Esimerkiksi kun otetaan komento: scale(2); niin tällöin koordinaatisto kaksinkertaistuu. Kaikki komennon jälkeen annetut piirtokomennot piirretään myös kaksinkertaisena. Oheinen kuva havainnollistaa asiaa.
Esimerkiksi komento: rotate(radians(45)); pyöräyttää koordinaatistoa 45°:tta myötäpäivään origon suhteen. Kaikki komennon jälkeen annetut piirto-objektit pyörivät mukana. Oheinen kuva havainnollistaa asiaa.
Tehdään ohjelma, jossa on origon keskellä suorakulmio. Suorakulmion vasen ylänurkka on pisteessä (-200,-25) ja suorakulmion leveys on 400 ja korkeus 50. Ohjelmassa origo on siirretty ikkunan keskelle komennolla: translate(width/2, height/2); Alla oleva kuva havainnollistaa asiaa.
Lisätään ohjelmaan neljä liukupalkkia. Ensimmäinen liukupalkki saa arvoja väliltä -300 ja 300. Tämä arvo välitetään muuttujalle x. Samoin toinen liukupalkki saa arvoja väliltä -300 ja 300. Tämä arvo välitetään muuttujalle y. Kun annamme komennon translate(x,y); niin kuviota voidaan nyt siirtää sekä vaaka, että pystysuunnassa. Kolmas liukupalkki saa arvoja väliltä 0.1 ja 10. Tämä arvo välitetään muuttujalle koko. Kun annamme komennon scale(koko); niin kuvio pienenee 10-osaan tai suurenee 10-kertaiseksi. Neljäs liukupalkki saa arvoja väliltä -360 ja 360. Tämä arvo välitetään muuttujalle kulma. Kun annamme komennon rotate(radians(kulma)); niin kuvio pyörähtää joko 360 astetta vastapäivään tai 360 astetta myötäpäivään eli yhteensä kahden ympyrän verran.
var aSlider; // Määritellään muuttuja aSlider var bSlider; // Määritellään muuttuja bSlider var cSlider; // Määritellään muuttuja cSlider var dSlider; // Määritellään muuttuja dSlider function setup() { createCanvas(600, 600); // Ikkunan koko 600x600 aSlider = createSlider(-300, 300, 0); // Ensimmäinen liukupalkki aSlider.position(10, 20); bSlider = createSlider(-300, 300, 0); // Toinen liukupalkki bSlider.position(160, 20); cSlider = createSlider(0.1, 10, 1); // Kolmas liukupalkki cSlider.position(310, 20); dSlider = createSlider(-360, 360, 0); // Neljäs liukupalkki dSlider.position(460, 20); strokeWeight(10); // Viivan paksuus 10 stroke(255,0,255); // Viivan väri magneta fill(0,0,255); // Täyttöväri sininen } function draw() { background(250,200,0); // Taustaväri translate(width/2,height/2); // Origo ikkunen keskelle var x = aSlider.value(); // Määritellään muuttuja x ja annetaan sille 1. liukupalkin arvo var y = bSlider.value(); // Määritellään muuttuja y ja annetaan sille 2. liukupalkin arvo var koko = cSlider.value(); // Määritellään muuttuja koko ja annetaan sille 3. liukupalkin arvo var kulma = dSlider.value(); // Määritellään muuttuja kulma ja annetaan sille 4. liukupalkin arvo translate(x,y); // Siirrä koordinaatistoa x:n verran oikealle ja y:n verran alas scale(koko); // Pienennä tai suurenna koordinaatistoa rotate(radians(kulma)); // Pyöritä koordinaatistoa rect(-200,-25,400,50); // Piirrä suorakulmio. } |
Kun ajat ohjelman, niin se näyttää tältä. Kokeile siirtää liukupalkkeja.
Useita Translate-komentoja
Mikä laitamme peräkkäin useita translate(x,y); komentoja, niin origon paikka voidaan määrittää jokaiselle kuviolle erikseen.
Kun origon paikka on jokaiselle kuviolla oma eli jokaisen kuvion nurkassa, niin tällöin voimme pyörittää haluttua kuviota esimerkiksi liukupalkeilla. Tehdään seuraava ohjelma.
var aSlider; // Määritellään muuttuja aSlider var bSlider; // Määritellään muuttuja bSlider var cSlider; // Määritellään muuttuja cSlider var dSlider; // Määritellään muuttuja dSlider function setup() { createCanvas(600, 600); // Ikkunan koko aSlider = createSlider(0, 90, 0); // 1. liukupalkki aSlider.position(10, 20); bSlider = createSlider(0, 90, 0); // 2. liukupalkki bSlider.position(160, 20); cSlider = createSlider(0, 90, 0); // 3. liukupalkki cSlider.position(310, 20); dSlider = createSlider(0, 90, 0); // 4. liukupalkki dSlider.position(460, 20); noStroke(); // Ei reunaviivaa } function draw() { background(0,200,240); // Taustaväri var r1 = aSlider.value(); // Määritellään muuttuja r1 ja annetaan sille arvo 1. liukupalkista var r2 = bSlider.value(); // Määritellään muuttuja r2 ja annetaan sille arvo 2. liukupalkista var r3 = cSlider.value(); // Määritellään muuttuja r3 ja annetaan sille arvo 3. liukupalkista var r4 = dSlider.value(); // Määritellään muuttuja r4 ja annetaan sille arvo 4. liukupalkista fill(100,255,0); // Vihreä väri rect(0,500,600,100); // Piirrä nurmikko translate(300,500); // -> Piste A rotate(radians(-r1)); // Pyöritä vastapäivään fill(255,100,0); // Täyttöväri rect(0,-50,100,50); // Alimmainen kappale translate(100,-50); // -> Piste B rotate(radians(r2)); // Pyöritä myötäpäivään fill(255,150,0); // Täyttöväri rect(-100,-50,100,50); // Toiseksi alimmainen kappale translate(-100,-50); // -> Piste C rotate(radians(-r3)); // Pöritä vastapäivään fill(255,200,0); // Täyttöväri rect(0,-50,100,50); // Kolmanneksi alimmainen kappale translate(100,-50); // -> Piste D rotate(radians(r4)); // Pyöritä myötäpäivään fill(255,250,0); // Täyttöväri rect(-100,-50,100,50); // Ylimmäinen kappale } |
Ohjelman suoritus näyttää tältä.
Oheinen kuvio havainnolistaa origon paikan siirtymistä. Alussa origo on ikkunan vasemmassa yläreunassa.