Aloitetaan ohjelmointi piirtämällä Processingilla yksinkertainen muoto: ympyrä. Avaa Processing ja ruudullasi pitäsi näkyä tyhjä Processing-luonnos eli sketch.

Ympyrän piirtäminen

Kokeile piirtää kaksi ympyrää käyttäen seuraavia komentoja:

ellipse(40, 45, 50, 50);
ellipse(60, 50, 20, 20);

Kirjoita nämä kaksi käskyä editoriin, molemmat omille riveilleen, ja paina Run-nappia.

Kokeile nyt vaihtaa kahden käskyn paikkaa (pikanäppäimet leikkaa ja liitä: ctrl+x ja ctrl+v). Mitä tapahtuu ja miksi?

Ohjelmakoodi koostuu peräkkäin suoritettavista käskyistä. Rivillä 1 suoritettava käsky suoritetaan siis ennen rivin 2 käskyä. Jos käskyt piirtävät samaan kohtaan, jälkimmäinen käsky piirtää edellisen päälle.

Processing reference

Mistä ohjelmoija voi tietää, mikä käsky tekee mitäkin? Eli mistä käsky 'ellipse' on peräisin ja mitä sulkujen sisään tulevat numerot tarkoittavat? Tärkein tietolähdeja apuväline tähän on Processing.org -sivustolta löytyvä manuaali: https://processing.org/reference/. Se sisältää kaikki processing-kielen käskyt, joita käyttämällä ja yhdistelemällä voit rakentaa haluamasi ohjelman. Linkki kannattaa tallentaa selaimeesi - tulet tarvitsemaan sitä paljon tämän kurssin aikana!

Käskyt on ryhmitelty sivuilla aihealueiden mukaan, jotta niiden löytäminen olisi helpompaa. Voit myös hakea jotakin tiettyä käskyä sivulta painamalla ctrl+f.

Mistä käsky koostuu?

Tutki tarkemmin yksittäistä käskyä:

ellipse(40, 45, 50, 50);

Käskyssä kutsutaan ellipse-nimistä metodia (method). Metodille annetaan parametreiksi (parameter) luvut 40, 45, 50 ja 50. Mitä luvut tarkoittavat? Mitä arvoja sinun tulee asettaa parametreiksi, jotta voit piirtää ympyrän hieman eri kokoisena ja eri sijaintiin? Avaa Processing-referencestä ellipse() -sivu ja selvitä, mitkä käskyn parametreista määrittävät ympyrän koon, ja mitkä sijainnin.

Sivulta näkee, että käskylle annetaan neljä arvoa: sijainnin x-koordinaatti, sijainnin y-koordinaatti, ympyrän leveys ja ympyrän korkeus.

ellipse(x, y, leveys, korkeus);

Kokeile nyt laittaa x:n, y:n, leveyden ja korkeuden tilalle erilaisia arvoja ja käynnistä ohjelmasi uudestaan. Mitä tapahtuu jos leveys ja korkeus ovat erisuuruisia?

Jos ikkuna käy ahtaaksi, voit suurentaa sitä size-käskyllä. Laita size-käsky ohjelmasi ensimmäiseksi käskyksi.

size(500, 500);

Koordinaatit

Olet mahdollisesti tottunut matematiikassa koordinaatistoon, jonka origo on keskellä ja y-akseli kasvaa yläspäin liikuttaessa. Ohjelmoidessa ruudun koordinaatisto ilmaistaan usein siten, että origo on vasemmassa ylänurkassa. X-akseli kasvaa tuttuun tapaan oikealle mentäessä, mutta y-akseli kasvaa alaspäin liikuttaessa.

Tämä Processingilla tehty pieni ohjelma näyttää hiiren kulloisenkin sijainnin x- ja y-koordinaatit. Voit käyttää tätä apuna suunnitellessasi ohjelmiasi.

Ohjelmointiharjoitus

Tee seuraavaksi alla oleva ohjelmointiharjoitus.

Harjoitus

Piirrä ellipse-metodilla ympyrä, jonka läpimitta on vähintään 200. Pidä huoli, että ympyrä mahtuu kokonaisuudessaan ikkunaan. Käytä size-metodia ikkunan koon määrittämiseksi ja sijoita ympyrä siten, että se mahtuu reunojen sisäpuolelle.