Esimerkki: Koordinaatiston siirto

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

SANALLINEN ALGORITMI
  1. Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Aseta viivan väriksi musta
  4. Piirrä viiva, jonka alkupiste on (100, 100) ja loppupiste on (200, 200).
  5. Siirrä origo 50 px oikealle ja 100 px alaspäin.
  6. 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.