5.1 Kertausta

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.

Kuvio	Komento	Merkitys
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
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta reunaviivan paksuudeksi 5. Piirrä piste paikkaan (200, 50). Piirrä viiva pisteiden (250, 150) ja (350, 50) välille. Aseta täyttöväriksi vihreä. Piirrä vihreä suorakulmio, jonka nurkkapiste on (50, 200), leveys 100 ja korkeus 200. Aseta täyttöväriksi keltainen. 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
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta reunaviivan paksuudeksi 5. Aseta täyttöväriksi punainen. Piirrä punainen kolmio, jonka nurkkapisteet ovat (50, 150), (200, 100) ja (100, 50). Aseta täyttöväriksi vihreä. Piirrä vihreä nelikulmio, jonka nurkkapisteet ovat (250, 200), (350, 200), (400, 50), (300, 50). Aseta täyttöväriksi sininen. Piirrä sininen monikulmio, jonka nurkkapisteet ovat (50, 400), (200, 300), (100, 250), (150, 200), (50, 250). Aseta täyttöväriksi keltainen. 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
}

Muuttujat

Muuttuja on muistipaikka, johon ohjelman suorituksen aikainen tieto voidaan tallentaa. Ohjelman käyttämät muuttujat pitää esitellä ennen kuin niitä voi käyttää. Muuttujan esittelyn yhteydessä kerrotaan minkä tyyppistä tietoa muuttujaan voidaan tallentaa. Muuttujan esittelyssä on käytössä seuraavat määrittelyt.

Tietotyyppi	Määrittely	Muuttujan arvo
Kokonaisluku	int	27
Desimaaliluku	float	4.31
Merkkijono	String	"Jussi Juonio"
Merkki	char	'Ö'
Totuusarvo (true tai false)	boolean	false

Kun muuttuja on esitelty, niin muuttujalle voidaan tämän jälkeen tallentaa tietoa. Käytännössä voimme yhdistää muuttujan esittelyn ja sijoituksen seuraavasti.

Tietotyyppi Muuttujan nimi = Muuttujan arvo;

Määritellään muuttujat a,b,c,d ja e. Muuttujan arvo sijoitetaan eri tietotyypeillä seuraavasti.

Kokonaislukumuuttujalle sijoitetaan pelkkä kokonaisluku, esimerkiksi:
int a = 27:
Desimaalilukumuuttujalle sijoitetaan desimaaliluku pisteen avulla, esimerkiksi:
float b = 4.31;
Merkkijonomuuttujalle sijoitetaan teksti kirjoitettuna lainausmerkkien (" ") sisälle, esimerkiksi:
String c = "Jussi Juonio";
Merkkimuuttujalle sijoitetaan merkki kirjoitettuna heittomerkkien (' ') sisälle, esimerkiksi:
char d = 'Ö';
Totuusarvomuuttujalle sijoitetaan joko arvo true tai false, esimerkiksi:
boolean e = false;

Kun haluat tulostaa muuttujan arvon text("Teksti",x,y); - komennolla, niin tällöin älä lisää muuttujan ympärille lainausmerkkejä eli tulostuslause on tällöin muotoa: text(muuttuja,x,y);Tulostettavan tekstin ympärille lisätään lainausmerkit. Jos haluat tulostaa sekaisin tekstiä ja muuttujien saamia arvoja, niin muuttujat ja lainausmerkkien sisällä olevan tekstit erotetaan toisistaan plusmerkillä. Tehdään kokonainen ohjelma, jossa on muuttujien määrittely, sijoitus ja tulostus.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 250 px vaakaan ja 250 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta tekstin väriksi musta. Aseta tekstin kooksi 28. Määritellään kokonaislukumuuttuja a, joka saa arvon: 27. Määritellään desimaalilukumuuttuja b, joka saa arvon: 4.31. Määritellään merkkijonomuuttuja c, joka saa arvon: "Jussi Juonio". Määritellään merkkimuuttuja d, joka saa arvon: 'Ö'. Määritellään totuusarvomuuttuja e, joka saa arvon: false. Tulostetaan muuttujan a arvo paikkaan (10,40). Tulostetaan muuttujan b arvo paikkaan (10,80). Tulostetaan muuttujan c arvo paikkaan (10,120). Tulostetaan muuttujan d arvo paikkaan (10,160). Tulostetaan muuttujan e arvo paikkaan (10,200):

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

      size(250,250); // Ikkunan koko

      background(255); // Taustaväri valkoinen

      fill(0); // Täyttöväri eli tekstin väri musta

      textSize(28); // Tekstin koko 28

}

