2.1 Suorakulmio ja ellipsi

Yhteenveto

Sanallinen algoritmi
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta reunaviivan paksuudeksi 5. Aseta täyttöväriksi syaani. Aseta reunaviivan väriksi musta. Piirrä 100 px leveä ja 200 px korkea suorakulmio paikkaan (50,50). Aseta täyttöväriksi magneta. Piirrä 250 px leveä ja 100 px korkea ellipsi paikkaan (300,100). Aseta täyttöväriksi sinivihreä. Laita asetus, joka poistaa reunaviivan. Piirrä 100 px leveä ja 100 px korkea ympyrä paikkaan (150,350). Aseta reunaviivan väriksi kastanjanruskea. Laita asetus, joka poistaa täytön. Piirrä 100 px leveä ja 100 px korkea neliö paikkaan (250,250).

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() {

     size(450,450); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     strokeWeight(5); // Reunaviivan paksuus 5

}



void draw() {

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

     stroke(0); // Reunaviivan väri musta

     rect(50,50,100,200); // Suorakulmio

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

     ellipse(300,100,250,100); // Ellipsi

     fill(0,128,128); // Täyttöväri sinivihreä

     noStroke(); // Ei reunaviivaa

     ellipse(150,350,100,100); // Ympyrä

     stroke(128,0,0); // Reunaviivan väri kastanjanruskea

     noFill(); // Ei täyttöä

     rect(250,250,100,100); // Neliö

}

Suorakulmio

Olemme jo käyneet läpi, kuinka piirretään piste ja viiva xy-koordinaatistoon. Lisätään vielä muutamia tavallisimpia piirtokomentoja, joita voimme käyttää ohjelmoinnissa. Aloitetaan suorakulmiosta.

KOMENTO	MERKITYS
rect(a,b,c,d);	Komento piirtää suorakulmion. Suorakulmion vasen yläpiste on (a,b) ja suorakulmion leveys on c ja suorakulmion korkeus on d.
a	a on desimaali- tai kokonaislukuarvo, joka kertoo suorakulmion vasemman yläpisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.
b	b on desimaali- tai kokonaislukuarvo, joka kertoo suorakulmion vasemman yläpisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.
c	c on desimaali- tai kokonaislukuarvo, joka kertoo suorakulmion leveyden pikseleinä.
d	d on desimaali- tai kokonaislukuarvo, joka kertoo suorakulmion korkeuden pikseleinä.

Esimerkiksi kuvan mukainen suorakulmio saadaan komennolla rect(150,100,150,250); Kun tästä tehdään ohjelma, niin se voisi olla seuraavanlainen. Ohjelma piirtää syaanin värisen suorakulmion valkealla taustalla.

Sanallinen algoritmi
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta kuvion täyttöväriksi syaani. Piirrä suorakulmio jonka vasemman yläreunan nurkkapiste on (150,100). Suorakulmion leveys on 150 px ja korkeus on 250 px.

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

void draw() {
     rect(150,100,150,250); // Piirtää suorakulmion
}

Tutki koodia kirjoittamalla rect-komento muotoon: rect(100,150,150,250); tai muotoon rect(150,100,250,150); Mitä tapahtui?

Huomio: rect-komentoon voidaan myös lisätä viides arvo. Viides arvo kertoo nurkan pyöristyksen suuruuden.

rect(100,100,200,200);

Ei pyöristystä

rect(100,100,200,200,50);

Pyöristyksen suuruus 50

rect(100,100,200,200,200);

Pyöristyksen suuruus 200

Ellipsi

Seuraavalla komennolla voidaan piirtää ellipsi tai ympyrä.

KOMENTO	MERKITYS
ellipse(a,b,c,d);	Komento piirtää ellipsin. Ellipsin keskipiste on (a,b) ja ellipsin leveys on c ja ellipsin korkeus on d. Jos c ja d ovat samoja, niin silloin piirretään ympyrä.
a	a on desimaali- tai kokonaislukuarvo, joka kertoo ellipsin keskipisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.
b	b on desimaali- tai kokonaislukuarvo, joka kertoo ellipsin keskipisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.
c	c on desimaali- tai kokonaislukuarvo, joka kertoo ellipsin leveyden pikseleinä.
d	d on desimaali- tai kokonaislukuarvo, joka kertoo ellipsin korkeuden pikseleinä.

