Muuttuja on ohjelmassa muistipaikka, johon ohjelman suorituksen aikainen tieto voidaan tallentaa. Ohjelmassa käytettävät muuttujat on esiteltävä ohjelmassa ennen kuin niitä voi käyttää. Jos esittely tapahtuu draw()-lohkossa, niin muuttujat ovat vain voimassa draw()-lohkossa. Mutta jos muuttujat määrittelee heti ohjelman alussa, niin silloin muuttujat ovat voimassa koko ohjelman ajan. Tällöin sanotaan, että kyseessä on ns. globaalimuuttuja. Muuttuja (= variable) esitellään komennolla
var muuttujan_nimi
jonka jälkeen muuttujalle voidaan tallentaa tietoa. Tallennettava tieto voi olla kokonaisluku (integer), desimaaliluku (float), merkkijono (String), merkki (char) tai totuusarvo (boolean). P5.js ohjelmassa ei erikseen määritellä tietotyyppiä, joten ohjelmaa kirjoitettaessa on oltava tarkkana minkälaista tietoa muuttujiin on tallennettu. Esimerkiksi, jos muuttuja saa arvoksi merkkijono-tietoa ja sitten samaa muuttujaa on käytetty laskutoimituksissa, niin ohjelman suoritus antaa virheilmoituksen, koska merkkijonoilla ei voi laskea. Muuttujalle voidaan tallentaa tietoa komennolla:
muuttujan_nimi = muuttujan_arvo;
Yleensä tapana on yhdistää muuttujan määrittely ja sijoittaminen samaan lauseeseen. Katsotaan tästä esimerkki. Määritellään kolme muuttujaa x, y ja halkaisija. Muuttujaan x tallennetaan ympyrän keskipisteen vaakasuuntainen paikka, muuttujaan y tallennetaan ympyrän keskipisteen pystysuuntainen paikka ja muuttujaan halkaisija tallennetaan ympyrän halkaisija. Tehdään muuttujien avulla siis ohjelma, joka piirtää ympyrän, jonka halkaisija on 300 ja ympyrän keskipiste on paikassa (200,250). Ohjelma on seuraavanlainen.
function setup() {
createCanvas(500, 500); // Ikkunan koko 500x500
}
function draw() {
background(200,150,0); // Taustaväri
fill(0,0,255); // Täyttöväri sininen
var x = 200; // Määritellään muuttuja x ja annetaan sille arvo 200
var y = 250; // Määritellään muuttuja y ja annetaan sille arvo 250
var halkaisija = 300 // Määritellään muuttuja halkaisija ja annetaan sille arvo 300
ellipse(x,y,halkaisija,halkaisija); // Piirretään ympyrä
}
|
Lopputulos näyttää tältä.
Muuttujat kannattaa nimetä kuvaavasti. Nimeämisessä on kuitenkin joitain rajoituksia.
- Käytä nimissä kirjaimia a….z ja numeroita 0..9. Ääkköset: ä, ö ja å eivät ole suositeltuja. Esimerkiksi säde on huono muuttujan nimi, parempi on sade.
- Älä käytä välilyöntiä muuttujan nimissä. Sitä vastoin voit käyttää alaviivaa. Esimerkiksi et voi käyttää muuttujan nimessä sanaa: pohjan säde, vaan käytä muotoa: pohjan_sade.
- Erikoismerkit eivät yleensä ole sallittuja muuttujien nimissä, kuten esimerkiksi %, &, /, (, ),…
Liukupalkki
Muuttujan arvo voi muuttua ohjelman suorituksen aikana. Muuttujaan voi vain tallentaa yhden arvon kerrallaan. Kun muuttujaan tallennetaan uusi arvo, niin vanha arvo häviää. P5JS-ohjelmoinnissa on käytössä liukupalkki, jonka arvo voidaan välittää muuttujalle. Aluksi määrittelemme liukupalkille oman muuttujan heti ohjelman alussa komennolla:
var liukupalkin_nimi;
Jonka jälkeen liukupalkki määritellään setup-lohkossa komennoilla:
Liukupalkin_nimi = createSlider(min,max,arvo);
Samalla liukupalkki sijoitetaan paikkaan (x,y) komennolla:
Liukupalkin_nimi.position(x,y);
Liukupalkin määrittely ja sijoittaminen ikkunaan tehdään vain kerran eli siksi nämä komennot on laittettava setup()-lohkoon. Kun muuttuja lukee liukupalkin arvon draw()-lohkossa, niin se voidaan kirjoittaa muodossa:
var muuttuja = Liukupalkin_nimi.value();
Tehdään edellinen esimerkki uudestaan käyttäen liukupalkkeja.
var aSlider; // Määritellään muuttuja aSlider
var bSlider; // Määritellään muuttuja bSlider
var cSlider; // Määritellään muuttuja cSlider
function setup() {
createCanvas(600, 600); // Ikkunan koko 600x600
aSlider = createSlider(0, 600, 300); // Luodaan liukupalkki aSlider, jonka minimi arvo on 0 ja maksimi arvo on 600
aSlider.position(10, 20); // Sijoitetaan liukupalkki aSlider paikkaan (10,20).
bSlider = createSlider(0, 600, 300); // Luodaan liukupalkki bSlider, jonka minimi arvo on 0 ja maksimi arvo on 600
bSlider.position(210, 20); // Sijoitetaan liukupalkki bSlider paikkaan (10,20).
cSlider = createSlider(0, 600, 100); // Luodaan liukupalkki cSlider, jonka minimi arvo on 0 ja maksimi arvo on 600
cSlider.position(410, 20); // Sijoitetaan liukupalkki cSlider paikkaan (10,20).
}
function draw() {
background(200,150,0); // Taustaväri
fill(0,0,255); // Täyttöväri sininen
var x = aSlider.value(); // Määritellään muuttuja x, joka saa arvon liukupalkilta: aSlider
var y = bSlider.value(); // Määritellään muuttuja y, joka saa arvon liukupalkilta: bSlider
var halkaisija = cSlider.value(); // Määritellään muuttuja halkaisija, joka saa arvon liukupalkilta: cSlider
ellipse(x,y,halkaisija,halkaisija); // Piirretään ympyrä muuttujien avulla.
}
|
Kokeile muuttaa liukupalkin arvoja. Mitä huomaat.
Liukupalkki ja random-komento
Tehdään ohjelma, jossa arvotaan satunnaiseen paikkaa satunnaisella värillä ympyröitä. Lisätään ohjelmaan neljä liukupalkkia. Ensimmäisellä liukupalkilla säädetään ympyrän reunaviivan paksuus. Toisella liukupalkilla säädetään ympyrän halkaisija. Kolmannella liukupalkilla säädetään reunaviivan läpinäkyvyys ja neljännellä liukupalkilla säädetään täyttövärin läpinäkyvyys. Muuten ympyrän paikka ja väri arvotaan satunnaisesti. Kokonainen ohjelma on seuraavanlainen.
var aSlider; // Määritellään muuttuja aSlider
var bSlider; // Määritellään muuttuja bSlider
var cSlider; // Määritellään muuttuja cSlider
var dSlider; // Määritellään muuttuja dSlider
function setup() {
createCanvas(600, 600); // Laitetaan ikkunan kooksi 600 x 600
aSlider = createSlider(0, 300, 100); // Luodaan liukupalkki aSlider, jonka minimi arvo on 0 ja maksimi arvo on 300
aSlider.position(10, 20); // Sijoitetaan liukupalkki aSlider paikkaan (10,20)
bSlider = createSlider(10, 300, 0); // Luodaan liukupalkki bSlider, jonka minimi arvo on 0 ja maksimi arvo on 300
bSlider.position(160, 20); // Sijoitetaan liukupalkki bSlider paikkaan (160,20)
cSlider = createSlider(10, 255, 100); // Luodaan liukupalkki cSlider, jonka minimi arvo on 0 ja maksimi arvo on 255
cSlider.position(310, 20); // Sijoitetaan liukupalkki cSlider paikkaan (310,20)
dSlider = createSlider(10, 255, 100); // Luodaan liukupalkki dSlider, jonka minimi arvo on 0 ja maksimi arvo on 255
dSlider.position(460, 20) // Sijoitetaan liukupalkki dSlider paikkaan (460,20)
background(200,150,0); // Tyhjennetään tausta
}
function draw() {
var koko1 = aSlider.value(); // Luodaan muuttuja: koko1 ja annetaan sille arvo liukupalkista aSlider
var koko2 = bSlider.value(); // Luodaan muuttuja: koko2 ja annetaan sille arvo liukupalkista bSlider
var vari1 = cSlider.value(); // Luodaan muuttuja: vari1 ja annetaan sille arvo liukupalkista cSlider
var vari2 = dSlider.value(); // Luodaan muuttuja: vari2 ja annetaan sille arvo liukupalkista dSlider
strokeWeight(koko1); // Viivan paksuus
stroke(random(255),random(255), random(255), random(vari1)); // Satunnainen reunaviivan väri
fill(random(255),random(255), random(255), random(vari2)); // Satunnainen täyttöväri
ellipse(random(width),random(height),koko2,koko2); // Piirrä ympyrä
}
|
Ohjelman suoritus näyttää tältä.