Close menu
Close menu

Tunnistaudu

Kirjaudu

Etkö ole vielä jäsen?

Liity jäseneksi
Etusivu / Materiaalit / Taidetta ohjelmoimalla / 0. Johdanto / Processing-ohjelmointi

Processing-ohjelmointi

Processing oli alunperin oikeastaan Java-kirjasto, joka keitettiin MIT-medialaboratoriossa Design By Numbers-projektin myötä, jotta taiteilijat saisivat helpon tavan koodata vuorovaikutteista taidetta ohjelmoimalla. Tästä projektista syntyi uusi ohjelmointikieli Processing, joka käyttää taustalla Javan kääntäjää ja Javan kirjastoja. Processing-kieli on varsinainen kameleontti, koska nykyään Java-kääntäjän tilalla voi olla JavaScript-kääntäjä tai Python-kääntäjä. Koska Java ja JavaScript toimivat kaikilla alustoilla, niin myös Processing toimii myös kaikilla alustoilla. iPAD:iin ja Android-tabletille on saatavissa omat sovelmat.

Voit ladata PC/Mac/Linux editorin osoitteessa: https://processing.org/

Asentaminen on helppoa. Lataat vain zip-paketin ja purat sen, johonkin kansioon (Esimerkiksi: Tiedostot-kansioon). Etsit kansiosta processing.exe tiedoston, josta voit tehdä pikakuvakkeen ja raahaat vain pikakuvakkeen haluamaasi paikkaan. Kun käynnistät editori-ohjelman, niin se näyttää tältä.

Kirjoita sinne seuraava koodi.

size(400,400);
background(0,0,255);
fill(0,255,0);
rect(100,100,200,200);
fill(255,255,0);
textSize(50);
text("MOI",150,200);

Ja aja ohjelma painamalla ympyrän näköistä painiketta, jonka sisällä on kolmio. Lopputulos on halutunlainen.

Koodi on hyvin selkeää. Ensimmäisellä rivillä asetetaan ikkunan koko. Toisella rivillä asetetaan taustaväri RGB väreillä. Arvo (0,0,255) tarkoittaa (Red, Green, Blue). Koska Blue on maksimissa, niin taustaväri on sininen. Kolmannella rivillä asetetaan täyttöväri vihreäksi RGB-arvoilla. Jonka jälkeen rect-komennolla piirretään vihreä suorakulmio, jossa neliön vasen-ylänurkkapiste on kohdassa 100 ja 100. Eli ikkunan vasemmasta-yläkulmasta 100 askelta oikealle ja 100 askelta alaspäin. Kolmas asrvo on 200, joka on neliön levys ja neljäas arvo on myös 200, joka on neliön korkeus. Tämän jälkeen asetetaan täyttöväriksi keltainen RGB = (255,255,0) ja tekstin kooksi 50. Lopuksi tulostetaan MOI-tekstin 150 asekelta oikealle ja 200 askelta alaspäin lukien ikkunan vasemmasta-ylänurkasta. Tekstin aloituskohta on tekstin vasemmassa-alanurkassa.

Vaikka tässä komennot kirjoitettiin peräkkäin, niin Processing on hyvin monipuolinen ohjelmointikieli. Se tukee funktioita ja olioita. Siksi koodi yleensä kirjoitetaan funktio-muotoon.

void setup () {
     size(400,400);
}
void draw ()  {
     background(0,0,255);
     fill(0,255,0);
     rect(100,100,200,200);
     fill(255,255,0);
     textSize(50);
     text("MOI",150,200);
}

Voit ajatella, että setup-funktio on ns. asetus-funktio, johon laitetaan sellaiset asetukset ja komennot, jotka pysyvät ohjelman suorituksen ajan samana, koska setup-funktio suoritetaan vain kerran. Tällainen asetus on esimerkiksi ikkunan koko. Vastaavasti draw-funktio on ns. pääohjelma, joka on ikuisessa silmukassa. Laita tähän komennot, jotka muuttuvat ohjelman suorituksen aikana. Kaarisulkeilla ilmaistaan funktion aloitus ja lopetuskohtaa. Sana void tarkoittaa funktiota, joka ei palauta mitään arvoa, vaan että se suoritetaan itsenäisenä.

Processing-ohjelmasta löytyy myös web-selaimessa toimivia versioita. Voi kokeilla koodausta esimerkiksi seuraavissa paikoissa.

Selaimessa toimiva editorit yleensä käyttävät Processing-ohjelmasta kehitettyä JavaScript-kirjastoa: http://processingjs.org/

Huomioita

  • Sopii aloittelijalle. Koodi selkeää ja yksikertaista.
  • Hyvä yhteensopivuus ja laajennettavuus.
  • Aktiviinen yhteisö. Ohjeita ja esimerkkejä on löydettävissä helposti.
  • Tulevaisuus näyttää lupaavalta, koska Processing-ohjelmat pyörivät Java-, JavaScript- ja Python-kääntäjillä. Näitä kieliä voi alkaa opiskella rinnan.