Kuvataide ja ohjelmointi

Johdanto

Kurssin ensimmäisessä luvussa harjoitus on seuraavanlainen:

  • Idea: Asenna oikea ohjelmointiympäristö ja kokeile sitä nopeasti. Seuraavassa luvussa pääsemme jo hieman haaveilemaan siitä, mihin ympäristöä voisi käyttää.

Jos et ole asennusta vielä tehnyt, lataa ensin tällä kurssilla käytettävä Processing-ympäristö osoitteessa https://processing.org/download/

Tarkemmat asennusohjeet löydät pdf-tiedostona tästä klikkaamalla. Jos käytät koulun tietokonetta etkä pysty asentamaan ohjelmia itse, voit toimita yllä linkatun pdf-tiedoston koulusi tietohallinnolle. Processingia ei valitettavasti saa vielä asennettua Chromebookeille, mutta jos sinulla on käytössäsi Chromebook tai et millään saa ohjelmaa asennettua, voit kokeilla visuaalista ohjelmointia myös selainpohjaisessa Open Processing-ympäristössä. Ohjeet tähän löydät myös yllä linkatuista asennusohjeista.


Processingin käyttöliittymä

Alla on esitelty Processing-ympäristön osat.

processingin käyttöliittymä

1. Editori. Tähän kirjoitetaan kaikki koodi. 2. Message area. Tänne ilmestyy ohjelman lähettämät viestit ja virheilmoitukset. Virheilmoitukset näkyvät punaisena paneelina, kuten kuvassa. Kuvan virheilmoitus johtuu siitä, että ellipse-koodirivin perästä puuttuu puolipiste (";").
3. Run ja Stop -painikkeet. Ohjelma suoritetaan Run-napista ja pysäytetään Stop-napista.
4. Valikot. File-valikosta voit esimerkiksi tallentaa ohjelmasi ja löydät sieltä myös paljon kiinnostavia valmiita esimerkkejä!


Ensimmäiset muodot

Vaihe 1
Avaa Processing ohjelma, ja kopioi editoriin alla oleva koodi. Paina sitten vasemman yläkulman Run-nappia. Erilliseen ikkunaan pitäisi ilmestyä pieni valkoinen ympyrä.

Onneksi olkoon ensimmäisestä ohjelmastasi! Jos ympyrää ei ilmesty, ei hätää. Tarkista, että kaikki kaarisulut, sulut ja puolipiste ovat oikeilla paikoillaan. Tarkista myös, että olet kirjoittanut komennot pienellä, sillä jos käytät väärän kokoisia kirjaimia, tietokone ei ymmärrä komentoja. Jos vieläkään ei onnista, voit kysyä apua (ks. tämän tehtävän Johdanto-sivu).

void setup(){

}

void draw(){
  ellipse(50, 50, 20, 20);
}

Mutta miten kopioimasi koodi oikeastaan muuntui valkoiseksi ympyräksi? Käyttämäsi ohjelma, Processing IDE, osaa tuottaa visuaalisia asioita Processing-ohjelmointikielen komentojen pohjalta. Yksinkertaisin Processing-kielen piirtokomento on point, joka piirtää yhden pienen pisteen määritettyyn kohtaan piirtoikkunaa. Kopioimassasi koodissa on ellipse-komento, jonka nimestäkin voi päätellä, että se piirsi ruudussa näkyvän ympyrän. Ellipse-komento on hieman korkeamman tason komento kuin point, sillä se piirtää joukon pisteitä pyöreään muotoon - näin meidän ei tarvitse pohtia jokaisen pisteen paikkaa erikseen.

Kopioimasi koodi koostuu setup- ja draw-osasta. Kun ohjelma suoritetaan, setup-osan komennot käydään läpi kerran ja sen jälkeen draw-osaa käydään läpi yhä uudestaan ja uudestaan. Processing on piirtämiseen suunniteltu ohjelma, ja varsinainen piirtämiseen liittyvät toistuvat komennot kirjoitetaan  juuri draw-osassa. Huomaa, että koodin setup-osa on vielä täysin tyhjä!


Vaihe 2
Lisää nyt ohjelman setup-osaan size-komento, joka muuttaa piirtoikkunasi kokoa. Piirtoikkunan koko asetetaan vain kerran aivan ohjelman alussa, ja siksi size-komento kirjoitetaan setup-osaan. Suorita ohjelma Run-napista.
void setup(){
   size(500, 500);
}

void draw(){
   ellipse(50, 50, 20, 20);
}

Size-komento asetti siis piirtoikkunasi koon, joka nyt on 500 x 500 pikseliä. Voit halutessasi muuttaa piirtoikkunan kokoa.

Tietokone piirtää tarkemmin ja nopeammin kuin ihminen, mutta on huono improvisoimaan. Se tarvitsee alusta asti tarkat ohjeet sille, minkälainen piirrettävän asian tulee olla. Yllä käytetty "ellipse" on komennon nimi ja sitä sulkujen sisällä seuraavat numerot määrittelevät mihin kohtaan ja minkälainen ellipsi piirretään. Näitä numeroita kutsutaan ohjelmoinnissa parametreiksi.