void draw () {

      int a = 27;  // Kokonaisluku 

      float b = 4.31;  // Desimaaliluku

      String c = "Jussi Juonio";  // Merkkijono

      char d = 'Ö';   // Merkki

      boolean e = false;  // Totuusarvo

      text("a = "+a,10,40);

      text("b = "+b,10,80);

      text("c = "+c,10,120);

      text("d = "+d,10,160);

      text("e = "+e,10,200);
}

Ohjelman tulostus on seuraavanlainen.

Tässä muuttujien niminä oli kirjaimet: a,b,c,d ja e. Muuttujien nimeämisessä on voimassa seuraavat säännöt.

Nimi alkaa kirjaimella, alaviivalla tai dollarimerkillä.
Seuraava merkki saa edellisten lisäksi olla myös numero.
Kirjainten koolla on merkitystä (esimerkiksi: Piiri ja piiri on eri asia).
Nimi ei saa olla ohjelmointikielen varattu sana eli komento.
Nimellä ei ole pituusrajoitusta.
Nimen on oltava ainutkertainen.

Laskutoimitukset

Palautetaan mieliin peruslaskutoimitukset:

Laskutoimitus	Komento	Ohjelmointi	Matematiikka
Yhteenlasku	+	7 + 4	7 + 4
Vähennyslasku	-	7 - 4	7 – 4
Kertolasku	*	7*4	7·4
Jakolasku	/	7/4	7:4
Potenssi aⁿ	pow(a,n)	pow(7,4)	7⁴

Voimme tehdä laskutoimitukset, joko lukujen kesken tai muuttujien kesken. Katsotaan esimerkin avulla näiden ero. Tehdään ensin ohjelma ilman muuttujia eli suoritetaan kaikki laskutoimitukset suoraan tekstin-tulostus lauseessa. Ohjelma, joka tekee taulukon mukaiset laskutoimitukset, näyttää tältä.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 450 px vaakaan ja 300 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta tekstin kooksi 30. Aseta tekstin väriksi musta. Tulosta: "7 + 4 =" ja laske laskutoimituksen vastaus paikkaan (10,50). Tulosta: "7 - 4 =" ja laske laskutoimituksen vastaus paikkaan (10,100). Tulosta: "7 ∙ 4 =" ja laske laskutoimituksen vastaus paikkaan (10,150). Tulosta: "7 : 4 =" ja laske laskutoimituksen vastaus paikkaan (10,200). Tulosta: "7⁴ =" ja laske laskutoimituksen vastaus paikkaan (10,250).

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017

void setup() {

     size(450,300); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     textSize(30); // Tekstin koko 30

     fill(0); // Aseta tekstin väriksi musta

}



void draw() {

     text("7 + 4 = "+(7+4),10,50); 

     text("7 - 4 = "+(7-4),10,100); 

     text("7 \u00B7 4 = "+(7*4),10,150); 

     text("7 : 4 = "+(7.0/4.0),10,200);

     text("7\u2074 ="+round(pow(7,4)),10,250);
}

Kun ajat ohjelman, niin lopputulos näyttää tältä.

