For-silmukka

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ä.

Tunnistaudu

Etkö ole vielä jäsen?