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
  1. Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Siirrä origoa 200 px oikealle ja 200 px alas eli ikkunan keskelle.
  4. Aseta reunaviivan väriksi sininen.
  5. Aseta reunaviivan paksuudeksi 10.
  6. Poista täyttö.
  7. 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.
  8. Aseta asetus: poista reunaviiva.
  9. Aseta täyttöväriksi vihreä.
  10. Piirrä vihreä neliö ilman reunaviivaa. Neliön nurkkapiste on paikassa (50, -150) ja neliön leveys ja korkeus on 100.
  11. Aseta reunaviivan väriksi punainen.
  12. Aseta täyttöväriksi keltainen.
  13. 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);?