Close menu
Close menu

Tunnistaudu

Kirjaudu

Etkö ole vielä jäsen?

Liity jäseneksi
Etusivu / Materiaalit / Taidetta ohjelmoimalla / 5. Muuttujat / Translate, scale ja rotate komennot

Translate, scale ja rotate komennot

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.