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
  1. Aseta ikkunan kooksi 520 px vaakaan ja 520 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Aseta tekstin kooksi 28.
  4. Aseta viivan paksuudeksi 5.
  5. Määrittele desimaalilukumuuttuja a ja anna sille arvo 5 000. a on pylvään korkeus.
  6. Määrittele desimaalilukumuuttuja b ja anna sille arvo 40 000. b on pylvään maksimi koko.
  7. Määrittele desimaalilukumuuttuja c ja anna sille arvo, joka saadaan laskukaavasta: (a : b) ∙ 100. Lasketaan montako prosenttia a on b:stä.
  8. Skaalaa muuttujan a arvo asteikolta [0, b] asteikolle [0, 400]. Sijoita skaalattu a:n arvo desimaalilukumuuttujalla a2.
  9. Skaalaa muuttujan b arvo asteikolta [0, b] asteikolle [0, 400]. Sijoita skaalattu v:n arvo desimaalilukumuuttujalle b2.
  10. Asetetaan tekstin väriksi musta.
  11. Tulostetaan muuttujan a arvo paikkaan (10, 30). A on osoittaja.
  12. Piirretään jakolaskun poikkiviiva pisteiden (10, 35) ja (90, 35) välille.
  13. Tulostetaan muuttujan b arvo paikkaan (10, 60). B on nimittäjä.
  14. Tulostetaan muuttujan c arvo paikkaan (100, 42). C on laskettu prosenttiosuus.
  15. Tulostetaan teksti: "100%" paikkaan (250, 500 - b2) eli mitä pidempi on keltainen pylväs (= b2), sitä korkeammalle teksti tulostuu.
  16. Tulostetaan muuttujan c arvo eli prosenttiosuus paikkaan (250, 520 - a2) eli mitä pidempi on punainen pylväs (=a2), niin sitä korkeammalle teksti tulostuu.
  17. Tulostetaan muuttujan b arvo paikkaan (420, 500 - b2) eli mitä pidempi on keltainen pylväs (= b2), niin sitä korkeammalle teksti tulostuu.
  18. Tulostetaan muuttujan a arvo paikkaan (420, 520 - a2) eli mitä pidempi on punainen pylväs (= a2), niin sitä korkeammalle teksti tulostuu.
  19. Aseta keltainen väri.
  20. 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.
  21. Aseta punainen väri.
  22. 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

}