Interaktiivinen muotokuva Processingilla

Sisältö

  1. Yleistä
  2. Osat
  3. Kytkennät
  4. Ohjelmoiminen
  5. Mitä seuraavaksi?

Yleistä

Tässä ohjeessa esitellään kuinka Processing-ohjelmointikielellä voidaan ohjelmoida interaktiivinen hahmo. Processing on erityisesti taiteilijoille suunniteltu ohjelmointikieli, jolla voi helposti luoda erilaisia interaktiivisa teoksia. Katso Processingin-asennusohjeet täältä.

Ohjelmoiminen

Ohjelmoiminen tapahtuu joko Processingin omalla ohjelmalla tai nettiselaimessa toimivalla sketchpad.cc-sivustolla. Sketchpad sivusto ei vaadi asennusta koneille ja sitä voi siis käyttää millä tahansa koneella josta löytyy nettiyhteys. Processing-ohjelman hyviä puolia ovat nopeus ja monipuolisuus. (Katso asennus- ja lataus ohjeet täältä).

 Ympyrän piirtäminen

  1. Ensimmäiseksi processingissä määritellään ikkunan, eli taideteoksen koko pikseleissä. Eli koko teosta voi ajatella koordinaateissa. Esimerkiksi 500,50o kokoisen teoksen ylä-vasen kulma on piste 0,0 ja ala-oikea kulma on 500,500.
  2. Komento size(500,500); asettaa teoksen kooksi 500 kertaa 500 pikseliä. Kokeile painaa play-painiketta ja katso miltä teos näyttää.
  3. Komento background(255,255,255); asettaa taustan värin valkoiseksi. Sulkujen sisällä olevat numerot asettavat taustan RGB (Red, Green, Blue) arvot välillä 0-255 (Sama kuin esimerkiksi photoshopissa) Kun kaikki arvot ovat 255 niin tausta on valkoinen.
  4. Kokeile muuttaa background-komennon arvoja ja katso mitä tapahtuu.
  5. Seuraavaksi piirretään ympyrä. Kirjoita komento Ellipse (250,250,200,200); Ellipsen sulkujen kaksi ensimmäistä arvoa kertovat sijainnin ja kaksi viimeistä koon: ellipse(x-sijainti, y-sijainti, x-koko, y-koko). Näillä asetuksilla piirtyy ympyrä täysin keskelle.
  6. Kokeile muuttaa ympyrän kokoa ja sijaintia!

 Naaman piirtäminen

  1. Piirrä naama ja sinne silmät käyttämällä ellipse-komentoja. Tässä yksi esimerkki naamasta, mutta voit keksiä oman! Muista piirtää myös pupillit: Tarvitse siis neljä ellipse-komentoa piirtämään silmät ja pupillit. Koita saada pupillit silmien keskelle!
  2. Seuraavaksi käytetään line-komentoa, jolla piirretään nenä ja suu. line-komento yksinkertaisesti piirtää viivan, myöhemmin muokkaamme nenää ja suuta vielä paremmaksi. line-komento koostuu neljästä osasta, jotka ovat sulkujen sisällä :(x-aloituspiste, y-aloituspiste, x-lopetuspiste, y-lopetuspiste)
  3. Kirjoita line (250,200,250,300); joka tekee nenän
  4. Komento line (200,350,300,350); puolestaan piirtää suun.
  5. Muokkaa suun ja nenän korkeuksia ja pituuksia haluamaksesi.

 Naaman muokkaaminen

