2.2 Kolmio, nelikulmio ja monikulmio

Yhteenveto

Sanallinen algoritmi
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn Aseta taustaväriksi valkoinen. Aseta täyttöväriksi punainen. Piirrä kolmio pisteiden (50,150), (100,50) ja (150,200) välille. Aseta täyttöväriksi vihreä. Piirrä nelikulmio pisteiden (200,100), (350,50), (400,150) ja (300,250) välille. Aseta täyttöväriksi sininen. Piirrä monikulmio pisteiden (100,400), (150,250), (200,350), (300,300) ja (350,450) välille.

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017

void setup() {

     size(450,450); // Ikkunan koko

     background(255); // Taustaväri valkoinen

}

void draw() {

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

     triangle(50,150,100,50,150,200); // Kolmio

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

     quad(200,100,350,50,400,150,300,250); // Nelikulmio

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

     beginShape(); // Aloita monikulmio

        vertex(100, 400);

        vertex(150, 250);

        vertex(200, 350);

        vertex(300, 300);

        vertex(350, 450);

     endShape(CLOSE); // Lopeta monikulmio

}

Kolmio

Komento, joka piirtää kolmen pisteen avulla kolmion, on seuraava.

KOMENTO	MERKITYS
triangle(x1,y1,x2,y2,x3,y3);	Komento piirtää kolmion pisteiden (x1,y1), (x2,y2) ja (x3,y3) välille.
x1	x1-arvo on desimaali- tai kokonaislukuarvo, joka kertoo ensimmäisen pisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.
y1	y1-arvo on desimaali- tai kokonaislukuarvo, joka kertoo ensimmäisen pisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.
x2	x2-arvo on desimaali- tai kokonaislukuarvo, joka kertoo toisen pisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.
y2	y2-arvo on desimaali- tai kokonaislukuarvo, joka kertoo toisen pisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.
x3	x3-arvo on desimaali- tai kokonaislukuarvo, joka kertoo kolmannen pisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.
y3	y3-arvo on desimaali- tai kokonaislukuarvo, joka kertoo kolmannen pisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.

Esimerkiksi kuvan mukainen kolmio saadaan komennolla: triangle(200,50,300,300,100,250); Kokonainen ohjelma voisi olla seuraava.

Sanallinen algoritmi
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Piirrä kolmio, jonka nurkkapisteet ovat (200,50), (300,300) ja (100,250).

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() {
     size(450,450); // Aseta ikkunan koko
     background(255); // Taustaväri valkoinen
}
void draw() {
     triangle(200,50,300,300,100,250); // Piirrä kolmio
}

Miksi kannattaa käyttää triangle-komentoa? Emmekö voisi yhtä hyvin piirtää kolmion kolmella viivalla? Tutkitaan tätä esimerkin avulla. Tehdään edelliseen koodiin lisäykset, jotka on lihavoitu.

Sanallinen algoritmi
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi keltainen. Aseta kuvion täyttöväriksi sininen. Piirrä kolmio, jonka nurkkapisteet ovat (200,50), (300,300) ja (100,250). Piirrä toinen kolmio kolmella viivalla. Ensimmäisen viivan aloituspiste on (250,50) ja lopetuspiste on (350,300). Toisen viivan aloituspiste on (350,300) ja lopetuspiste on (400,200). Kolmannen viivan aloituspiste on (400,200) ja lopetuspiste on (250,50). Näillä kolmella viivalla saamme piirettyä kolmion, jonka nurkkapisteet ovat (250,50), (350,300) ja (250,50).

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() {
     size(450,450); // Ikkunan koko
     background(255,255,0); // Taustaväri keltainen
     fill(0,0,255); // Täyttöväri sininen
}

void draw() {
     triangle(200,50,300,300,100,250); // Piirtää sinisen kolmion
     line(250,50,350,300); // Piirretään toinen kolmio
     line(350,300,400,200); // kolmella viivalla.
     line(400,200,250,50);
}

Vasemmanpuoleinen kolmio on luotu triangle-komennolla ja oikeanpuoleinen kolmella viivalla eli line-komennoilla. Eron huomaa heti. Triangle-komentoon voidaan asettaa täyttöväri, mutta viivoilla luotuun kolmioon emme voi. Kun suoritamme yllä olevan koodin, lopputulos näyttää tältä.

