Ensimmäisessä esimerkissä piirrettiin 10 pientä suorakulmiota. Entä jos haluaisimme piirtää 20 neliötä vaakaan ja 25 neliötä pystyyn eli yhteensä 20*25 = 500 neliötä, kuinka se onnistuisi? Tarvitsemme nyt kaksi sisäkkäistä for-silmukkaa. Entä jos haluaisimme vielä liikutella 500 neliötä hiiren avulla? Liikuttelu onnistuu helposti translate(x,y); funktion avulla. Katsotaan esimerkkiä.
function setup() {
createCanvas(600, 600); // Ikkunan koko 600 x 600
}
function draw() {
background(0,200,100); // Taustaväri vihreä
push(); // Koordinaatisto muistiin
translate(mouseX-300,mouseY-300); // Siirrä koordinaatistoa
for (var a= 0; a < 20; a++) { // For silmukka, jossa a = 0,1,2,3,4,...,19
for (var b = 0; b < 25; b++) { // For silmukka, jossa b = 0,1,2,3,4,...,24
rect(a*20,b*20,10,10); // Piirrä 10x10 neliö paikkaan (a*20,b*20)
} // Lopeta For-silmukka b
} // Lopeta For-silmukka a
pop(); // Palauta koordinaatisto muistista
}
|
Kun ajat ohjelman, niin se näyttää tältä.
Satunnainen kuvio kahden for-silmukan avulla
Otetaan vielä toinen esimerkki kahdesta for-silmukasta. Tehdään ohjelma, joka piirtää vinottaisen viivan neliön sisälle eli lävistäjän. Vain toinen neliön lävistäjistä on mahdollinen eli ohjelma arpoo desimaaliluvun väliltä 0..1, jos arvottu luku on pienempi kuin 0,5, niin silloin piirretään viiva pisteestä (x,y+koko) pisteeseen (x+koko,y), muuten piirretään viiva pisteestä (x, y) pisteeseen (x+koko, y+koko). Ajatellaan, että neliön koko on sama kuin muuttujan: koko arvo. Jos neliön vasen ylänurkkapiste on (x, y), niin neliön muut pisteet on ilmaistavissa seuraavasti.
Tehdään ohjelma, joka piirtää 600 x 600 ikkunaan 40×40 kokoisen neliön lävistäjiä 15 x 15 kappaletta eli yhteensä 225 viivaa. Ohjelmassa on kaksi for-silmukkaa, jossa muuttujan x ja y arvot kasvavat 0:sta 600:aan (= width = height) 40 askelen välein ( = koko). Käyttämällä muuttujaa koko voimme tarvittaessa muuttaa viivojen kokoa ja samalla toiston määrää silmukassa. Ohjelma on seuraavanlainen.
var koko = 40; // Määritellään muuttuja koko ja annetaan sille alkuarvo
function setup() {
createCanvas(600, 600); // Ikkunan koko 600 x 600
background(200, 220, 200); // Tyhjennä tausta
stroke(0); // Viivan väri musta
strokeWeight(2); // Viivan paksuus 2
noLoop(); // Ei toistoa eli draw-lohko suoritetaan vain kerran
}
function draw() {
for (var y = 0; y < height; y = y + koko) { // For-silmukka, missä y = 0,40,80,...,560
for (var x = 0; x < width; x = x + koko) { // For-silmukka, missä x = 0,40,80,...,560
if (random(1) < 0.5) { // Arvotaan luku väliltä 0...1. Jos luku alle 0.5, niin silloin
line(x, y+koko, x+koko, y); // Piirrä viiva pisteiden (x,y+koko) ja (x+koko,y) välille
} else { // Muutoin (jos ehto ei ole voimassa)
line(x, y, x+koko, y+koko); // Piirrä viiva pisteiden (x,y) ja (x+koko,y+koko) välille
} // Lopeta if-lause
} // Lopeta sisempi for-silmukka
} // Lopeta ulompi for-silmukka
}
|
Alla on eräs ohjelman esimerkki ajo. Joka kerta kuvion on erilainen, koska viivojen paikka arvotaan. Kokeile muuttaa koko muuttujalle arvo 20 ja aja ohjelma uudestaan. Mitä huomasit?
