Laskuri
Jos teemme muuttujalla laskutoimituksen: muuttuja + 1 ja sijoitamme sen saman muuttujan arvoksi, niin saamme aikaiseksi laskutoimituksen, jossa muuttujan arvo kasvaa yhdellä. Esimerkiksi, jos määrittelemme muuttujan laskuri ja annamme sille alkuarvon heti ohjelman alussa, niin muuttuja on voimassa kaikissa aliohjelmissa. Kun sitten lisäämme laskutoimituksen: laskuri = laskuri + 1; funktioon draw, niin saamme laskurin kasvamaan, koska draw-lohko on ikuisessa silmukassa. Yhden luvun lisäys voidaan merkitä lyhemmin muodossa: laskuri++;
Katsotaan laskurin käyttöä esimerkin avulla. Tehdään ohjelma, jossa laskuri-muuttuja saa alkuarvon -50 ja laskuri kasvaa yhdellä draw-lohkossa. Lisätään ohjelmaan if-lause eli jos laskurin arvo on suurempi kuin 650, niin silloin palautamme laskurin arvon takaisin alkuarvoonsa eli -50:een. Käytännössä laskuri-muuttuja saa tällöin arvoja -50:stä 650:een. Kun laitamme laskuri-muuttujan piirtokomentoon: ellipse(laskuri,150,100,100); niin ympyrä tällöin liikkuu vasemmalta oikealle. Kun laitamme ikkunan leveydeksi 600 ja ympyrän halkaisijaksi 100, niin saamme vaikutelman, että ympyrä tulee aina vasemmalta ja häviää oikealle.
Kokonainen ohjelma on seuraavanlainen.
var laskuri = -50; // Määritellään laskuri-muuttuja ja annetaan sille alkuarvo
function setup() {
createCanvas(600, 300); // Ikkunan koko on 600 x 300
fill(0,100,200); // Täyttöväri sininen
}
function draw() {
background(220); // Taustaväri harmaa
laskuri++; // Kasvata laskuria yhdellä
ellipse(laskuri,150,100,100); // Piirrä ellipsi muuttujan avulla
if (laskuri > 650) { // Jos laskuri on suurempi kuin 650, niin
laskuri = -50; // silloin palauta laskurille alkuarvo -50
} // Lopeta if-lause
}
|
Kun ajat ohjelman, niin se näyttää seuraavanlaiselta.
Jaksollinen liike
Entä jos haluamme liikkua oikealta vasemmalle? Tällöin laitamme alkuarvoksi 650 ja pienennämme laskuria. Esimerkiksi komento: laskuri–; pienentää laskurin arvoa yhdellä, jolloin sama komento voitaisiin kirjoittaa muotoon: laskuri = laskuri -1; Entä jos haluamme liikkua nopeammin? Silloin voimme ottaa käyttöön uuden muuttujan nimeltään nopeus, jolloin laskuri voidaan kirjoittaa muodossa: laskuri = laskuri – nopeus. Alla oleva kuva havainnollistaa asiaa.
Tehdään tästä ohjelma. Tehdään vielä sellainen muutos, että y-koordinaatti muuttuu jaksollisesti sin-funktion avulla. Laitamme y-koordinaatin vaihteluväliksi -100:sta 100:aan ja siksi on järkevää siirtää origo pystysuunnassa ikkunan keskelle translate(0,height/2); komennolla. Kokonainen ohjelma on seuraavanlainen.
var laskuri = 650; // Määrittele laskuri-muuttuja ja anna sille alkuarvo
var nopeus = 5; // Määrittele nopeus-muuttuja ja anna sille alkuarvo
function setup() {
createCanvas(600, 300); // Ikkunan koko
fill(0,100,200); // Täyttöväri sininen
}
function draw() {
background(220); // Taustaväri harmaa
translate(0,height/2); // Siirrä origo alapäin pystysuunnassa ikkunan keskikohtaan
laskuri=laskuri-nopeus; // Pienennä laskuri-muuttujan arvoa nopeus-muuttujan verran
var y = 100*sin(radians(laskuri)); // Määrittele y-muuttuja ja anna sille arvo laskukaavasta
ellipse(laskuri,y,100,100); // Piirrä ympyrä paikkaan (laskuri,y)
if (laskuri < -50) { // Jos laskuri on pienempi kuin -50 niin
laskuri = 650; // silloin anna laskurille arvo 650
} // Lopeta if-lause
}
|
Kun ajat ohjelman, niin ohjelman suoritus näyttää tältä.
Pallo pomppaa
Kuinka saisimme ympyrän pomppaamaan reunasta? Se onnistuu helposti muuttamalla nopeus-muuttujan arvo vastakkaiseksi, jolloin lisäävä laskuri muuttuu vähentäväksi tai vähentävä laskuri muuttuu lisääväksi. Katsotaan asiaa esimerkin avulla,
var laskuri = 300; // Määrittele laskuri muuttuja. Alussa ympyrä ikkunan keskellä
var nopeus = 5; // Määrittele nopeus muuttuja ja anna sille arvo
var sade = 50; // Määrittele sade muuttuja ja anna sille arvo
function setup() {
createCanvas(600, 300); // Ikkunan koko
fill(0,100,200); // Sininen täyttöväri
}
function draw() {
background(220); // Tyhjennä tausta ja väritä se harmaaksi
laskuri = laskuri+nopeus; // Laskuri kasvaa/vähenee noepuden verran
ellipse(laskuri,150,2*sade,2*sade); // Piirrä ympyrä, jonka säde on sade
if (laskuri < (sade)) { // Jos laskuri on pienempi kuin sade (eli alle 50 vasemmasta reunasta), niin
nopeus = - nopeus; // Käännä nopeuden suunta päinvastoin (nopeus kasvaa)
} // If-lauseen lopetus-merkki
if (laskuri > (width-sade)) { // Jos laskuri on suurempi kuin ikkunan leveys miinus sade, niin
nopeus = - nopeus; // Käännä nopeuden suunta päinvastoin (nopeus vähenee)
} // If-lauseen lopetus-merkki
}
|
Koska koodissa on sade-muuttuja ja lisäksi ehtolauseessa on käytetty width-komentoa, niin tällöin voit vapaasti muuttaa ikkunan kokoa ja ympyrän säteen arvoa, niin ohjelma toimii kaikissa tapaukissa. Nämä kaksi erillistä if-lausetta olisi voitu yhdistää TAI-lausella seuraavasti.
if ( (laskuri < sade) || (laskuri > (width-sade) ) ) {
nopeus = -nopeus;
}
|
Kun ajat ohjelman, niin se toimii seuraavasti.
Pallo luo taidetta
Sovelletaan edellistä esimerkkiä käytäntöön eli lisätään mukaan myös pystysuuntainen liikesuunta. Tehdään ohjelma jossa ensin arvotaan ympyrän vaaka- ja pystysuuntainen paikka. Tallennetaan ympyrän paikka muuttujiin x ja y, jotka toimivat myös laskuri-muuttujina. Määritellään muuttuja vx, joka kertoo ympyrän vaakasuuntaisen nopeuden, sekä muuttuja vy, joka kertoo ympyrän pystysuuntaisen nopeuden. Kun laitamme vaaka- ja pystysuuntaiselle nopeudelle eri arvot, niin ympyrä ei kulje vain yhtä reittiä. Siirrämme lisäksi background-komennon setup-lohkoon, niin silloin näemme pallon reitin ikkunassa, koska ikkunan tyhjennys tehdään vain ohjelman suorituksen alussa. Aina kun ympyrä siirretään uuteen paikkaan, niin väritetään se aina satunnaisella värillä. Kokonainen ohjelma on seuraavanlainen.
var x; // Määritellään muuttuja x. Vaakasuuntainen paikka
var y; // Määritellään muuttuja y. Pystysuuntainen paikka
var vx= 5.4; // Määritellään muuttuja vx. Vaakasuuntainen nopeus
var vy = 3.5; // Määritellään muuttuja vy. Pystysuuntainen nopeus
var r = 50; // pallon säde
function setup() {
createCanvas(600,600); // Ikkunan koko
fill(0,100,200); // Täyttöväri sininen eli pallon väri
x = random(50,550); // Arvotaan vaakasuuntainen aloituspaikka
y = random(50,550); // Arvotaan pystysuuntainen aloituspaikka
background(255,255,0); // Tyhjennetään tausta (vain kerran)
noStroke(); // Ei reunaviivaa
}
function draw () {
fill(random(255),random(255),random(255),random(255)); // Satunnainen täyttöväri
ellipse(x,y,2*r,2*r); // Piirrä pallo
x = x + vx; // Liiku vasemalle/oikealle
y = y + vy; // Liiku alas/ylös
if ( (y+r) > height) { // Jos ikkunan alareuna saavutettu niin,
vy = -vy; // muuta pystynopeuden suunta
}
if ( (y-r) < 0) { // Jos ikkunan alareuna saavutettu niin,
vy = -vy; // muuta pystynopeden suunta
}
if ((x+r) > width) { // Jos ikkunan oikea reuna saavutettu niin
vx = -vx; // muuta vaakanopeuden suunta
}
if ((x-r) <0) { // Jos ikkunan vasen reuna saavutettu, niin
vx = -vx; // muuta vaakanopeuden suunta
}
}
|
Kun ajat ohjelman, niin se näyttää tältä.