Esimerkki: Reunasta pomppaaminen

Tehdään ohjelma, jossa pallo liikkuu oikealle ja vasemmalle. Kun ikkunan reuna tulee vastaan, pallo vaihtaa suuntaa.

SANALLINEN ALGORITMI
  1. Määrittele globaali kokonaislukumuuttuja a ja anna sille alkuarvo 0.
  2. Määrittele globaali totuusarvomuuttuja suunta ja anna sille alkuarvo: true.
  3. Aseta ikkunan kooksi 400 px vaakaan ja 400 px pystyyn.
  4. Aseta reunaviivan väriksi musta.
  5. Aseta täyttöväriksi punainen.
  6. Aseta void draw ()-lohkon päivitys taajuudeksi 1000 Hz.
  7. Siirrä origoa 200 px oikealle ja 200 px alas eli aseta origo ikkunan keskelle.
  8. Tyhjennä tausta ja väritä se valkoiseksi.
  9. Jos suunta-muuttuja on yhtä kuin true, niin silloin kasvata laskuria a (mennään oikealle).
  10. Jos suunta-muuttuja on yhtä kuin false, niin silloin pienennä laskuria a (mennään vasemmalle).
  11. Jos muuttuja a on suurempi kuin 190, niin aseta suunta-muuttujalle arvo: false (eli käännetään suunta).
  12. Jos muuttuja a on pienempi kuin -190, niin aseta suunta-muuttujalle arvo: true (eli käännetään suunta).
  13. Piirrä ympyrä, jonka koko halkaisija on 20, paikkaan (a,0). Koska a muuttuja kasvaa tai vähenee kokoajan, niin ympyrä liikkuu, joko oikealle tai vasemmalle.
 

// Ohjelman tehnyt e-Oppi Oy

// 30.8.2017

int a = 0; // Laskurin alkuarvo

boolean suunta = true; // Suunta alussa oikealle

void setup () {

     size(400,400); // ikkunan koko

     stroke(0); // Musta viivan väri

     fill(255,0,0); // Punainen täyttöväri

     frameRate(1000); // draw void () lohkon päivityksiä sekunnissa

}

void draw() {

     translate(200,200); // Origo (0,0) ikkunan keskelle

     background(255); // Tyhjennä tausta 

     if (suunta == true) { // Jos mennään oikealle

          a++; // niin kasvata laskuria

     }

     if (suunta == false) { // Jos mennään vasemalle

          a--; // niin pienennä laskuria

     }

     if (a > 190) { // Jos tulee oikea reuna vastaan

          suunta = false; // niin käännä suunta vasemmalle

     }

     if (a < -190) { // Jos tulee vasen reuna vastaan

          suunta = true; // niin käännä suunta oikealle

     }

     ellipse(a,0,20,20);

}


Tässä ohjelmassa on myös komento nimeltään frameRate(lukuarvo);. Se kertoo, kuinka monta kertaa sekunnissa void draw ()-lohkoa päivitetään, eli mitä isompi luku, niin sitä nopeammin pallo liikkuu ruudulla. Arvoa ei voi kasvattaa loputtomasti vaan jossain vaiheessa tietokonelaitteiston päivitysnopeus tulee vastaan, jota ei voi ylittää. Oletuksena on 60 päivitystä sekunnissa. Alla on esimerkki ohjelman suorituksesta. Huomaa, että komento background() on siirretty void draw()-lohkoon, niin se siivoaa edelliset pallon jäljet pois. If-lauseilla pallo saadaan myös pomppaamaan seinästä poispäin. Tarvitset kaksi muuttujaa. Toinen muuttujista huolehtii laskurista eli liikkeestä (muuttuja: a) ja toinen suunnasta (muuttuja: suunta). Silloin kun suunta on oikealle (true), niin kasvata laskuria ja vastaavasti silloin kun suunta on vasemmalle (false), niin vähennä laskuria. Kun laskuri on tarpeeksi iso eli pallon keskipisteen vaakasuuntainen koordinaatti ylittää tai alittaa määrätyn raja-arvon, niin käännetään suunta päinvastaiseksi. Tässä raja-arvo on 190 tai -190 eli ikkunan reunasta (200) otetaan pois ympyrän säde (10).



Edellisessä esimerkissä boolean-tyyppisellä muuttujalla määrättiin liikesuunta. Kun muuttuja sai arvon true, niin liikuttiin oikealle. Kun muuttuja sai arvon false, liikuttiin vasemmalle. Tehdään vertailun vuoksi ohjelma ilman boolean-muuttujaa. Yksinkertaisesti voimme muuttaa lisäyksen vx merkin päinvastaiseksi, kun kohtaamme ikkunan reunan. Tämä myös muuttaa pallon liikesuunnan.

SANALLINEN ALGORITMI
  1. Määrittele globaali desimaalilukumuuttuja x ja anna sille alkuarvo 50 (pallon vaakasuunta).
  2. Määrittele globaali desimaalilukumuuttuja y ja anna sille alkuarvo 50 (pallon pystysuunta).
  3. Määrittele globaali desimaalilukumuuttuja vx ja anna sille alkuarvo 2 (pallon nopeus)
  4. Määrittele globaali desimaalilukumuuttuja r ja anna sille alkuarvo 20 (pallon säde).
  5. Aseta ikkunan kooksi 800 px vaakaan ja 600 px pystyyn.
  6. Aseta täyttöväriksi sininen.
  7. Aseta liikkeen pehmennys.
  8. Tyhjennä tausta ja aseta ikkunan taustaväriksi valkoinen.
  9. Piirrä ympyrä, jonka halkaisija on 2*r paikkaan (x,y).
  10. Kasvata muuttujaa x arvolla vx, missä x on ympyrän vaakasuuntainen paikka ja vx on ympyrän nopeus.
  11. Jos pallon oikea reuna (x+r) on suurempi tai yhtä suuri kuin ikkunan leveys (width), niin
    muuta lisäys eli vx päinvastaiseksi muuttamalla sen etumerkki.
  12. Jos pallon vasen reuna (x-r) on pienempi tai yhtä suuri kuin nolla, niin
    muuta lisäys vx päinvastaiseksi muuttamalla sen etumerkki.
 

// Ohjelman tehnyt e-Oppi Oy

// 30.8.2017

float x = 50; // Pallon keskipisteen vaakakoordinaatti

float y = 50; // Pallon keskipisteen pystykoordinaatti

float vx= 2;  // Lisäyksen suuruus

float r = 20;  // Pallon säde



void setup() {

     size(800,600); // Ikkunan koko

     fill(0,0,255); // Täyttöväri sininen

     smooth(); // Liikeen pehmennys

}

void draw () {

     background(255); // Tyhjennä tausta ja väritä se valkoiseksi

     ellipse(x,y,2*r,2*r); // Piirrä ympyrä

     x = x + vx; // Kasvata x:n arvoa lisäyksen verran

     if (x+r>= width) { 

     // Jos pallon oikea reuna saavuttaa ikkunan oikean reunan, niin 

         vx = -vx; // muuta lisäys päinvastaiseksi

     }

     if (x-r <=0) { 

    // Jos pallon vasen reuna saavuttaa ikkunan vasemman reunan, niin

         vx = -vx; // muuta lisäys päinvastaiseksi

     }

}