Piirtokomennot



Processing-ohjelmoinnissa on kaksi lohkoa, joita nimitetään myös funktioiksi. Nämä lohkot ovat: void setup () { } ja void draw ( ) { }. Kaarisulkeilla esitetään lohkon aloitusta ja lopetusta. Void setup ( ) - lohko suoritetaan vain kerran ja siinä on yleensä ohjelman pysyvät asetukset, kuten esimerkiksi koordinaatiston koko: size(x,y);. Void draw ( ) - lohko on ikuisessa silmukassa ja siinä on ohjelman muuttuvat asetukset. Kaikki piirtokomennot kirjoitetaan yleensä void draw ( ) -lohkoon. Palautetaan ensin mieliin Processing-ohjelmoinnin piirtokomennot, jotka ovat seuraavat.

KuvioKomentoMerkitys
Piste point(x,y); Komento piirtää pisteen paikkaan (x, y).
Viiva line(x1,y1,x2,y2); Komento piirtää viivan pisteiden (x1, y1) ja (x2, y2) välille.
Suorakulmio rect(a,b,c,d); Komento piirtää suorakulmion, jonka nurkkapiste on (a, b), leveys on c ja korkeus on d.
Ellipsi ellipse(a,b,c,d); Komento piirtää ellipsin, jonka keskipiste on (a, b), leveys on c ja korkeus d.
Kolmio triangle(x1,y1,x2,y2,x3,y3); Komento piirtää kolmion pisteiden (x1, y1), (x2, y2) ja (x3, y3) välille.
Nelikulmio quad(x1,y1,x2,y2,x3,y3,x4,y4); Komento piirtää nelikulmion pisteiden (x1, y1), (x2, y2), (x3, y3) ja (x4, y4) välille.
Monikulmio beginShape();
vertex(x1,y1);
vertex(x2,y2);
...
vertex(xn,yn);
endShape(CLOSE);		 Komento piirtää monikulmion pisteiden (x1, y1), (x2, y2), ... ,(xn, yn) välille.
Kaari arc(a,b,c,d,e,f,tyyppi); Komento piirtää sektorin tai segmentin. Ellipsin keskipiste on (a, b) ja leveys on c ja korkeus on d. Kaaren aloituskulma on e ja lopetuskulma on f. Kulmat on annettava radiaani-asteina. Kun tyyppi on PIE, niin tällöin piirretään sektori. Kun tyyppi on CHORD tai OPEN, niin tällöin piirretään segmentti. OPEN tyypillä aloitus- ja lopetuskulmat piirretään ilman reunaviivaa.


Katsotaan vielä piirtokomentojen käyttämistä käytännössä. Tehdään ohjelma, joka piirtää pisteen, viivan, vihreän suorakulmion ja keltaisen ellipsin ikkunaan, jonka koko on 450 x 450.



Ohjelman koodi on seuraava:

Sanallinen algoritmi
  1. Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Aseta reunaviivan paksuudeksi 5.
  4. Piirrä piste paikkaan (200, 50).
  5. Piirrä viiva pisteiden (250, 150) ja (350, 50) välille.
  6. Aseta täyttöväriksi vihreä.
  7. Piirrä vihreä suorakulmio, jonka nurkkapiste on (50, 200), leveys 100 ja korkeus 200.
  8. Aseta täyttöväriksi keltainen.
  9. Piirrä keltainen ellipsi, jonka keskipiste on (350, 350), leveys 200 ja korkeus 150.
 

// Ohjelman tehnyt e-Oppi Oy
// 20.2.2017

void setup() {

     size(450,450); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     strokeWeight(5); // Reunaviivan paksuus 5

} 



void draw() {

     point(200,50); // Piirrä piste

     line(250,150,350,50); // Piirrä viiva

     fill(0,255,0);  // Aseta täyttöväri vihreäksi

     rect(50,200,100,200); // Piirrä suorakulmio

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

     ellipse(350,350,200,150); // Piirrä ellipsi

}


Tehdään vielä toinen ohjelma, joka piirtää punaisen kolmion, vihreän nelikulmion, sinisen monikulmion ja keltaisen sektorin.



Ohjelman koodi on seuraava:

SANALLINEN ALGORITMI
  1. Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Aseta reunaviivan paksuudeksi 5.
  4. Aseta täyttöväriksi punainen.
  5. Piirrä punainen kolmio, jonka nurkkapisteet ovat (50, 150), (200, 100) ja (100, 50).
  6. Aseta täyttöväriksi vihreä.
  7. Piirrä vihreä nelikulmio, jonka nurkkapisteet ovat (250, 200), (350, 200), (400, 50), (300, 50).
  8. Aseta täyttöväriksi sininen.
  9. Piirrä sininen monikulmio, jonka nurkkapisteet ovat (50, 400), (200, 300), (100, 250), (150, 200), (50, 250).
  10. Aseta täyttöväriksi keltainen.
  11. Piirrä sektori, jonka keskipiste on kohdassa (350, 350), sektori on ellipsin sisällä, jonka leveys on 200 ja korkeus on 200. Sektorin aloituskulma on 45 astetta ja lopetuskulma on 270 astetta.
 

// Ohjelman tehnyt e-Oppi Oy

// 20.2.2017

void setup() {

     size(450,450); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     strokeWeight(5); // Reunaviivan paksuus 5

} 



void draw() {

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

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

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

     quad(250,200,350,200,400,50,300,50); // Piirrä nelikulmio

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

     beginShape(); // Aloita monikulmio

       vertex(50,400);

       vertex(200,300);

       vertex(100,250);

       vertex(150,200);

       vertex(50,250);

     endShape(CLOSE); // Lopeta monikulmio

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

     arc(350,350,200,200,radians(45),radians(270),PIE); // Piirrä sektori
}