Tehdään ohjelma, jossa on viiden solun kokoine taulukko. Sijoitetaan taulukon jokaiseen soluun yksi kirjain. Solujen numerointi alkaa nollasta, joka on taulukon ensimmäinen solu. Viides ja viimeinen solu on solu numero 4. Oheinen kuva havainnollistaa asiaa.
Tehdään ohjelma, jossa taulukon soluissa olevien kirjainten paikkaa voidaan muuttaa liukupalkkien avulla. Kirjainten vaakasuuntainen väli säädetään muuttujan pituus avulla ja kirjainten pystysuuntainen väli säädetään muuttujan korkeus avulla. Alla oleva kuvaaja havainnollistaa asiaa.
Kokonainen ohjelma on seuraavanlainen.
var taulukko = ["H","E","L","L","O"]; // Perustetaan taulukko
var pituusSlider; // Määritellään muuttuja pituusSlider
var korkeusSlider; // Määritellään muuttuja korkeusSlider
var kokoSlider; // Määritellään muuttuja kokoSlider
function setup() {
createCanvas(600, 600); // Ikkunan koko
pituusSlider = createSlider(0, 100, 100); // Luodaan liukupalkki pituusSlider, joka saa arvoja väliltä 0..100
pituusSlider.position(20, 20); // Sijoitetaan pituusSlider liukupalkki paikkaan (20,20)
korkeusSlider = createSlider(0, 100, 100); // Luodaan liukupalkki korkeusSlider, joka saa arvoja väliltä 0..100
korkeusSlider.position(220, 20); // Sijoitetaan korkeusSlider liukupalkki paikkaan (220,20)
kokoSlider = createSlider(10, 100, 50); // Luodaan liukupalkki kokoSlider, joka saa arvoja väliltä 10..100
kokoSlider.position(420, 20); // Sijoitetaan kokoSlider liukupalkki paikkaan (420,20)
}
function draw() {
background(255,255,0); // Tyhjennetään tausta ja väritetään se keltaiseksi
var pituus = pituusSlider.value(); // Määritellään pituus-muuttuja ja sijoitetaan siihen pituusSlider liukupalkin arvo
var korkeus = korkeusSlider.value(); // Määritellään korkeus-muuttuja ja sijoitetaan siihen korkeusSlider liukupalkin arvo
var koko = kokoSlider.value(); // Määritellään koko-muuttuja ja sijoitetaan siihen kokoSlider liukupalkin arvo
textSize(koko); // Asetetaan tekstin koko muuttujan koko-avulla
for (var a =0; a < taulukko.length; a++) { // Luodaan for-silmukka, joka käy taulukon solut läpi
text(taulukko[a],100+pituus*a, 120+korkeus*a); // Tulosta taulukon solut muuttujien pituus, korkeus ja a avulla
} // Lopetetaan for-silmukka
}
|
Kun ajat ohjelman niin se toimii seuraavasti.
Pallon xy-paikka taulukkoon
Katsotaan vielä toisena esimerkkinä kuinka pallon paikka xy-koordinaatistossa voitaisiin tallentaa taulukkoon.
var x = [100,110,120,130,140,150,160,170,180,190,200,210,220,230,240,250,260,270,280]; // Vaaka
var y = [100,110,121,133,146,161,177,195,214,236,259,285,314,345,380,417,459,505,556]; // Pysty
function setup() {
createCanvas(600, 600); // Ikkunan koko 600 x 600
fill(0,0,255) // Täyttöväri eli pallon väri on sininen
}
function draw() {
background(220,220,0); // Tyhjennä tausta ja väritä se keltaiseksi
for (var a=0; a< x.length; a++) { // Käy läpi taulukon y kaikki solut (0,1,2,3,...,length)
ellipse(x[a],y[a],20,20); // Piirrä ympyrä paikkaan (x,y)
} // Lopeta for-silmukka
}
|
Tässä voit ajatella, että pallon paikan mittaustulokset on tallennettu kahteen eri taulukkoon x ja y. Kun nämä arvot luetaan taulukosta, niin for-silmukan avulla saadaan piirrettyä niin monta palloa kuin on taulukossa arvoja. Kun ohjelma ajetaan, niin nähdään pallon liike.
Kuvasta nähdään, että pallon liike vaakasuunassa on tasaista, mutta pystysuunnassa kiihtyvää. Kuinka pallo saataisiin putoamaan kuvan mukaisesti? Sehän onnistuisi laskuri-muuttujan avulla. Muuta nyt koodi muotoon.
var x = [100,110,120,130,140,150,160,170,180,190,200,210,220,230,240,250,260,270,280]; // Vaaka
var y = [100,110,121,133,146,161,177,195,214,236,259,285,314,345,380,417,459,505,556]; // Pysty
var a = 0; // Muuttuja a on nyt laskuri muuttuja, joka saa alkuarvon 0.
function setup() {
createCanvas(600, 600); // Ikkunan koko 600 x 600
fill(0,0,255) // Täyttöväri sininen
frameRate(10); // Päivitys taajuus 10 Hz = pallon nopeus
}
function draw() {
background(220,220,0); // Tyhjennä tausta ja väritä se keltaiseksi
ellipse(x[a],y[a],20,20); // Piirrä ympyrä paikkaan (x,y)
a++; // Kasvata laskuria yhdellä
if (a == x.length) { // Jos taulukon loppu on saavutettu, niin
a = 0; // nollaa laskuri
} // Lopeta if-lause
}
|
Tärkeintä tässä on laittaa laskurin lisäyksen (a++;) jälkeen if-lause, jolla tarkastetaan, että onko taulukon maksimi-koko saavutettu, jolloin nollataan laskuri muuttuja ja animaatio alkaa alusta. Jos tätä ehtoa ei olisi, niin koko ohjelma kaatuisi siinä vaiheessa, kun mentäsiin yli viimeisen solun. Voit kopioida koodin ohjelmointiympäristöön ja testata sen.