Esimerkit

Esimerkki 1

2020-09-23T12:03:09+03:00

Esimerkin kuvaus

Tässä esimerkissä luomme piirtokankaalle erilaisia objekteja. Aloitamme yksinkertaisten kuvioiden piirtämisestä. Piirrämme erivärisen ympyrän, kolmion ja neliön.

Koodin kirjoittaminen ja suorittaminen

Ohjelmassa koodi kirjoitetaan valkoiselle alueella, jossa kursori vilkkuu (Kuvan kohta 1). Koodi suoritetaan painamalla "play"-nappia (Kuvan kohta 2).

Koodin esittely

Koodi kokoisuutena näkyy alla olevassa kuvassa.

Kahdella peräkkäisellä kenoviivalla ("//" ) aloitetaan yhden rivin pituinen kommentti. Kommentit on tarkoitettu ohjelmoijalle avuksi. Tietokone ei välitä kommenteista koodin suorituksen aikana.

Käsky "size(600, 400);" asettaa piirtokankaan koon. Ohjelma muodostuu peräkkäisistä käskyistä. Käskyt kirjoitetaan (yleensä) aina omille riveilleen (yksi käsky per rivi). Merkki ";" päättää käskyn.

Käsky "fill(180,120,80);" valitsee käytössä olevan värin.

Käsky "ellipse(25, 25, 50,50);" piirtää ympyrän. Luvut 25 ovat ympyrän keskipiste piirtokankaalla ja luvut 50 ovat ellipsin halkaisijat. Käskyjen perässä suluissa olevia lukuja eli ominaisuuksia kutsutaan parametreiksi.

Käsky "triangle(30, 75, 58, 20, 86, 75);" piirtää kolmion. Voit kokeilla itse, miten parametrit vaikuttavat.

Käsky "rect(30, 20, 55, 55);" piirtää neliön. Huomaa, että käskyjen järjestys määrää myös piirtojärjestyksen.

Voit kopioida koodin tiedostona täältä esimerkki1.pde

Suoritettu koodi näyttää tältä:

Ohjelman tallentaminen

Tallenna oma koodisi klikkaamalla "File" oikeasta yläkulmasta. Sieltä löytyy "Save as..". Näin syntyy tiedosto, joka voidaan avata Processing-ohjelmointiohjelmassa. Palauta aina tekemäsi tehtävät pedanettiin tällaisina tiedostoina.

Esimerkki 2

2019-09-23T08:51:55+03:00

Esimerkin kuvaus

Tässä esimerkissä tutustumme muuttujiin. Ne ovat ohjelmoinnin perustyökaluja. Niiden avulla teemme ohjelmista "älykkäitä".

Muuttujat

Processing on ohjelmointikielenä yksinkertaistettua Javaa. Kuitenkin myös Java-kielen käskyt toimivat sellaisenaan. Muuttujat määritellään ja niitä käsitellään Processingissa aivan samalla tavalla kuin javassakin.

Esimerkki muuttujasta
int halkaisija = 80;

Muuttuja on muistipaikka, johon tallenetaan tietoa. Muuttujalla on nimi (esim. halkaisija), jolla siihen viitataan. Muuttujalla on tyyppi (esim. int eli kokonaisluku), joka kertoo, millaista tietoa siihen voidaan tallentaa. Muuttujalla on arvo (esim. 80), joka kertoo muuttujan sisällön. Muuttujan arvoa voidaan vaihtaa ohjelman suorituksen aikana.

Muuttujilla voidaan myös laskea ominaisuuksia, jotka riippuvat toisistaan. Näin omisuuksien muuttuessa koko koodia ei tarvitse muuttaa.

Lisää tietoa Javan muuttujista löydät täältä.

Esimerkkiin 2 liittyvän koodin voit ladata täältä: esimerkki2.pde

Esimerkki 3

2019-09-25T18:02:45+03:00

Esimerkin kuvaus