Esimerkiksi kuvan mukainen ellipsi saadaan komennolla: ellipse(200,200,300,200);.
Kokonainen ohjelma, joka piirtää syaanin värisen ellipsin, on seuraava.

Sanallinen algoritmi
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta kuvion täyttöväriksi syaani. Piirrä ellipsi, jonka keskipiste on (200,200). Ellipsin leveys on 300 ja korkeus 200.

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

void draw() {
    ellipse(200,200,300,200); // Piirretään ellipsi
}

Tutki koodia muuttamalla ellipse-komento muotoon ellipse(200,200,200,300); Mitä tapahtui? Kuinka saisit aikaiseksi ympyrän? Kuinka saisit ympyrän siirrettyä ikkunan nurkkaan?

Kuvioiden värittäminen

Ohjelmoinnissa käytetään RGB-värejä. Värit luodaan kolmen päävärin sekoituksena. Päävärit ovat punainen (R = Red), vihreä (G = Green) ja sininen (B = Blue). Kukin väri voi saada arvoja luvusta 0 lukuun 255. Näitä kolmea pääväriä sekoittamalla voidaan muodostaa yhteensä 16 777 216 eri värisävyä. Alla olevissa taulukoissa on kuvattu tavallisimmat sävyt.

Päävärit

Muita tavallisimpia värejä

Tässä vielä yksi taulukko, josta näet värit (R,G,B) arvojen perusteella.

Ikkunan taustaväri asetetaan komennolla: background(R,G,B); ja kuvion täyttöväri asetetaan komennolla fill(R,G,B); Olemme käsitelleet nämä komennot jo edellisessä kappaleessa. Käydään vielä muutama värikomento lisää.

Päällä vai alla?

Jos piirrät kaksi kuviota ja haluat vaihtaa kuvioiden järjestyksen, kuinka se tehdään? Katsotaan seuraavaa esimerkkiä.

// Ohjelman tehnyt: e-Oppi Oy

// 29.1.2017

void setup() {

  size(450,450); // Ikkunan koko

  background(255,255,0); //Taustaväri

} 

void draw() {

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

  ellipse(200,200,200,200); // Piirrä ympyrä

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

  rect(200,200,200,200); // Piirrä neliö

}

// Ohjelman tehnyt: e-Oppi Oy

// 29.1.2017

void setup() {

  size(450,450); // Ikkunan koko

  background(255,255,0); //Taustaväri 

} 

void draw() {

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

  rect(200,200,200,200); // Piirrä neliö

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

  ellipse(200,200,200,200); // Piirrä ympyrä

}

Kuten huomasit, niin komennot suoritetaan järjestyksessä. Se piirtokomento, joka on tehty ensimmäisenä, tulee alimmaiseksi. Vastaavasti se piirtokomento, joka on tehty viimeiseksi, tulee päällimmäiseksi. Samoin väri pitää asettaa ennen piirtokomentoa, koska piirtäminen suoritetaan aina sen hetkisellä väriarvolla.

Sanallinen algoritmi ylläoleville ohjelmille olisi seuraava.

SANALLINEN ALGORITMI	SANALLINEN ALGORITMI
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi keltainen. Aseta täyttöväriksi vihreä Piirrä ympyrä, jonka keskipiste on kohdassa (200,200) ja halkaisija 200. Aseta täyttöväriksi punainen. Piirrä neliö, jonka vasemman yläreunan nurkkapiste on (200,200) ja sivun pituus 200.	Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi keltainen. Aseta täyttöväriksi punainen. Piirrä neliö, jonka vasemman yläreunan nurkkapiste on (200,200) ja sivun pituus 200. Aseta täyttöväriksi vihreä. Piirrä ympyrä, jonka keskipiste on kohdassa (200,200) ja halkaisija 200.

Reunaviivan paksuus ja väri

Komennolla: strokeWeight(koko); voidaan paksuntaa reunaviivaa. Laita sulkujen sisään kokonaislukuarvo, joka kuvaa reunaviivan paksuutta.

Komennolla: stroke(R,G,B); voidaan reunaviivalle asettaa haluttu väri. Väri muodostetaan kolmen päävärin sekoituksena. Alla on esimerkki näistä komennoista. Tehdään ohjelma, joka piirtää vihreän ympyrän ikkunan keskelle, jossa on magnetan värinen reunaviiva. Laitetaan ikkunan taustaväriksi keltainen.

