Yhteenveto

Tehdään aluksi Scratch -ohjelma, joka piirtää 15 pistettä vaakaan ja 10 pistettä pystyyn eli yhteensä 150 pistettä. Pistetä ei kannata piirtää yksitellen, vaan käyttäen kahta sisäkkäistä toista x kertaa-lausetta. Tässä pisteen koko (kynän jälki) on 10 ja pisteet piirretään 10 yksikön välein. Pisteiden piirtäminen onnistuu helpoiten kahden sisäkkäisen toistolauseen avulla seuraavasti.

Kuinka sama ohjelma tehtäisiin P5.js-ohjelmalla käyttäen kahta for-silmukkaa?

function setup() {
  createCanvas(400, 400);
  strokeWeight(10);  // Pisteen (kynän) koko 10
  stroke(0,0,255);   // Pisteen (kynän) väri sininen
}

function draw() {
  background(255,255,0);        // Tyhjennä tausta ja väritä se keltaiseksi (Pyyhi kaikki)
  for (var a=0; a<15; a++) {    // a saa arvoja 0,1,2,3,4,...,14
    for (var b=0; b<10; b++) {  // b saa arvoja 0,1,2,3,4,...,9
      point(50+20*a,50+20*b);   // Piirrä piste paikkaan (50+20*a,50+20*b)
    }                           // Lopeta sisempi for-silmukka
  }                             // Lopeta ulompi for-silmukka
}

Ohjelman suoritus näyttää nyt tältä.

Katsotaan tarkemmin komentoa: point(50+20*a,50+20*b); Pisteet aloitetaan piirtämään kohdasta 50 px oikealle ja 50 px alas laskien ikkunan vasemmasta ylänurkasta. Pisteet piirretään 20 px välein. Koska x-koordinaattina on 20*a, missä a saa arvoja 0:sta 14:sta, niin ulomman silmukan avulla piirretään 15 vaakapistettä. Vastaavasti komento 20*b piirtää 10 pistettä alaspäin, koska b saa arvoja 0:sta 9:ään. Voit kokeilla muuttaa ehtoja a < 15; ja b < 10; niin silloin toistojen määrä muuttuu ja samalla myös silmukoiden määrä. Jos haluat piirtää pisteet harvempaan, niin kasvata lukuarvoa 20 laskukaavassa 20*a ja 20*b.