Esimerkissä 3 tutustutaan vakiomuuttajiin sekä erityisesti metodeihin.

Vakiomuuttuja

Jos muuttujan tietoa ei saa muuttaa, voidaan se määritellä vakiomuuttujaksi. Javassa vakiomuuttuja määritellään avainsanalla "final". Vakiomuuttujat on tapana kirjoittaa isoilla kirjaimilla. Vakiomuuttujalle kerran annettua arvoa ei voida enää muuttaa ohjelman suorituksen aikana.

Esimerkki vakiomuuttujasta
final int LEVEYS = 500;

Metodi

Ohjelma voidaan jakaa yhdeksi pääohjelmaksi ja yhdeksi tai useammaksi aliohjelmaksi. Tällaisen rakenteen tarkoituksena on mahdollistaa monimutkaistenkin ohjelmien kirjoittaminen selkeästi ja lyhyesti. Java on ns. olio-ohjelmointikieli ja sen aliohjelmia kutsutaan metodeiksi.

Metodi on itsenäinen ohjelman osa, joka suorittaa siinä määritellyt toiminnot. Metodia voidaan kutsua (eli metodin toiminnot voidaan suorittaa) eri puolilla pääohjelmaa tai muita aliohjelmia. Eri ohjelmointikielissä on valmiita metodeja ja metodeja voidaan myös tehdä itse. Processing-ohjelmoinnin setup- ja draw-metodit ovat tämän kurssin harjoituksissa erittäin hyödyllisiä.

setup-metodi

Tavallisista metodeista poiketen setup-metodia ei voida erikseen kutsua. Sen sijaan setup-metodi suoritetaan aina kerran ohjelman alussa. Se on luonteva paikkaa määrittää ohjelman alkuasetukset.

setup-metodin rakenne
void setup() {
size(500, 500);
}

Metodin nimen edessä määritellään, palauttaako metodi jotain. Setup-metodin edessä oleva sana "void" kertoo, että metodi ei palauta mitään. Toisin sanoen kun metodia kutsutaan, ainoastaan sen sisältämät toiminnot suoritetaan.

Metodin jälkeen olevissa suluissa voidaan metodille antaa parametreja. Parametrit ovat tapa välittää tietoa metodille. setup-metodille ei ole parametreja. Parametri-sulkujen jälkeen aukeaa aaltosulut, joiden sisälle kirjoitettavat käskyt suoritetaana aina, kun metodia kutsutaan.

draw-metodi

Kuten setup-metodia, myöskään draw-metodia ei tarvitse erikseen kutsua Processing-ohjelmoinnissa. draw-metodi kutsuu itse itseään jatkuvasti. Toisin sanoen draw-metodin sisältämät käskyt pyörivät silmukassa.

Esimerkkiin 3 liittyvän koodin voit ladata täältä: esimerkki3.pde

Esimerkki 4

2019-09-26T14:09:05+03:00

Esimerkin kuvaus

Tässä esimerkissä tutustumme ehtolauseeseen ja vertailuoperaatioihin.

Vertailuoperaatiot

Vertailuoperaatioilla muodostetaan loogisia lauseita, joilla ohjelman suoritusta ohjataan. Loogiset lauseilla esitetään väitteitä ohjelman tilasta (eli ohjelman muuttujien arvoista). Väitteet voivat olla totta (true) tai ei totta (false).

Javan vertailuoperaatiot ovat:
> suurempi kuin
>= suurempi tai yhtäsuuri kuin
< pienempi kuin
<= pienempi tai yhtäsuuri kuin
== yhtäsuuri kuin
!= erisuuri kuin

Huomaa, että sijoitusoperaatio "=" on eri kuin vertailuoperaatio "==".

Esimerkki
x = 1; // "x saa arvokseen yksi"
x == 1 // "onko x:n arvo yksi"

Ehtolause