Nelikulmio

Entäpä, jos haluamme piirtää nelikulmion, jossa ei ole suoria kulmia. Tällöin voimme käyttää quad-komentoa.

KOMENTO	MERKITYS
quad(x1,y1,x2,y2,x3,y3,x4,y4);	Komento piirtää nelikulmion pisteiden (x1,y1), (x2,y2), (x3,y3) ja (x4,y4) välille.
x1	x1-arvo on desimaali- tai kokonaislukuarvo, joka kertoo ensimmäisen pisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.
y1	y1-arvo on desimaali- tai kokonaislukuarvo, joka kertoo ensimmäisen pisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.
x2	x2-arvo on desimaali- tai kokonaislukuarvo, joka kertoo toisen pisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.
y2	y2-arvo on desimaali- tai kokonaislukuarvo, joka kertoo toisen pisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.
x3	x3-arvo on desimaali- tai kokonaislukuarvo, joka kertoo kolmannen pisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.
y3	y3-arvo on desimaali- tai kokonaislukuarvo, joka kertoo kolmannen pisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.
x4	x4-arvo on desimaali- tai kokonaislukuarvo, joka kertoo neljännen pisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.
y4	y3-arvo on desimaali- tai kokonaislukuarvo, joka kertoo neljännen pisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.

Kuvan mukainen nelikulmio saadaan aikaiseksi komennolla: quad(50,200,250,50,350,250,200,350); Kokonainen ohjelma olisi seuraava.

Sanallinen algoritmi
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta kuvion täyttöväriksi valkoinen. Piirrä nelikulmio, jonka nurkkapisteet ovat (50,200), (250,50), (350,250) ja (200,350).

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() { 
     size(450,450); // Ikkunan koko
     background(255); // Taustaväri valkoinen
     fill(255); // Täyttöväri valkoinen
}

void draw() {
     quad(50,200,250,50,350,250,200,350); //Piirtää nelikulmion
}

Tutki koodia kirjoittamalla komento muotoon; quad(200,50,50,250,240,350,350,200); Mitä tapahtui?

Kuten huomaat, niin viivan väri tulee mustaksi automaattisesti. Jos haluat muuttaa viivan värin, niin sen voi tehdä stroke(R,G,B); komennolla.

Monikulmio

Kuinka piirretään viisikulmio, kuusikulmio jne.? Tämä ei onnistu yhdellä komennolla, vaan käytämme rakennetta, jossa monikulmio alkaa beginShape (); komennolla ja loppuu endShape(CLOSE); komennolla. Näiden kahden komennon väliin voidaan laittaa niin monta pistettä kuin haluamme. Pisteet asetetaan vertex(x,y) -komennoilla.

beginShape();
  vertex(x1,y1); 
  vertex(x2,y2);
  …
  vertex(xn,yn);
endShape(CLOSE);

Haluamme tehdä ohjelman, joka piirtää kuvan mukaisen viisikulmion.

Esimerkiksi yllä olevan kuvan mukainen punainen viisikulmio saadaan aikaiseksi seuraavalla koodilla.

Sanallinen algoritmi
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta kuvion täyttöväriksi punainen. Piirrä punainen monikulmio, jonka nurkkapisteet ovat (200,50), (350,100), (400,350), (250,150) ja (100,300).

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() { 
     size(450,450); // Ikkunan koko
     background(255); // Taustaväri valkoinen
     fill(255,0,0); // Täyttöväri punainen
}

void draw() {
     beginShape(); // Aloitetaan monikulmio
       vertex(200, 50);
       vertex(350, 100);
       vertex(400, 350);
       vertex(250, 150);
       vertex(100, 300);
     endShape(CLOSE); // Lopetetaan monikulmio
}

Voit tutkia kuvaajaa vaihtamalla x:n ja y:n paikkaa vertex(x,y)-komennossa. Mitä tapahtui? Miten koordinaatit pitäisi muuttaa, jos haluaisit saada aikaiseksi peilikuvan?