Sanallinen algoritmi
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta ikkunan taustaväriksi keltainen. Aseta kuvion reunaviivan paksuudeksi 10 px. Aseta kuvion reunaviivan väriksi magneta. Aseta kuvion täyttöväriksi vihreä. Piirrä ympyrä, joka keskipiste on kohdassa (200,200) ja halkaisija 200.

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() { 
     size(400,400); // Ikkunan koko
     background(255,255,0); // Taustaväri keltainen
     strokeWeight(10); // Reunan paksuus 10
     stroke(255,0,255); // Reunan väri magneta
     fill(0,255,0); // Täyttöväri vihreä
}

void draw() {
     ellipse(200,200,200,200); // Piirtää ympyrän
}

Ohjelman suoritus näyttää tältä.

Ei reunaviivaa

Komennolla: noStroke(); voidaan piirrettävästä kuviosta poistaa reunaviiva. Laita tämä asetus, ennen piirtokomentoja. Alla on tästä esimerkki. Tehdään ohjelma, joka piirtää vihreän ympyrän ilman reunaviivaa.

Sanallinen algoritmi
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta ikkunan taustaväriksi keltainen. Laita asetus, joka piirtää kuvion ilman reunaviivaa. Aseta kuvion täyttöväriksi vihreä. Piirretään ympyrä, jonka keskipiste on kohdassa (200,200) ja halkaisija 200.

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() {
     size(400,400); // Ikkunan koko
     background(255,255,0); // Taustaväri keltainen
     noStroke(); // Poistetaan reunaviiva
     fill(0,255,0); // Täyttöväri vihreä
}
void draw() {
     ellipse(200,200,200,200); // Piirtää ympyrän ilman reunaviivaa
}

Ohjelman suoritus näyttää tältä.

Ei täyttöä

Komennolla: noFill(); voidaan piirrettävistä kuvioista poistaa täyttö. Alla on tästä esimerkki. Tehdään ohjelma, joka piirtää ympyrän ilman täyttöä. Ympyrään lisätään magnetan värinen reunaviiva.

Sanallinen algoritmi
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta reunaviivan paksuudeksi 10 px. Aseta reunaviivan väriksi magneta. Laita asetus, joka poistaa täytön kuviosta. Piirrä ympyrä, jonka keskipiste on paikassa (200,200) ja halkaisija 200.

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() { 
     size(450,450); // Ikkunan koko
     background(255,255,0); // Taustaväri keltainen
     strokeWeight(10); // Reunan paksuus 10
     stroke(255,0,255); // Reunan väri magneta
     noFill(); // Ei täyttöä
}

void draw() {
     ellipse(200,200,200,200); // Piirretään ympyrä ilman täyttöä
}

Ohjelman suoritus näyttää tältä.

Läpinäkyvyys

Kolmen päävärin lisäksi käytössä on ns. alfa-arvo, joka kuvastaa värin läpinäkyvyyttä. Voit lisätä koska tahansa fill - komentoon neljännen lukuarvon. Myös alfa-arvo voi saada arvoja luvusta 0 lukuun 255. 0 on täysin läpinäkyvä ja 255 on täysin peittävä. Alla on tästä esimerkki. Tehdään ohjelma, joka piirtää punaisen, sinisen ja vihreän ympyrän osittain päällekkäin, niin että niissä on läpinäkyvyyttä.

Sanallinen algoritmi
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta kuvion täyttöväriksi vihreä, jossa alfa-arvo on 100. Piirrä vihreä ympyrä paikkaan (150,150), jonka halkaisija on 200. Aseta kuvion täyttöväriksi punainen, jossa alfa-arvo on 100. Piirrä punainen ympyrä paikkaan (300,150), jonka halkaisija on 200. Aseta kuvion täyttöväriksi sininen, jossa alfa-arvo on 100. Piirrä sininen ympyrä paikkaan (255,275), jonka halkaisija on 200.

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() { 
     size(450,450); // Ikkunan koko
     background(255); // Taustaväri valkoinen
}
void draw() {
     fill(0,255,0,100); // Täyttöväri vihreä, Alfa-arvo 100
     ellipse(150,150,200,200);
     fill(255,0,0,100); // Täyttöväri punainen, Alfa-arvo 100
     ellipse(300,150,200,200);
     fill(0,0,255,100); // Täyttöväri sininen, Alfa-arvo 100
     ellipse(225,275,200,200);
}

Ohjelman suoritus näyttää tältä.