Useimmiten vertailuoperaatioita käytetään ehtolauseissa. Ehtolause on muotoa

if (ehto){
//käskyt
}
else
{
//käskyt
}

Lauseen "else"-osaa ei välttämättä tarvita, mutta siinä voidaan kertoa vaihtoehtoiset käskyt, jos ehto on ei totta.

Esimerkki ehtolauseesta
//jos x on pienempi kuin 0, kasvatetaan x:ää yhdellä
if( x < 0 ) {
x = x+1;
}

Ehtolauseeseen liittyvän koodin voit ladata täältä: esimerkki4.pde

Esimerkki 5

2016-03-28T15:06:27+03:00

Esimerkin kuvaus

Tässä esimerkissä näytetään, kuinka Processing-ohjelma kuuntelee näppäimistöä ja hiirtä. Näin voimme tehdä ohjelmia, joita käyttäjät voivat ohjata.

void keyPressed()

Processingissa on näppäimistön kuunteluun tarkoitettu metodi nimeltään keyPressed(). Metodi ei palauta mitään (void) ja sille ei anneta parametreja. Metodin sisällä painettuja näppäimiä tarkkaillaan ehtolauseen avulla. Muutamille näppäimille on varattu avainsanoja, kuten ENTER, LEFT, RIGHT, UP ja DOWN. Viimeksi mainitut tarkoittavat näppäimistön nuolinäppäimiä. Tavanomaisiin näppäimiin viitataan merkeillä (engl. char), kuten esimerkiksi '+', '-' tai 'a'. Alla oleva koodin pätkä ja esimerkin esimerkkikoodi havainnollistavat, kuinka keyPressed-metodi toimii.

keyPressed-metodin rakenne
void keyPressed(){
if (keyCode == LEFT){
x = x - 1;
}
if (keyCode == RIGHT){
x = x +1;
}
if(key == '+'){
r = r+5;
}
if(key == '-'){
r = r-5;
}
}

void mousePressed()

Hiiren nappien kuunteluun on oma metodinsa. Metodi mousePressed() toimii samaan tapaan kuin keyPressed(). Huomaa, että hiiren liikettä voidaan kuunnella mousePressed-metodin ulkopuolella (luonteva paikka on draw-metodi) tarkkailemalla muuttujia mouseX ja mouseY.

mousePressed-metodin rakenne
void mousePressed() {
if (mouseButton == LEFT) {
x = 0;
} else if (mouseButton == RIGHT) {
x = 255;
}
}

Näppäimistön ja hiiren kuunteluun liittyvän koodin voit ladata täältä: esimerkki5.pde

Esimerkki 6

2016-05-16T14:19:39+03:00

Esimerkin kuvaus

Tässä esimerkissä näytetään, kuinka Processing-ohjelmaan voidaan lisätä kuvatiedostoja. Näin voimme piirtää itse tai käyttää valmiita kuvia osana ohjelmaamme.

Kuvat muuttujina

Kuvien käyttäminen on helppoa, kun määritämme ne ensin muuttujiksi. Aiemmin olemme oppineet, että muuttujille täytyy heti ensimmäisenä määrittää tyyppi. Avainsana "int" tarkoittaa kokonaislukua, "float" desimaalilukua ja "String" merkkijonoa. Kuville on varattu avainsana "PImage".

Esimerkki kuvamuuttujasta
PImage pelihahmo;

Kun kuvamuuttuja on määritelty, asetetaan sille arvoksi tiedostopolku, josta kuva löytyy. Helpoimmalla pääsee, kun tallentaa kuvan samaankansioon kuin ohjelman lähdekoodin. Silloin täytyy vain muistaa, millä nimellä on kuvan tallentanut.

Esimerkki tiedoston asettamisesta arvoksi kuvamuuttujaan (kuvan nimi on bird.png)
pelihahmo = loadImage("bird.png");