Seuraavaksi lisätään naamaan hieman väri ja muotoa, sitä voidaan tehdä muutamalla eri komennolla: stroke(r,g,b) muokkaa piirretyn viivan väriä. Sulkujen sisällä olevat r,g,b kirjaimet viittaavat punaiseen, vihreään ja siniseen arvoon, joista kukin voi olla jotain välillä 0-255. Komento strokeWeight(x) (-huomaa että Weight kirjoitetaan isolla kirjaimella!) muokkaa piirretyn viivan paksuutta. Muuta x:n tilalle haluamasi paksuus. Lopuksi komento fill(r,g,b) muokkaa piirrettyjen muotojen sisällön väriä.

  1. Kirjoita ennen ensimmäistä ellipse-komentoa (eli ihan alkuun)komento: fill(255,0,0); tämä värjää naaman punaiseksi.
  2. Kokeile painaa play-nappia ja katso mitä tapahtuu!
  3. Huomaatko että myös kaikki ympyrät fill()-komennon jälkeen värittyvät punaiseksi? Kirjoita ensimmäisen ellipse-komennon jälkeen toinen fill-komento: fill(255); tämä värjää muut ympyrät valkoiseksi. Huomaatko eron kahden fill-komennon välillä? Jos haluat vain tehdä harmaan sävyjä, tai mustaa ja valkoista, voit käyttää vain yhtä arvoa kun määrittelet värejä. Tällöin 0 on musta ja 255 on valkoinen.
  4. Seuraavaksi muokataan nenän paksuutta. Kirjoita strokeWeight(30)-komento ennen nenää piirtävää viivaa.
  5. Sitten muokataan suuta. Ennen suuta piirtävää viivaa kirjoita stroke(255,0,0); ja seuraavalle riville strokeWeight(10); Nämä muokkaavat suun viivan punaiseksi ja hieman paksummaksi.

Nyt naaman pitäisi näyttää jo hieman värikkäämmälle. Muokkaa vielä värejä ja paksuuksia, jotta saat tuntumaa koodiin. Huomaa että jokaisen komennon pitää olla omalla rivillään. Jos koodi ei toimi tarkista myös oikeinkirjoitus!

VINKKI: voit myös kommentoida koodia kirjoittamalla kommenttisi eteen kaksi kenoviivaa: // Näin voit esimerkiksi jakaa koodin selkeämmin ja näet helpommin mitä mikin koodirivi tekee. Katso kuva alla:

Vuorovaikutuksen tekeminen

Seuraavaksi teemme kasvoista hieman aktiivisemmat pistämällä ne reagoimaan hiiren (tai kosketuslevyn) liikkeisiin käyttämällä mouseX ja mouseY-komentoja. Samoin kuin teoksemme, myös koko tietokoneen näyttö koostuu pikseleistä X ja Y-akseleilla. mouseX-komento yksinkertaisesti kertoo osoittimen tilan x-akselilla ja mouseY-komento vastaavan y-akselilla. Voimme käyttää näitä arvoja ennaltamääriteltyjen arvojen sijasta tuomalla interaktiivisuutta teokseen.

Ennenkuin aloitamme joudumme hieman muokkaamaan ohjelmamme rakennetta jakamalla sen kahteen osaan void setup-asetusosioon ja void draw-ohjelma osioon. Tätä voidaan ajatella hieman samoin kuin tietokonetta: Kun käynnistämme tietokoneen niin ensin kuulemme käynnistysäänen ja tietokone alkaa lataamaan käyttöjärjestelmää ja konetta valmiiksi eli se käy setup-ohjelmaa läpi. Kun kaikki on valmista tietokone siirtyy ajamaan käyttöjärjestelmä-ohjelmaa, eli Processingin tapauksessa void draw-ohjelmaa. Tuo draw-ohjelma on päällä niin kauan kunnes suljemme ohjelman, läpikäyden kirjoittamaamme koodia rivi riviltä loopissa aina uudestaan ja uudestaan.

1. Ensin siirrämme tarvittavat asetus-komennot (tässä tapauksessa teoksen koko ja taustan väri)  void setup-kohtaan. Koodin pitäisi näyttää tältä:

 void setup(){
  size (500, 500);
background(255);
}

 

2. Seuraavaksi suljemme lopun koodin void draw-funktion sisälle. Silloin koko koodin pitäisi näyttää suunnilleen tältä, riippuen toki millaisen hahmon olet tehnyt:

void setup(){
  size (500, 500);
background(255);
}

void draw(){
//pää
stroke(0);
strokeWeight(1);
fill(255,100,100);


//silmät
ellipse(250, 250, 300, 400);
fill(255);
ellipse(200, 150, 50, 100);
ellipse(300, 150, 50, 100);

//pupillit
strokeWeight(5);
ellipse(200,150, 10, 10);
ellipse(300,150, 10, 10);

//nenä
strokeWeight(30);
line (250,200,250,300);

//suu
strokeWeight(10);
stroke(255,0,0);
line (200,370,250,350);
}