Huomaa, että kertomerkki (\u00B7) ja neljäs-potenssi (\u2074) on tulostettu unicode-merkkinä. Tehdään sama ohjelma, muuttujien avulla.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 450 px vaakaan ja 300 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta tekstin kooksi 30. Aseta tekstin väriksi musta. Määrittele kokonaislukumuuttuja luku1 ja anna sille arvo: 7. Määrittele kokonaislukumuuttuja luku2 ja anna sille arvo: 4. Määrittele desimaalilukumuuttuja luku3 ja anna sille arvo 7.0. Määrittele desimaalilukumuuttuja luku4 ja anna sille arvo 4.0. Määrittele kokonaislukumuuttuja summa ja sijoita siihen muuttujien luku1 ja luku2 summa. Määrittele kokonaislukumuuttuja erotus ja sijoita siihen muuttujien luku1 ja luku2 erotus. Määrittele kokonaislukumuuttuja tulo ja sijoita siihen muuttujien luku1 ja luku2 tulo. Määrittele desimaalilukumuuttuja osamaara ja sijoita siihen muuttujien luku3 ja luku4 osamäärä. Määrittele kokonaislukumuuttuja potenssi ja sijoita siihen laskutoimitus muuttuja1 potenssiin muuttuja2. Tulosta muuttujien avulla lauseke: luku1+ luku2 = summa, paikkaan (10,50). Tulosta muuttujien avulla lauseke: luku1 - luku2 = erotus, paikkaan (10,100). Tulosta muuttujien avulla lauseke: luku1∙luku2 = tulo, paikkaan (10,150). Tulosta muuttujien avulla lauseke: luku1 : luku2 = osamaara, paikkaan (10,200). Tulosta muuttujien avulla lauseke: luku1⁴ = potenssi, paikkaan (10,250).

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017

void setup() {

     size(450,300); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     textSize(30); // Tekstin koko 30

     fill(0); // Aseta tekstin väriksi musta

}

void draw() {

     // Anna alkuarvot

     int luku1 = 7;

     int luku2 = 4;

     float luku3 = 7.0;

     float luku4 = 4.0;

 

     // Tee laskutoimitukset

     int summa = luku1+luku2;

     int erotus = luku1-luku2;

     int tulo = luku1*luku2;

     float osamaara = luku3/luku4;

     int potenssi = round(pow(luku1,luku2));



     // Tulosta vastaukset

     text(luku1+" + "+luku2+" = "+summa,10,50); 

     text(luku1+" - "+luku2+" = "+erotus,10,100); 

     text(luku1+" \u00B7 "+luku2+" = "+tulo,10,150); 

     text(luku1+" : "+luku2+" = "+osamaara,10,200);

     text(luku1+"\u2074 ="+potenssi,10,250);
}

Tulostuskomennot

Erikoisemmat merkit tehdään unicode-merkkeinä. Näitä ovat esimerkiksi astemerkki, kertomerkki ja potenssimerkit. Taulukossa on esitetty tavallisimmat tulostuskomennot.

Tulostuskomennot
Merkki	Tulostuskoodi	Merkki	Tulostuskoodi	Merkki	Tulostuskoodi
®	\u00AE	¼	\u00BC	⁰	\u2070
©	\u00A9	½	\u00BD	¹	\u00B9
°	\u00B0	¾	\u00BE	²	\u00B2
±	\u00B1	α	\u03B1	³	\u00B3
€	\u00AC	β	\u03B2	⁴	\u2074
√	\u221A	γ	\u03B3	⁵	\u2075
·	\u00B7	π	\u03C0	⁶	\u2076
‰	\u2030	Δ	\u0394	⁷	\u2077
∞	\u221E	μ	\u03BC	⁸	\u2078
∑	\u2211	≤	\u2264	⁹	\u2079
→	\u2192	≥	\u2265	ⁿ	\u207F
≈	\u2248	≠	\u2260	↔	\u2194

Esimerkki: Prosenttiosuuden laskeminen

Olkoon luokassa tyttöjä 15 ja poikia 12. Tee ohjelma, joka selvittää tyttöjen ja poikien prosenttiosuuden.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta tekstin kooksi 24. Aseta tekstin väriksi musta. Määrittele desimaalilukumuuttuja tytot ja anna sille arvo 15. Määrittele desimaalilukumuuttuja pojat ja anna sille arvo 12. Määrittele desimaalilukumuuttuja summa ja sijoita siihen muuttujien tytot ja pojat summa. Määrittele desimaalilukumuuttuja tytotpros ja sijoita siihen tyttöjen prosenttiosuus, jonka saat laskukaavasta: 100∙(tytot:summa). Määrittele desimaalilukumuuttuja pojatpros ja sijoita siihen poikien prosenttiosuus, jonka saat laskukaavasta: 100∙(pojat:summa). Tulosta oppilaiden lukumäärä (summa) paikkaan (10,50). Tulosta tyttöjen lukumäärä (tytot) ja prosenttiosuus (tytotpros) paikkaan (10,100). Tulosta poikien lukumäärä (pojat) ja prosenttiosuus (pojatpros) paikkaan (10,150).