Luonteva paikka tiedoston asettamisesta muuttujaan on setup-metodi. Siellähän tehdään muutkin ohjelman alkuarvojen asettelut.

Kuvan asettaminen näkyväksi piirtokankaalle

Jotta kuva näkyy piirtokankaalla, on se piirrettävä esiin draw-metodissa. Tavallisen kuvan piirtäminen onnistuu image- käskyllä, joka saa parametreikseen kuvatiedoston (esimerkiksi muuttujana), x-koordinaatin ja y-koordinaatin.

Esimerkki kuvan lisäämisestä piirtokankaalle
image(pelihahmo, x, y);

Kuvatiedosto (tai kuvamuuttuja) voidaan asettaa myös taustakuvaksi. Alla olevassa esimerkissä kuvatiedosto on ensin asetettu taustakuva nimiseen ja PImage tyyppiseen muuttujaan.

Esimerkki kuvan asettamisesta taustakuvaksi
background(taustakuva);

Kuvatiedostojen käyttäyttämiseen liittyvän koodin voit ladata täältä: esimerkki6.pde

Esimerkkiin liittyvät kuvat voit ladata tästä: forrest.jpg ja tästä: bird.png

Koko esimerkin yhdessä zip-kansiossa voit ladata tästä: esimerkki6.zip

Esimerkki 7

2019-10-23T18:06:48+03:00

Esimerkin kuvaus

Tässä esimerkissä tutustutaan olio -ohjelmointiin (engl. Object-oriented programming, OOP). Olio-ohjelma muodostuu kokoelmasta yhteistyössä toimivia olioita, kun taas perinteinen proseduraalinen tietokoneohjelma on lista suoritettavia ohjeita tietokoneelle. Olio-ohjelmointi on kehitetty helpottamaan ja selkeyttämään yhä monimutkaisemmiksi tullutta ohjelmistojen kehittämistä ja ylläpitoa. Olio-ohjelmoinnin yhtenä tavoitteena on tehdä ohjelmistojen laajentamisesta ja ylläpidosta helpompaa. Yksittäinen olio vastaa jostakin itsenäisestä osa-alueesta ohjelman kokonaisuudessa. Suosittuja olio-ohjelmointia tukevia kieliä ovat muun muassa C++, C#, Java, Python ja Visual Basic.

Luokka kuvaa olion

Olion ominaisuudet ja toiminta kuvataan luokassa. Luokka (class) on määritelmä, joka määrittelee tietyn oliojoukon yhteiset piirteet. Luokalla on oma nimi ja sillä voi olla muuttujia ja metodeja. Luokkien nimet kirjoitetaan yleensä isolla alkukirjaimella. Luokalla on myös yksi tai useampi rakentaja (constructor) eli metodi, jota kutsutaan oliota luotaessa. Rakentaja alustaa olion jäsenmuuttujien alkuarvot. Rakentajan nimi on sama kuin luokan nimi.

Esimerkki luokasta
class Ympyra {
color vari = color(204, 102, 0);
int x;
int y;
int d;

Ympyra(int centerX, int centerY, int dimension){
x = centerX;
y = centerY;
d = dimension ;
}

void nayta() {
fill(vari);
ellipse(x,y,d,d);
}
}

Olio on luokan edustaja

Olio on luokan ilmentymä eli instanssi. Yhdestä luokasta voidaan tehdä lukuisia itsenäisiä ja toisistaan riippumattomia olioita. Oliolla on oma nimi ja siihen viitataan nimen kautta. Oliolla on luokassa määritellyt ominaisuudet (muuttujat) ja toiminnat (metodit).

Esimekkki olion luomisesta
Ympyra ympyra1 = new Ympyra(50,300,25);
Ympyra ympyra2 = new Ympyra(750,300,25);

Esimerkki olion käyttämisestä
ympyra1.nayta();

Luokkiin ja olioihin liittyvän esimerkkikoodin voit ladata tästä: esimekki7_olioita.pde