3. Kokeile miltä piirros näyttää nyt. Jos kaikki meni oikein, niin piiroksen pitäisi näyttää samalle kuin äsken. Jos ohjelma ei toimi tarkista kirjoitusvirheet ja huomaa että sekä setup ja draw-funktio alkavat ja loppuvat aaltosulkuihin, löydät ne Windows-koneessa AltGr + 6 tai 0-näppäinyhdistelmällä ja Macissa taas SHIFT+COMMAND+8 tai 9-näppäinyhdistelmällä.
4. Seuraavaksi animoimme pupillit liikkumaan hiiren mukaan. Etsi ellipse-komento joka määrittää pupillien pienet ympyrät.
5. ellipse-komennon kaksi ensimmäistä arvoa määrittävät pupillin sijainnin. Kokeillaan ensin muokata silmiä liikkumaan x-akselilla. Kirjoita ellipsen ensimmäisen arvon sijaan mouseX-komento ja katso mitä tapahtuu!
6. Nyt silmä liikkuu villisti ulos koko päästä! Saadaksemme sen liikkumaan hieman hillitymmin voimme pyytää processingia tekemään pienen laskutoimituksen puolestamme. Kirjoita ensimmäinen ellipse-komennon arvo takaisin siksi mikä se oli ja sen jälkeen, ennen pilkkua +(mouseX/12). Tämä lisää silmän arvoon hiiren x-akselin liikkeen jaettuna kahdellatoista. Tämä vähentää liikettä huomattavasti. Kokeile!
7. Nyt haluamme hieman viela viilata tuota liikettä niin että se ei mene yksipuoliseksi. Vähennä ellipsen ensimmäistä arvoa hieman, ehkä 20-30 pikseliä kunnes tuo pupilli liikkuu sopivasti.
8. Sitten teemme saman seuraavalle pupillille.
9. Tämän jälkeen lisätään Y-akselin liike. Löydä ellipse-komennon toinen arvo, vähennä siitä 20-30 pikseliä ja kirjoita +(mouseY/10).
10. Toista sama toiselle pupillille ja säädä arvot sopiviksi! Voit kokeilla myös muuttaa jakolaskua.
11. Seuraavaksi pistämme vielä suun liikkumaan. Kokeile lisätä suuta piirtävän line-komennon jotakin arvoa kirjoittamalla +(mouseX/10) tai vaikka -(mouseY/10).
12. Kokeile eri kohtia ja lisää suuhun haluamasi määrä animaatiota!
13. Viimeiseksi muokataan naaman väri muuttumaan x ja y-akselin mukaan. Muokkaa fill-arvoiksi (mouseX,mouseY,mouseX+150); ja katso mitä tapahtuu. Kokeile rohkeasti muokata noita arvoja haluamiksesi. Muista myös että voit käyttää matemaattisia yhtälöitä arvojen muokkaamiseen, kuten teimme edellä.

Tässä yksi esimerkki koodista, voit kopioida sen ja muokata sitä!

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

void draw() {
 background(255);

 //naama
 stroke(0);
 strokeWeight(1);
 fill(pmouseX, pmouseX-100, pmouseX-200);
 ellipse(250, 250, 300+(pmouseY/2), 400+(pmouseX/2));

 //silmät
 fill(255);
 ellipse(200, 150, 50+(pmouseY/6), 120-(pmouseX/10));
 ellipse(300, 150, 50+(pmouseY/6), 120-(pmouseX/10));

 //pupillit
 strokeWeight(5);
 ellipse(180+(mouseX/12), 120+(mouseY/10), 10, 10);
 ellipse(280+(mouseX/12), 120+(mouseY/10), 10, 10);

 //nenä
 strokeWeight(30);
 line (250, 200, 250, 300);

 //suu
 strokeWeight(10);
 stroke(255, 0, 0);
 line (200, 370-(mouseY/10), 250, 350);
 line (250, 350, 300, 370-(mouseY/10));
}

 

Mitä seuraavaksi?

Tutustu Processingin-sanastoon täällä: https://processing.org/reference/ ja tutki esimerkiksi Pmouse tai mousepressed-komentoja. Mitä voisit saada niillä tehtyä naama-ohjelmassasi?