// Ohjelman tehnyt e-Oppi Oy

// 30.8.2017

void setup () {

     size(450,250); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     textSize(24); // Tekstin koko

     fill(0); // Tekstin väri musta

}

void draw () {

     // Anna alkuarvot

     float tytot = 15.0;

     float pojat = 12.0;

 

     // Laske

     float summa = tytot+pojat;

     float tytotpros = 100*(tytot/summa);

     float pojatpros = 100*(pojat/summa);



     // Tulosta

     text("Luokassa on "+round(summa)+" oppilasta",10,50);

     text("Tyttöjä on "+round(tytot)+" = "+round(tytotpros)+" %",10,100);

     text("Poikia on "+round(pojat)+" = "+round(pojatpros)+" %",10,150);

}

Ohjelma tulostaa seuraavaa.

If-lause

If-lause on valintalause, jonka voisi suomentaa jos-lauseeksi. If sanan jälkeen tulee ehto sulkuihin kirjoitettuna. Jos ehto on totta, niin siinä tapauksessa suoritetaan kaarisulkeiden sisällä olevat komennot. Mikäli ehto ei ole totta, niin silloin ei tehdä mitään. If-lause on muotoa.

if (ehto) {

     komennot;
}

Toinen vaihtoehto on jatkaa If-lausetta else-määreellä. Else-määreen jälkeiset komennot suoritetaan siinä tapauksessa, että ehto ei ole voimassa. If-lause pidemmässä muodossa on seuraavanlainen.

if (ehto) {

     komennot A;

} else {

     komennot B;
}

Esimerkki: Kumpi luku on suurempi

Tehdään ohjelma, joka tutkii, kumpi annetuista luvuista on suurempi. Lukujen arvo on sijoitettu muuttujille luku1 ja luku2. Koska meillä valittavana on kolme vaihtoehtoa: luku1 on suurempi kuin luku2, luku2 on suurempi kuin luku1 tai luvut ovat yhtä suuret, niin ketjutamme nämä kolme ehtoa yhteen seuraavasti.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 600 px vaakaan ja 150 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta tekstin koko arvoon 24. Aseta tekstin väri mustaksi. Määrittele kokonaislukumuuttuja luku1 ja anna sille arvo: -5. Määrittele desimaalilukumuuttuja luku2 ja anna sille arvo: -6. Jos luku1 on suurempi kuin luku2, niin tulosta: "Luku1 on suurempi kuin luku2" paikkaan (10,50). Muuten, jos luku1 on pienempi kuin luku2, niin tulosta: "Luku2 on suurempi kuin luku1" paikkaan (10,50). Muuten (jos luvut yhtä suuret), niin tulosta: "Luku1 on yhtä suuri kuin luku2" paikkaan (10,50).

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017

void setup () {

     size(600,150); // Ikkunan koko

     background(255); // Taustaväri valkoinen 

     textSize(24); // Tekstin koko

     fill(0); // Tekstin väri musta

}

void draw () {

     int luku1 = -5;

     int luku2 = -6;

     if (luku1 > luku2) {  // Jos luku1 on suurempi kuin luku2

         text("Luku "+luku1+" on suurempi kuin luku "+luku2,10,50);

     } else if (luku1 < luku2) {  // Jos luku2 on suurempi luku1

         text("Luku "+luku2+" on suurempi kuin luku "+luku1,10,50);

     } else { // muutoin (jos luvut yhtäsuuret)

         text("Luku "+luku1+" on yhtä suuri kuin luku "+luku2,10,50);

     }

}

Ohjelma tulostaa nyt seuraavaa.

Esimerkki: Sektoridiagrammi