Koordinaatisto

Vaihe 3
Muuta ellipse-komennon neljää numeroa (parametriä) yksi kerrallaan ja koita päätellä, miten eri numerot vaikuttavat ellipsiin.  Jos ellipsi katoaa kokonaan piirtoikkunasta, muuta numeroita kohti alkuperäistä arvoa. Muista suorittaa ohjelma Run-napista aina sen jälkeen, kun olet tehnyt muutoksia koodiin. Muuten muutokset eivät päivity piirtoikkunaan.

Ensimmäinen numero vaikuttaa ellipsin vaakasuuntaiseen paikkaan, seuraava pystysuuntaiseen paikkaan, kolmas leveyteen ja neljäs korkeuteen. Alla olevassa esimerkissä voit hiirtäsi liikuttamalla nähdä hiiren kulloisetkin koordinaatit 500 x 500 koordinaatistossa. Vasen yläkulma on siis piste (0, 0) ja oikea alakulma piste (500, 500).


Satunnaiset sijainnit

Ohjelman draw-osaa suoritetaan siis uudestaan ja uudestaan ohjelman ollessa käynnissä. Ohjelmassasi ei kuitenkaan ole liikettä, koska draw-osassa on vain yksi komento, joka piirtää ellipsin aina samaan kohtaan. Jos ellipsi piirrettäisiin aina hieman eri kohtaan, ruutuun ilmestyisi jatkuvasti eri paikoissa olevia palluroita. Mutta miten voisimme saada tällaisia muutoksia aikaan?

Vaihe 4
Korvaa ellipse-komennon ensimmäinen numero random-komennolla alla olevalla tavalla. Suorita ohjelma. Koita pohtia, mitä random-komento tekee muuttamalla sille annettua kahta parametria, jotka alla olevassa ohjelmassa ovat “0” ja “500”.
 void setup(){
   size(500, 500);
}

void draw(){
   ellipse(random(0, 500), 50, 20, 20);
}

Random-komento arpoo luvun tietyltä väliltä, esimerkiksi väliltä 0-500, ja äskeisessä esimerkissä tätä arvottua lukua käytettiin ellipsin vaakasuuntaisena sijaintina. Toisin sanoen aina kun komento suoritetaan uudestaan, ellipsille arvotaan uusi vaakasuuntainen paikka. Draw-osaa suoritetaan satoja kertoja sekunnissa, mistä johtuen pallot lisääntyvät hyvin nopeasti ruudulla!

Tehtävä lähenee loppuaan, joten jaksa vielä viimeiset rutistukset! 


Väriä mukaan

Alla olevassa esimerkissä mukaan on lisätty täyttöväriä vaihtava fill-komento, jonka sulkujen sisältä löydät kolme parametria

Vaihe 5
Vaihda fill-komennon sisällä olevia parametrejä, jotka esimerkissä ovat 125, 200 ja 30.  Nämä määrittävät täyttövärin punaisuuden, vihreyden ja sinisyyden määrän. Arvojen tulee olla väliltä 0-255. Valitse lopulta väri, joka miellyttää sinua eniten. Voit miettiä väriä sen kannalta, mitä ruudulle ilmestyvät muodot voisivat esittää tai ilmaista.
Extra
RGB-väreihin voit tutustua myös Processing IDE:n värinvalintatyökalulla (Tools -> Color Selector)
 void setup(){
   size(500, 500);
}

void draw(){
   fill(125, 200, 30);
   ellipse(random(0, 500), 50, 20, 20);
}
Pohdittavaksi
Tutustu RGB-värimallin ideaan täällä: https://en.wikipedia.org/wiki/RGB_color_model Miten RGB-värimallin logiikka eroaa esimerkiksi maalien sekoittamisesta keskenään? Mitä muita tietokoneympäristössä käytettäviä värimalleja tunnet?

Viimeistely ja ekstra

Vaihe 6

Korvaa myös ellipse-komennon toinen parametri random-komennolla alla olevaan tapaan. Voit halutessasi myös vaihtaa ellipsin kokoa muokkaamalla elllipse-komennon kahta viimeistä numeroa. 

Pohdi, mitä teoksesi voisi esittää. Nimeä se kirjoittamalla ylälaitaan // ja tämän perään teoksen nimi, kuten alla olevassa koodiesimerkissä. Voit kirjoittaa koodin sekaan kommentteja ja muistiinpanoja tällä tapaa - tietokone hyppii // merkinnällä alkavien rivien yli.

Extra

Jos haluat, voit käyttää random-komentoa myös fill-komennon sisällä - tällöin ohjelma arpoo ellipsin sijainnin lisäksi myös värejä!

Ellipse-komento on mahdollista korvata komennolla rect, joka piirtää pyöreiden asioiden sijaan suorakulmioita. Lisätietoja rect-komennon käytöstä täällä.

// Lumisadetta
 
void setup(){
   size(500, 500);
}

void draw(){
   fill(255, 255, 255);
   ellipse(random(0, 500), random(0, 500), 8, 8);
}