Noise-funktio ja for-silmukka
Palataan edellisessä kappaleessa esiteltyyn noise-funktioon. Käytännössä noise-funktio saa satunnaisia arvoja väliltä 0..1, kun syötteenä on laskurin arvoja. Kun laskurin muutos on pieni (sadasosien luokkaa), niin noise-funktion muutokset on myös pieniä. Tehdään ohjelma, jossa noise-funktion syöttenä on kaksi muuttujaa x ja a tai b tai c. X:n arvo muuttuu for-silmukan mukaan ja muuttujat a, b ja c ovat laskureita. Käytännössä koska x saa arvoja 0:sta 600:aan, niin noise-funktion avulla voimme piirtää 600 kappaletta pystyviivoja vierekkäin siten, että viivojen korkeus vaihtelee. Vastaavasti laskurin avulla saamme viivat elämään eli muuttamaan pituutta noise-funktion avulla aina kun draw-lohkon suoritus alkaa alusta. Laitamme kolme laskuria ja kolme viiva-komentoa, niin saamme kolme vaakariviä viivoja, jotka elävät kukin omaa elämäänsä. Ohjelman koodi on seuraava.
var a; // Määritellään laskuri muuttuja a
var b; // Määritellään laskuri muuttuja b
var c; // Määritellään laskuri muuttuja c
function setup() {
createCanvas(600, 400); // Ikkunan koko 600 x 400
a = random(100); // Arvotaan muuttujalle a alkuarvo
b = random(100); // Arvotaan muuttujalle b alkuarvo
c = random(100); // Arvotaan muuttujalle c alkuarvo
strokeWeight(2); // Viivan paksuus 2 (jotta viivat menevät hieman päällekkäin)
}
function draw() {
background(0,0,255); // Taustaväri sininen
for (var x = 0; x < width; x++) { // For silmukka jossa x = 0,1,2,3,...,599 eli piirretään 600 pystyviivaa
stroke(255,255,0); // Viivan väri keltainen
line(x, 100 * noise(x / 100, a), x, height); // Piirrä pystyviiva kohdasta 0...100 alas
stroke(255,200,0); // Viivan väri oranssi
line(x, 50 + 200 * noise(x / 100, b), x, height); // Piirrä pystyviiva kohdasta 50...250 alas
stroke(255,100,0); // Viivan väri punainen
line(x, 100 + 300 * noise(x / 100, c), x, height); // Piirrä pystyviiva kohdasta 100...400 alas
} // Lopeta for-silmukka
a = a + 0.01; // Kasvata laskuria a
b = b + 0.01; // Kasvata laskuria b
c = c + 0.01; // Kasvata laskuria c
}
|
Kun ajat ohjelman, niin se näyttää tältä.
Piirtelyä
Tehdään ohjelma, jossa voi piirtää symmetrisesti ikkunan keskipisteen suhteen. Tehdään ohjelmaan liukupalkki, jolla voi jakaa ikkunan yhdestä maksimissaan 12 osaan. Lisätään ohjelmaan mousePressed-lohko, jonka avulla voidaan hiiren painiketta napsauttamalla tyhjentää ikkuna, sekä lisätään ohjelmaan keyPressed-lohko, jonka avulla näppäimistöä painamalla voidaan asettaa satunnainen piirtoväri. Ohjelma on seuraavanlainen.
var mSlider; // Määritellään muuttuja mSlider
function setup() {
createCanvas(600, 600); // Luodaan ikkunan, jonka koko on 600 x 600
mSlider = createSlider(1, 12, 2); // Luodaan liukupalkki
mSlider.position(20, 20); // Liukupalkin paikka on 20 px oikealle ja 20 px alas
stroke(255,255,0); // Reunaviivan väri alussa on keltainen
strokeWeight(10); // Viivan paksuus on 10
background(0); // Tyhjennä tausta ja väritä se mustaksi
}
function draw() {
var max = mSlider.value(); // Määritellään muuttuja max ja sijoitetaan siihen liukupalkin arvo
translate(width/2,height/2); // Origo ikkunan keskelle
for (var a= 1; a <= max; a++) { // For-silmukka, jossa a = 1,2,3,...,max
rotate(radians(360/max)); // Pyöritä origoa kulman 360/max verran
line(mouseX-width/2,mouseY-height/2,pmouseX-width/2,pmouseY-height/2); // Piirrä viivaa
} // Lopeta for-silmukka
}
function mousePressed () { // Kun painetaan hiiren painiketta
background(0); // niin silloin tyhjennä tausta ja väritä se mustaksi
}
function keyPressed () { // Kun painetaan jotain painiketta näppäimistöltä
stroke(random(255),random(255),random(255)); // Arvo satunnainen viivan väri
}
|
Ohjelman suoritus näyttää tältä.
Aaltoliike
Esittelimme aikaisemmin jo aaltoliikkeen tekemisen sin-funktion avulla. Kuinka aaltoliike saataisiin liikkumaan?
var b = 0; // Määrittele muuttuja b ja anna sille alkuarvo 0 (= laskuri-muuttuja)
var koko = 50; // Aallon koko eli amplitudi
var taajuus = 2; // Altojen määrä yhdessä yksikössä eli taajuus
function setup() {
createCanvas(600, 600); // Ikkunan koko 600 x 600
}
function draw() {
b=b+1; // Aallon nopeus
background(100,100,220); // Aseta taustaväri
fill(0,0,255); // Sininen täyttöväri
translate(-b,0); // Liiku oikealle + tai vasemmalle -
beginShape(); // Aloita monikulmio
vertex(b,600); // Aloituspiste vasemmassa alareunassa
for (var x = b; x <600+b; x++) { // Silmukka, jossa 600 toistoa, aloituspaikka määräytyy laskurin b avulla
var y = koko*sin(radians(taajuus*x)); // Lasketaan aallon pystysuuntainen paikka
vertex(x,height/2+y); // Monikulmion piste, joista muodostuu aalto
} // Lopeta silmukka
vertex(600+b,600); // Monikulmion viimeinen piste oikeassa alareunassa
endShape(CLOSE); // Lopeta monikulmio
}
|
Aalto voidaan piirtää monikulmiokomennolla. Jos ikkunan leveys on 600, niin for-silmukan avulla voimme käydä läpi nämä 600 vaakasuuntaista pistettä. Jokaista vaakasuuntaista pistettä (=x) varten tarvitsemme laskea pystysuuntaisen paikan (=y) sini-laskukaavan avulla. Aalto saadaan liikkumaan muuttamalla aloituspistettä b ja lopetuspistettä (600+b) for-silmukassa. Jos aalto liikkuu nyt oikealle, niin vastaavasti meidän pitää siirtää origoa vasemalle -b:n verran tai muuten aalto liikkuu pois ikkunasta. Tällöin x:n arvot pysyvät paikoillaan suhteessa ikkunaan, mutta y:n arvot vaihtelevat kokoajan ja saamme vaikutelman, että aalto liikkuu. Ohjelman suoritus näyttää nyt tältä.