Olkoon luokassa tyttöjä 15 ja poikia 12. Tee ohjelma, joka piirtää prosenttiosuudesta diagrammin.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta tekstin kooksi 255. Aseta tekstin väriksi musta. Määrittele desimaalilukumuuttuja tytot ja anna sille arvo 15. Määrittele desimaalilukumuuttuja pojat ja anna sille arvo 12. Määrittele desimaalilukumuuttuja summa ja sijoita siihen muuttujien tytot ja pojat summa. Määrittele desimaalilukumuuttuja tytotpros ja sijoita siihen tyttöjen prosenttiosuus, jonka saat laskukaavasta: 100∙(tytot:summa). Määrittele desimaalilukumuuttuja pojatpros ja sijoita siihen poikien prosenttiosuus, jonka saat laskukaavasta: 100∙(pojat:summa). Määrittele desimaalilukumuuttuja tytotkulma ja sijoita siihen tyttöjen prosenttiosuutta vastaava kulman suuruus, jonka saat laskukaavasta: 360∙(tytot:summa). Määrittele desimaalilukumuuttuja pojatkulma ja sijoita siihen poikien prosenttiosuutta vastaava kulman suuruus, jonka saat laskukaavasta: 360∙(pojat:summa). Aseta täyttöväriksi magneta. Piirrä tyttöjen prosenttiosuutta kuvaava sektori, joka keskipiste on pisteessä (200,200), leveys ja korkeus on 300. Sektorin aloituskulma on nolla ja lopetuskulma on muuttujan tytotkulma arvo. Piirrä poikien prosenttiosuutta kuvaava sektori, joka keskipiste on pisteessä (200,200), leveys ja korkeus on 300. Sektorin aloituskulma on muuttujan tytotkulma arvo ja lopetuskulma on muuttujan pojatkulma arvo lisättynä muuttujan tytotkulma arvoon. Aseta tekstin väriksi musta. Tulosta tyttöjen prosenttiosuuden arvo paikkaan (150,280), jonka saat selville muuttujasta tytotpros. Tulosta poikein prosenttiosuuden arvo paikkaan (150,140), jonka saat selville muuttujasta pojatpros.

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017

void setup () {

     size(400,400); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     textSize(24); // Tekstin koko

     fill(0); // Tekstin väri musta

}

void draw () {

     // Anna alkuarvot

     float tytot = 15.0; // Muuta tämä arvo

     float pojat = 12.0; // Muuta tämä arvo

 

    // Laske

    float summa = tytot+pojat;

    float tytotpros = 100*(tytot/summa); // Laske prosentit

    float pojatpros = 100*(pojat/summa);

    float tytotkulma = 360*(tytot/summa); // Laske kulmat

    float pojatkulma = 360*(pojat/summa);



    // Piirrä

    fill(255,0,255); // Magneta

    arc(200,200,300,300,radians(0),radians(tytotkulma),PIE);

    fill(0,255,255); // Syaani

    arc(200,200,300,300,radians(tytotkulma),radians(tytotkulma+pojatkulma),PIE);

    // Tulosta tekstit

    fill(0); // Musta tekstin väri

    text("Tytöt "+round(tytotpros)+" %",150,280);

    text("Pojat "+round(pojatpros)+" %",150,140);

}

Esimerkki: Pylväsdiagrammi (extra)

Tehdään ohjelma, joka laskee kuinka monta prosenttia 50 on 400:sta. Piirretään ilmiötä havainnollistava pylväsdiagrammi. Ohjelma on seuraavanlainen.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 520 px vaakaan ja 520 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta tekstin kooksi 28. Aseta viivan paksuudeksi 5. Määrittele desimaalilukumuuttuja a ja anna sille arvo 50. a on pylvään korkeus. Määrittele desimaalilukumuuttuja b ja anna sille arvo 400. b on pylvään maksimi koko. Määrittele desimaalilukumuuttuja c ja anna sille arvo, joka saadaan laskukaavasta: (a:b)∙100. Lasketaan montako prosenttia a on b:stä. Asetetaan tekstin väriksi musta. Tulostetaan muuttujan a arvo paikkaan (10,30). a on osoittaja. Piirretään jakolaskun poikkiviiva pisteiden (10,35) ja (60,35) välille. Tulostetaan muuttujan b arvo paikkaan (10,60). b on nimittäjä. Tulostetaan muuttujan c arvo paikkaan (60,42). c on laskettu prosenttiosuus. Tulostetaan teksti: "100%" paikkaan (250,500-b) eli mitä pidempi on keltainen pylväs (=b), niin sitä korkeammalle teksti tulostuu. Tulostetaan muuttujan c arvo eli prosenttiosuus paikkaan (250,520-a) eli mitä pidempi on punainen pylväs (=a), niin sitä korkeammalle teksti tulostuu. Tulostetaan muuttujan b arvo paikkaan (420,500-b) eli mitä pidempi on keltainen pylväs (=b), niin sitä korkeammalle teksti tulostuu. Tulostetaan muuttujan a arvo paikkaan (420,520-a) eli mitä pidempi on punainen pylväs (=a), niin sitä korkeammalle teksti tulostuu. Aseta keltainen väri. Piirrä keltainen suorakulmio, jonka nurkkapiste on (350,500), leveys on 50 ja korkeus on -b eli lähtee alareunasta ylöspäin muuttujan b verran. Aseta punainen väri. Piirrä punainen suorakulmio, jonka nurkkapiste on (350,500), leveys on 50 ja korkeus on -a eli lähtee alareunasta ylöspäin muuttujan a verran.

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017

