Info Draft Processing suomeksi

Toistaminen

Toistaminen voi ajaa joukon komentoja loputtomasti. Näin ei ole tarpeen kirjoittaa koodinpätkiä uudestaan.

Varoitus! Toistot eivät luo animaatioita oikeaan aikaan. Ne tehdään niin nopeasti kuin mahdollista. Kun tietokone lukee koodia ja löytää silmukan, se ajaa hakasulkujen sisällä olevan koodin niin monta kertaa kuin silmukka käsketään toistamaan.

Seuraavassa esimerkissä näemme kuusi horisontaalista mustaa viivaa. Ensimmäinen koodi sisältää kymmenen kertaa komennon line(), toinen koodi tehdään silmukkana. Molempien koodien tulos on sama. 

line(0, 0, 100, 0);
line(0, 10, 100, 10);
line(0, 20, 100, 20);
line(0, 30, 100, 30);
line(0, 40, 100, 40);
line(0, 50, 100, 50);
line(0, 60, 100, 60);
line(0, 70, 100, 70);
line(0, 80, 100, 80);
line(0, 90, 100, 90);

...tai yksinkertaisemmin: 

for (int i = 0; i < 100; i = i + 10) {
  line(0, i, 100, i);
}

For-silmukka

Tällainen silmukka toistaa joukon komentoja monta kertaa. Siihen kuuluu muuttuja, jonka arvoon lisätään yksi jokaisen silmukan toiston jälkeen. Silmukan sisäisen muuttujan nimenä käytetään usein kirjainta i. For-silmukan muuttuja tarvitsee alkunumeron, maksiminumeron ja lisäyksen. Esimerkiksi: for (int i = AlkuNumero i < MaksimiNumero i = i + LISÄYS) {}.

Alla oleva esimerkki näyttää valkoisia neliöitä vierekkäin. Jokainen on 10 pikseliä leveä. Niiden väli on 5 pikseliä. Laitamme ensimmäisen neliön kohtaan 0.0. Seuraava esitetään koordinaateissa 15.0, sitä seuraava koordinaatissa 30.0 ja niin edelleen. Silmukkamme lisää muuttujaan 15 pikseliä joka askeleella. Koska tahdomme täyttää koko piirrostilan, maksimiarvo on kuvan leveys (width). 

Screen_shot_2010_09_08_at_14.23.52

for (int i = 0; i < width; i = i + 15) {
  rect(i, 0, 10, 10);
}

Mittarit

Tähän asti olemme käyttäneet silmukoita niin, että silmukan sisäinen muuttuja on suoraan käytettävissä. Edellisessä esimerkissä se antaa meille heti jokaisen x-akselin arvon, johon neliö piirretään.

Silmukoita voidaan myös käyttää laskureina. Niille annettiin minimi- ja maksimimuuttuja, johon lisätään vain 1 jokaisella silmukan suorituskerralla: tämä laskee käskyjen suorituskerrat, joten käytetään käsitettä laskuri.

Tämä menetelmä vaatii enemmän matematiikkaa silmukan sisällä olevan muuttujan käyttöön. 

Boucle3 

for (int i = 0; i < 5; i = i + 1) {
  rect(i, 0, 10, 10);
}

Edellisessä esimerkissä näemme neliöiden olevan päällekkäin. Koska muuttujalla i on arvot 0-5 ja koska me käytämme muuttujaa i sijoittamaan ne avaruuteen, ne sijoitetaan kohtiin 0.0, 1.0, 2.0, 3.0 ja 4.0. Vain viimeinen näistä on kokonaan näkyvillä. Saadaksemme saman tuloksen kuin edellisessä esimerkissä voimme kertoa muuttujan. Tässä tapauksessa kerrotaan muuttuja arvolla 15, jolloin neliöiden väliin jää 5 pikseliä. Ne ovat tasaisesti 15 pikselin välein. Voimme sittne käyttää laskurin arvoa muihin operaatioihin. 

for (int i = 0; i < 5; i = i + 1) {
  rect(i * 15, 0, 10, 10);
}

Sisäkkäiset silmukat

Silmukat voidaan laittaa toistensa sisään. Tämä tekniikka antaa meidän siirtyä nopeasti kahteen visualisaatioon ja näkemään kolme ulottuvuutta. Kun silmukat ovat toistensa sisällä, meidän täytyy pitää huolta nimestä, joka annetaan jokaisen silmukan muuttujalle. Jos jokaisen muuttujan nimi on i, ohjelma yhdistää silmukat. Jokaisen silmukan jokaisella muuttujalla pitää olla kunnon nimi. Esimerkiksi: i, j, k, jne. Tai jos ne liittyvät ulottuvuuksiin: x, y ja z.

Silmukan alku

Boucle5 

translate(7, 7);

for (int x = 0; x < 6; x = x + 1) {
  rect(x * 15, 0, 10, 10);
}

Kaksi silmukkaa

Boucle6 

translate(7, 7);
 
// Ensimmäinen silmukka
for (int y = 0; y < 6; y = y + 1) {

  // Toinen silmukka
  for (int x = 0; x < 6; x = x + 1) {
    rect(x * 15, y * 15, 10, 10);
  }
}

Kolme silmukkaa

Tässä esimerkissä tutustumme kolmiulotteiseen avaruuteen. Laittaaksemme syvyysulottuvuuden neliöihimme, voimme käyttää metodia translate ().

 

size(100, 100, P3D);

translate(7, 7);

//Ensimmäinen silmukka
for (int z = 0; z < 6; z = z + 1) {
  translate(0, 0, z * -15); //Kohde akselilla z

  //Toinen silmukka
  for (int y = 0; y < 6; y = y + 1) {

    //Kolmas silmukka
    for (int x = 0; x < 6; x = x + 1) {
      rect(x * 15, y * 15, 10, 10);
    }
  }
}

Muunnelmat

Tässä on joukko muunnelmia, joissa käytetään metodeja fill (), scale () ja rotate (). Tässä voit nähdä muutokset silmukoiden sisällä. 

samples