Yhteenveto

Muuttaja on ohjelmassa oleva varattu sana, johon voidaan tallentaa ohjelman suorituksen aikaista tietoa. Muuttujat on määriteltävä ohjelmassa. Muuttujan määrittely alkaa sanalla var (variable = muuttuja), jonka jälkeen annetaan muuttujalle ainutkertainen nimi. Muuttujan nimi muodostuu kirjaimista: a…z ja numeroista 0…9. Jos ohjelmassa on useita muuttujia, niin jokaisella muuttujalla on oltava eri nimi. Kun muuttuja on määritelty, niin muuttujalle voidaan sijoittaa tallennettava tieto, joka voi olla merkki (Esimerkiksi: &-merkki), merkkijono (Esimerkiksi: Aku Ankka), kokonaisluku (Esimerkiksi: 12), desimaaliluku (Esimerkiksi: 3.14) tai totuusarvo (Esimerkiksi: true). Katsotaan esimerkkien avulla, kuinka muuttuja luodaan P5.js-ohjelmassa.

Scratch	P5.js
	var merkki = ’&’;
	var nimi = ”Aku Ankka”;
	var pituus = 100;
	var pii = 3.14;
	var totuus = true;

Kun esimerkiksi haluat tulostaa muuttujan arvon, niin se onnistuu komennolla: text(nimi, 100, 100); Komento tulostaa muuttujan arvon eli sanan ”Aku Ankka” paikkaan (100,100). Jos haluaisit tulostaa sanan Aku Ankka ilman muuttujaa, niin silloin tulostuslause olisi muotoa: text(”Aku Ankka”, 100,100); Mitä tulostuisi komennolla text(”nimi”,100,100); ?

Muuttujan arvo voidaan ohjelman suorituksen aikana vaihtaa. Tällöin määrittelyä ei tarvitse tehdä uudestaan. Muuttujassa voidaan tallentaa vain yksi arvo kerrallaan eli kun uusi arvo tallennetaan muuttujaan, niin vanha arvo poistuu. Esimerkiksi vaihdetaan muuttujan arvo ”Aku Ankka” arvoon ”Hessu Hopo”.

var nimi = "Aku Ankka";
nimi = "Hessu Hopo";

Huomaa, että muuttujat määritellään p5.js ohjelmassa samalla tavalla kuin JavaScript-ohjelmassa. Voit lukea lisätietoa JavaScript:n muuttujista seuraavan linkin takaa:

• https://www.w3schools.com/js/js_variables.asp

Liukupalkki

Muistellaan aluksi kuinka Scratch:ssä määriteltiin liukupalkki muuttujaan. Tehdään ohjelma, jossa muuttujan pituus arvo voi vaihdella välillä -1000…1000.

Kuinka sama ohjelma tehtäisiin P5.js-ohjelmassa? Tehdään yllä oleva ohjelma uudestaan P5.js-ohjelmassa.

var xSlider;                              // Määritellään muuttuja xSlider liukupalkkia varten

function setup() {
  createCanvas(600, 600);                 // Ikkunan koko 600x600
  xSlider = createSlider(-1000, 1000, 0); // Luodaan liukupalkki xSlider, jonka minimi arvo on -1000 ja maksimi arvo on 1000
  xSlider.position(10, 20);               // Sijoitetaan liukupalkki xSlider paikkaan (10,20).
  textSize(100);                          // Tekstin koko 100
}

function draw() {
  background(225);                        // Taustaväri valkoinen
  fill(0);                                // Täyttöväri musta
  var pituus = xSlider.value();           // Määritellään muuttuja pituus ja sijoitetaan siihen liukupalkin arvo, 
  text(pituus,100,200);                   // Tulostetaan pituus-muuttuja
}

Scratch:ssä liukupalkki luodaan automaattisesti (hiiren oikea painike), kun ensin on luotu muuttuja. P5.js-ohjelmassa liukupalkki luodaan setup-lohkossa, mutta sen arvoa luetaan draw-lohkossa. Koska draw-lohko on ikuisessa silmukassa, niin arvo päivittyy jatkuvasti aivan kuin Scratch:ssäkin. Kuten esimerkistä huomattiin, niin liukupalkki voidaan määritellä paikkaan (x,y) setup()-lohkossa komennolla:

muuttuja.createSlider(min,max,oletus arvo);
muuttuja.position(x,y);

Missä liukupalkin muuttuja on ohjelman alussa määritelty ns. globaali-muuttuja. Tämän jälkeen liukupalkin arvo voidaan sijoittaa draw()-lohkossa halutulle muuttujalle komennolla:

var muuttuja2 = muuttuja.value();

Liukupalkin arvon lukeminen ja sijoittaminen toiselle muuttujalle tehdään draw-lohkossa, koska draw-lohko on ikuisessa silmukassa.

Koordinaatiston siirtäminen, suurentaminen ja pyörittäminen

Käydään lisäksi seuraavat hyödylliset komennot läpi.

Scratch	P5.js-komento	Merkitys
	translate(x,y);	Komento siirtää koordinaatistoa x:n verran oikealle ja y:n verran alas.
	scale(kerroin);	Komento suurentaa tai pienentää koordinaatistoa. Kun kerroin on välillä 0…1, niin koordinaatisto pienenee. Kun kerroin on suurempi kuin yksi, niin koordinaatisto suurenee. Arvo 0 ei ole sallittu.
	rotate(radians(kulma));	Komennolla voidaan pyörittää koko koordinaatistoa joko myötä- tai vastapäivään. Positiivisilla arvoilla pyöritys tapahtuu myötäpäivään ja negatiivisilla arvoilla pyöritys tapahtuu vastapäivään.

P5.js ympäristössä näillä komennoilla muokataan xy-koordinaatistoa, jolloin kaikki kuviot xy-koordinaatistossa muokkautuvat mukana. Scratch-ohjelmassa havaitaan, että komennot vaikuttavat vain valittuun hahmoon, vaikka periaatteessa lopputulos on sama. Mikäli p5.js-ohjelmassa halutaan, että nämä komennot vaikuttavat vain yhteen piirros-objektiin, niin silloin nämä komennot ja se yksi piirto-komento voidaan laittaa push(); ja pop(); komentojen väliin.