void setup () {

     size(520,520); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     textSize(28); // Tekstin koko 28

     strokeWeight(5); // Viivan paksuus 5

}

void draw () {

     // Anna alkuarvot

     float a = 50;  // Muuta tämä arvo

     float b = 400; // Pylvään maksimiarvo

     

     // Laske

     float c = ((a/b)*100);

     

     // Tulosta prosenttilasku

     fill(0); // Musta tekstin väri

     text(round(a),10,30);

     line(10,35,60,35);

     text(round(b),10,60);

     text(" = "+round(c)+" %",60,42);

     

     // Tulosta pylvään tekstit

     text("100%",250,500-b); // Keltaisen pylvään % osuus

     text(round(c)+" %",250,520-a); // Punaisen pylvään % osuus

     text(round(b),420,500-b); // Keltaisen pylvään lukuarvo

     text(round(a),420,520-a); // Punaisen pylvään lukuarvo

     

     // Piirrä

     fill(255,255,0); // Keltainen

     rect(350,500,50,-b);  

     fill(255,0,0);  // Punainen

     rect(350,500,50,-a);

}

Lukuarvon skaalaaminen map( )-funktiolla (Extra).

Palataan vielä edelliseen esimerkkiin. Entä jos haluamme laskea ja piirtää pylvään myös tapauksessa, että lukuarvo on suurempi kuin ikkunan koko. Esimerkiksi jo haluamme laskea, että kuinka monta prosenttia 5000 on 40000:sta. Haluamme, että tulostus näyttäisi tältä.

Keltaisen pylvään korkeus on kuvassa 400, mutta sen saama lukuarvo on 40000. Kuinka 4000 muutetaan 400:ksi. Vastaavasti kuinka 5000 muutetaan 50:ksi. Se onnistuu parhaiten map() funktiolla, joka on seuraava.

map(syöte,min1,max1,min2,max2);	Komento skaalaa syötteen, joka on asteikolla [min1,max1] asteikolle [min2,max2]. Vastauksena palautetaan syötteelle uusi arvo eli tuloste.
syöte	Laita tähän luku, jonka haluat skaalata.
min1	Asteikon pienin arvo, jonka syöte voi saada.
max1	Asteikon suurin arvo, jonka syöte voi saada.
min2	Asteikon pienin arvo, jonka tuloste voi saada.
max2	Asteikon suurin arvo, jonka tuloste voi saada.

Esimerkiksi jos laitamme map( )-funktioon arvot map(40000,0,40000,0,400), niin saamme vastaukseksi 400. Eli jos syöte on 40 000 asteikolla [0, 40 000], niin tuloste on 400 asteikolla [0, 400]. Vastaavasti jos laitamme map( )-funktioon arvot map(5000,0,40000,0,400), niin saamme vastaukseksi 50. Eli jos syöte on 5 000 asteikolla [0, 40 000], niin tuloste on 50 asteikolla [0, 400].

Nyt voimme kirjoittaa edellisen tehtävän koodin uudestaan käyttäen map( )-funktiota. Voit käytännössä laittaa a:lle ja b:lle, minkä tahansa arvon ja pylväs skaalautuu aina asteikolle [0, 400] eli keltaisen pylvään korkeus on aina 400.

