Kun haluamme tehdä tietty täsmällinen määrä toistoja, niin silloin käytetään for-silmukkaa. For-silmukan rakenne on seuraava:
for (alkuarvo; ehto; laskuri) { toistettavat lauseet; }
Kohdassa alkuarvo määrittelemme muuttujan ja annamme sille alkuarvon. Kohdassa ehto kerromme ehdon jolloin silmukkaa toistetaan ja lopuksi lisäämme laskurin, jolla kohdassa alkuarvo määriteltyä muuttujaa kasvatamme tai vähennämme . Kun muuttujan arvo on tarpeeksi suuri (tai pieni), niin ehto ei enää ole voimassa ja toisto lopetetaan.
Jos esimerkiksi haluamme silmukan, jossa on 10 toistoa niin kirjoitamme for-silmukan muotoon.
for (var a = 0; a < 10; a++) { toistettavat lauseet; } |
Eli aluksi määrittelemme muuttujan a ja annamme sille alkuarvon 0. Silmukkaa toistetaan niin kauan kun ehto a on pienempi kuin 10 on voimassa. Kun nyt kasvatamme muuttujan a arvoa aina yhdellä laskurin a++ avulla, niin käytännössä a saa arvoja: 0, 1, 2, 3, 4, 5, 6, 7, 8 ja 9. Kun a saa arvon 10, niin ehto a<10 ei enää ole voimassa ja silmukan toisto lopetetaan.
Tehdään tästä silmukasta kokonainen ohjelma. Ohjelma piirtää 10 kappaletta pieniä neliöitä. Tehdään ohjelmaan vielä toinen silmukka, jossa on ehto: b on pienempi kuin max. Koska muuttujan max arvo luetaan liukupalkista, joka voi saada arvoja 1:stä 25:een, niin ohjelma piirtää niin monta ympyrää kuin on max-muuttujan arvo.
var mSlider; // Määritellään muuttuja mSlider function setup() { createCanvas(600, 300); // Ikkunan koko 600 x 300 mSlider = createSlider(1, 25, 10); // Määritellään liukupalkki mSlider mSlider.position(10, 20); // Liukupalkin paikka 10 oikealle ja 20 alas } function draw() { background(0,200,100); // Tyhjennä tausta ja väritä se vihreäksi var max = mSlider.value(); // Määritellään muuttuja max ja sijoitetaan siihen liukupalkin arvo for (var a= 0; a < 10; a++) { // Silmukka, jossa a = 0,1,2,3,4,5,6,7,8,9 rect(20+a*20,100,10,20); // Piirrä suorakulmioita siten, että vaakasuuntainen paikka on 20 px välein } // 1. silmukan lopetusmerkki for (var b= 0; b < max; b++) { // Silmukka, jossa b = 0,1,2,3,...,(max-1) ellipse(20+b*20,200,15,15); // Piirrä ympyröitä max kappaletta 20 px välein vaakasuunnassa } // 2. silmukan lopetusmerkki } |
Kun ajat ohjelman, niin se näyttää tältä.
Sini-kuvaaja for-silmukan avulla
For-silmukan avulla voimme myös tehdä sini-kuvaajan. Tehdään ohjelma, joka piirtää sini-kuvaajan, niin että voimme liukupalkeilla säätää kuvajan amplitudia ja taajuutta. Tehdään for-silmukka, joka käy kaikki pisteet x-akselilla läpi eli x:n arvot kasvavat lineaarisesti vaakasuunnassa. Y-koordinaatin arvot saadaan laskettua laskukaavalla y = koko*sin(radians(taajuus*a)), missä a tarkoittaa kulman arvoa välillä 0…600. Koko tarkoittaa sini-funktion amplitudia, joka voi vaihdella -250:stä 250:een liukupalkin avulla. Vastaavasti taajuus kertoo kuinka monta värähdystä mahtuu yhteen 360 px pituiseen jaksoon. Kun ikkunan leveys on 600 px, niin laitamme for-silmukkaan myös 600 toistoa. Käytännössä sini-funktio koostuu lasketuista pisteistä (x,height/2+y), missä height/2 on ikkunan puoliväli pystysuunnassa. Näistä pisteistä muodostuu kuvio, kun sijoitamme nämä pisteet monikulmio komentoon. Ohjelma, joka piirtää sini-kuvaajan on seuraava.
var kokoSlider; // Määritellään muuttuja kokoSlider var taajuusSlider; // Määritellään muuttuja taajuusSlider function setup() { createCanvas(600, 600); // Ikkunan koko kokoSlider = createSlider(0, 250, 100); // Luodaan liukupalkki kokoSlider.position(10, 20); // Liukupalkin paikka 10 px vaakaan ja 20 px alas taajuusSlider = createSlider(1, 20, 2); // Luodaan toinen liukupalkki taajuusSlider.position(310, 20); // Liukupalkin paikka on 310 px vaakaan ja 20 px alas } function draw() { background(100,100,220); // Tyhjennä tausta ja väritä se siniseksi var koko = kokoSlider.value(); // Määritellään muuttuja koko ja sijoitetaan siihen liukupalkin arvo var taajuus = taajuusSlider.value(); // Määritellään muuttuja taajuus ja sijoitetaan siihen liukupalkin arvo fill(255,0,255); // Täyttöväri magneta beginShape(); // Aloita monikulmio vertex(0,600); // Monikulmion ensimmäinen piste on paikassa (0,600) for (var a = 0; a <= 600; a++) { // Tehdään for silmukka, missä a = 1,2,3,...,600 var y = koko*sin(radians(taajuus*a)); // Lasketaan y-koordinaatin muutos vertex(a,height/2+y); // Piste sini-funktiolta } // Lopeta for-silmukka vertex(600,600); // Monikulmion viimeinen piste on paikassa (600,600) endShape(CLOSE); // Lopeta monikulmio } |
Kun ajat ohjelman, niin se näyttää tältä.