SANALLINEN ALGORITMI
Aseta ikkunan kooksi 520 px vaakaan ja 520 px pystyyn. Aseta ikkunan taustaväriksi valkoinen. Aseta tekstin kooksi 28. Aseta viivan paksuudeksi 5. Määrittele desimaalilukumuuttuja a ja anna sille arvo 5 000. a on pylvään korkeus. Määrittele desimaalilukumuuttuja b ja anna sille arvo 40 000. b on pylvään maksimi koko. Määrittele desimaalilukumuuttuja c ja anna sille arvo, joka saadaan laskukaavasta: (a : b) ∙ 100. Lasketaan montako prosenttia a on b:stä. Skaalaa muuttujan a arvo asteikolta [0, b] asteikolle [0, 400]. Sijoita skaalattu a:n arvo desimaalilukumuuttujalla a2. Skaalaa muuttujan b arvo asteikolta [0, b] asteikolle [0, 400]. Sijoita skaalattu v:n arvo desimaalilukumuuttujalle b2. Asetetaan tekstin väriksi musta. Tulostetaan muuttujan a arvo paikkaan (10, 30). A on osoittaja. Piirretään jakolaskun poikkiviiva pisteiden (10, 35) ja (90, 35) välille. Tulostetaan muuttujan b arvo paikkaan (10, 60). B on nimittäjä. Tulostetaan muuttujan c arvo paikkaan (100, 42). C on laskettu prosenttiosuus. Tulostetaan teksti: "100%" paikkaan (250, 500 - b2) eli mitä pidempi on keltainen pylväs (= b2), sitä korkeammalle teksti tulostuu. Tulostetaan muuttujan c arvo eli prosenttiosuus paikkaan (250, 520 - a2) eli mitä pidempi on punainen pylväs (=a2), niin sitä korkeammalle teksti tulostuu. Tulostetaan muuttujan b arvo paikkaan (420, 500 - b2) eli mitä pidempi on keltainen pylväs (= b2), niin sitä korkeammalle teksti tulostuu. Tulostetaan muuttujan a arvo paikkaan (420, 520 - a2) eli mitä pidempi on punainen pylväs (= a2), niin sitä korkeammalle teksti tulostuu. Aseta keltainen väri. Piirrä keltainen suorakulmio, jonka nurkkapiste on (350, 500), leveys on 50 ja korkeus on -b2 eli lähtee alareunasta ylöspäin muuttujan b2 verran. Aseta punainen väri. Piirrä punainen suorakulmio, jonka nurkkapiste on (350, 500), leveys on 50 ja korkeus on -a2 eli lähtee alareunasta ylöspäin muuttujan a2 verran.

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017

void setup () {

     size(520,520);  // Ikkunan koko

     background(255);  // Taustaväri valkoinen

     textSize(28);  // Tekstin koko 28

     strokeWeight(5);  // Viivan paksuus 5

}

void draw () {

     float a = 5000; // Muuta tänne mikä tahansa arvo

     float b = 40000; // Muuta tänne mikä tahansa arvo

     float c = ((a/b)*100); // Montako prosenttia a on b:stä.

     float a2 = map(a,0,b,0,400); // Skaalaa a:n arvo asteikolle [0, 400]

     float b2 = map(b,0,b,0,400); // Skaalaa b:n arvo asteikolle [0, 400]

     fill(0);  // Musta tekstin väri

     text(round(a),10,30);  // Tulosta a

     line(10,35,90,35);  // Poikkiviiva

     text(round(b),10,60); // Tulosta b

     text(" = "+round(c)+" %",100,42);  // Tulosta c eli prosenttiosuus

     text("100%",250,500-b2);  // Tulosta 100%

     text(round(c)+" %",250,520-a2); // Tulosta c palkin viereen

     text(round(b),420,500-b2);  // Tulosta b palkin viereen

     text(round(a),420,520-a2);  // Tulosta a palkin vireen

     fill(255,255,0);  // Keltainen

     rect(350,500,50,-b2); // Keltainen palkki

     fill(255,0,0);  // Punainen

     rect(350,500,50,-a2);  // Punainen palkki

}