Kuvataide ja ohjelmointi

Johdanto

Tähän mennessä tällä polulla on ohjattu visualisoimaan omia haaveita ja havaintoja ohjelmoimalla. Ohjelmoidessa kaikkea ei kuitenkaan tarvitse keksiä itse. Olet tähän mennessä saattanut käyttää tukenasi tämän oppimateriaalin lisäksi esimerkiksi muiden opettajien ideoita sekä Processing reference -sivustoa. Ohjelmoijan onkin tärkeää oppia hyödyntämään lähiyhteisön ja internetin voimavaroja. Voimavarat voivat toisinaan olla valmista koodia, toisinaan taas esimerkiksi kuvallisia tai tekstuaalisia aineistoja.

• Idea: Tee oma runokone teksti- ja kuva-aineistoja hyödyntäen. Etsi ensin työllesi taustan taidemuseoiden avoimista arkistoista. Sitten lisää mukaan valitsemiasi sanoja, joita arvotaan taustan päälle. Näin samalla myös häkätään museoituja taideteoksia uuteen uskoon, uutta ja vanhaa kunnioittavasti yhdistäen.

Avoimia arkistoja

• Yhdysvaltalaisen Metropolitan Museum of Artin aineiston etu on sen pökerryttävä laajuus, sillä mukana on teoksia ympäri maailmaa tuhansien vuosien ajalta. Iso osa varsinkin vanhemmista teoksista on myös julkaistu avoimella CC0-lisenssillä, joten niiden muokkaaminen ja julkaisukin on täysin vapaata!

• Europeanaan on koottu Eurooppalaista kulttuuriperintöä.

• Suomessa  Kansallinen digitaalinen kirjasto -hankkeessa on koottu paljon aineistoa Finna-palveluun. Finnasta löytyy kuvallisten aineistojen lisäksi esimerkiksi kirjoja, lehtiä ja äänitteitä. 

Vaihe 2

Etsi jokin sinua kiinnostava graafinen teos, joka voisi sopia runogeneraattorisi taustaksi. Teoksesta pitäisi siis löytyä väljempiä kohtia, johon sanat voisivat ilmestyä.

Tarkista teoksen lisenssi. Alla on näytetty, miten näet teoksen lisenssin Metropolitan Museum Of Artin akistossa.

Lataa kuva tietokoneellesi. Nimeä kuva myöhempää käyttöä varten jollain yksinkertaisella tavalla, esimerkiksi "tausta".

Tallenna linkki teokseen itsellesi johonkin. Tarvitset sitä osana työsi dokumentointia.

Kuvan lisääminen

Olet aiemmin kuvataiteen ja ohjelmoinnin polulla luonut erilaisia maisemia muoto kerrallaan. Tällä tavoin voit vaihtaa muotojen värejä ja kokoa dynaamisesti ja luoda jotain elävää. Joskus on kuitenkin paikallaan lisätä valmis kuvatiedosto työhösi. Tämä mahdollistaa myös itse tehtyjen maalausten, valokuvien ja piirrustusten käytön osana digitaalisia teoksiasi. 

Vaihe 3

Avaa Processingissa tyhjä ikkuna (File -> New), ja tallenna työsi jollain nimellä (File -> Save As), esim. "runogeneraattori".
Tallennuksen oletussijaintina on luultavasti Processingin Sketchbook, jonne luotiin nyt kansio työsi nimellä. Löydät Sketchbookin sijainnin kohdasta File -> Preferences -> Sketchbook Location.

Jotta kuvan tuominen osaksi Processing-työtä on mahdollista, täytyy meidän ensin siirtää valitsemasi kuva Processingin ohjelmakansioon. Klikkaa Sketch -> Add File ja etsi lataamasi kuva.  Processing loi työsi kansioon Data-kansion, ja kopioi kuvan sinne. Kuvan ei vielä ole tarkoitus ilmestyä ruudulle, koska emme ole käyttäneet mitään ohjelmointikomentoja. Tätä pääset tekemään seuraavaksi.

Vaihe 4

Lisää kuva ohjelmasi taustaksi. Tämä hoituu kolmella komennolla, jotka löydät sivun alalaidan ohjelmasta.

Aivan ylälaidassa sinun tulee luoda PImage-tyypin objekti ja nimetä se.

Setup-osassa sinun pitää ladata tähän objektiin aiemmin valitsemasi kuva loadImage-komennolla. Huom: tarkista kuvatiedoston nimen kirjoitusasu ja kirjoita koodissa nimen perään myös tiedostotyyppi (esim. .jpg tai .png). Tiedostotyypin löydät Windowsissa alla  olevassa animaatiossa näytetyllä tavalla. Nimi pitää kirjoittaa tismalleen oikein, jotta koodi toimii.

Setup-osassa kuva lisätään piirtoikkunaan image-komennolla.

// Luodaan PImage  (Processing Image) -tyypin objekti ja annetaan sen nimeksi "tausta"
PImage tausta;

void setup() {
  size(800, 800);         
  // Tarkista kuvatiedoston nimi koneellasi ja kirjoita se tismalleen samalla tavalla
  tausta = loadImage("tausta.jpg");
  // Lisätään kuva piirtoikkunaan. Kuvan vasen yläkulma on pisteessä (0, 0) eli piirtoikkunan vasemmassa yläkulmassa.
  image(tausta, 0, 0); 
}

void draw() {
  // Draw-osa on toistaiseksi tyhjä. 
  // Kun ohjelma käynnistetään, suoritetaan siis vain setupissa olevat komennot kerran läpi.
}

Kuvan koon säätäminen

Kuva on todennäköisesti liian suuri eikä sovi piirtoikkunaasi. Jos kuva on liian pieni, kannattaa valita toinen kuva, sillä kuvan suurentaminen heikentää sen laatua. 

Tekstiä mukaan!

PImage tausta;

void setup() {
  size(586, 774);
  loadImage("tausta.jpg");
  image(tausta, 0, 0);
  // Tekstin kooksi 40.
  textSize(40);
}

void draw() {
  
}
// mouseClicked-osan komennot suoritetaan aina kerran silloin, kun hiirtä klikataan.
void mouseClicked(){
  // Vaihdetaan tekstin väri valkoiseksi. 'fill(255)' ajaa saman asian.
  fill(255, 255, 255);
  // Lisätään teksti "Moi!" satunnaiseen kohtaan piirtoikkunaa. Koordinaatit osoittavat tekstilaatikon vasemman yläkulman.
  text("Moi!", random(0, 586), random(0, 774));
}

    PImage tausta;

    void setup() {
      size(586, 774);
      tausta = loadImage("tausta.jpg");
      image(tausta, 0, 0);
      textSize(40);
    }

    void draw() {
      
    }

    void mouseClicked(){
      // Lisätään kaiken aiemman päälle aina uusi kuva, kun hiirtä klikataan.
      image(tausta, 0, 0);
      fill(255, 255, 255);
      text("Moi!", random(0, 586), random(0, 774));
    }

Sanalistan muodostaminen

Seuraavaksi käyttöön otetaan listat (Array). Muodostamme sanoista listan, minkä jälkeen voimme arpoa listasta sanoja ja lisätä niitä piirtoikkunaan. Listoja voisi sanojen lisäksi tehdä myös esimerkiksi numeroista tai kuvista. Listat ovat osa kaikenlaista ohjelmointia ja datankäsittelyä.

Vaikka et ymmärtäisikään listojen toimintaa läpikotaisin tämän harjoituksen aikana, sen ei tarvitse hidastaa sinua visiosi toteuttamisessa. Valmiin koodin hyödyntäminen on osa häkkäämisen henkeä, ja tärkeintä on, että seuraavan kerran ohjelmoidessasi tiedät ainakin hieman enemmän aiheesta kuin aiemmin. Kysy silti, jos asiat tuntuvat liian epäselviltä!

PImage tausta;
// Luodaan merkkijonoista (String) koostuva lista 'subjektit' ja tallennetaan siihen joukko sanoja.
// Sanat tallennetaan listaan erillisinä paketteina. 
// Esimerkiksi "hän" on nyt subjektit-listan ensimmäinen sana, ja siihen voi viitata kirjoittamalla subjektit[0]. 
// Vastaavasti "lapsi" on subjektit[1] ja "kissa" subjektit[2]. 
String[] subjektit = {"hän", "lapsi", "kissa", "kuu", "aurinko", "päivä", "ilta", "ilmastonmuutos", "historia"};

void setup() {
  size(586, 774);
  tausta = loadImage("tausta.jpg");
  image(tausta, 0, 0);
  textSize(40);
}

void draw() {
      
}

void mouseClicked(){               
  fill(255, 255, 255);     
  // Luodaan kokonaislukuuttuja 'sub' ja tallennetaan siihen satunnaisluku, joka on maksimissaan sanojen määrä subjektit-listassa. 
  // Satunnaisluku on desimaalimuotoinen, ja siitä tehdään kokonaisluku int-komennolla.
  int sub = int(random(subjektit.length));
  // Valitaan sub-muuttujan avulla satunnainen sana listasta ja lisätään se kohtaan (400, 400)
  text(subjektit[sub], 400, 400);
}

Sanoista lauseiksi

PImage tausta;
String[] subjektit = {"hän", "lapsi", "kissa", "kuu", "aurinko", "päivä", "ilta", "ilmastonmuutos", "historia"};
// Luodaan samalla periaatteella kaksi muuta sanalistaa, verbit ja adverbit.
String[] verbit = {"juoksee", "roikkuu", "pohtii", "hamuaa", "kaipaa", "etsii", "löytää", "muistaa", "hyppii", "oppii"};
String[] adverbit = {"kauniisti", "etsien", "jo", "yhä", "lopullisesti", "raskaasti", "vauhdilla", "määrätietoisesti", "empien"};

void setup() {
  size(586, 774);
  tausta = loadImage("tausta.jpg");
  image(tausta, 0, 0);
  textSize(40);
}

void draw() {
      
}

void mouseClicked(){   
  image(tausta, 0, 0);     
  // Asetetaan tekstiä varten täyttöväriksi valkoinen.        
  fill(255, 255, 255);     
  int sub = int(random(subjektit.length));
  text(subjektit[sub], 400, 400);
  // Arvotaan myös verbeistä ja adverbeistä yksi sana ruutuun. 
  // Verbi ilmestyy kohtaan (400, 450) ja adverbi sen alle kohtaan (400, 500).
  int ver = int(random(verbit.length));
  text(verbit[ver], 400, 450);
  int adv = int(random(adverbit.length)); 
  text(adverbit[adv], 400, 500);
}

Viimeistely ja ekstra

Joskus on kätevää ottaa kuvakaappauksia omista töistä. Tässä ohje! 

Vaihe 10

Lisää mouseClicked-metodin loppuun  komento saveFrame, joka tallentaa kuvakaappauksen työsi kansioon aina hiirtä klikattaessa. Löydät tallennetut kuvat tallentamasi Processing-työn kansiosta. Jos et ole varma missä työsi kansio on, katso Sketchbookin sijainti kohdasta File -> Preferences -> Sketchbook location.

tint(255, 5);        // Kuvan piirtoväri valkoinen (neutraali), peittävyysarvo 5.
image(tausta, 0, 0);

Extra: Tekoäly ja tekstin tuottaminen

Tässä projektissa olet arponut sanoja listoista ja asettanut niitä peräkkäin. Ylempänä linkatun koodin avulla voit muodostaa listoja jonkin valmiin tekstiaineiston sanoista. Vaikka tekisitkin tämän, on edessäsi kuitenkin seuraavanlaisia haasteita.

• Miten tietokone voisi tunnistaa, onko sana substantiivi, verbi, pronomini vai adjektiivi?
• Miten tietokone voisi tunnistaa, miten sanat lausutaan ja mitkä sanat rimmaavat keskenään?
• Voisiko tietokone osata tulkita sanojen välittämää tunnetta ja esimerkiksi vaihtaa tekstin väriä tunnelman mukaan?
• Voisiko tietokone tarvittaessa myös taivuttaa sanoja?

Yllä listatut asiat ovat ohjelmoinnin näkökulmasta jo huomattavasti mutkikkaampia kuin tämän projektin aikana ratkotut haasteet. Haasteita ei oikeastaan kannata lähteä ratkomaan itse tyhjästä alkaen. Huomattavasti järkevämpää on valita jokin valmis kirjasto, jossa on tarvittavia toimintoja. Kirjastolla tarkoitetaan ohjelmoinnissa joukkoa komentoja, jotka joku toinen on tehnyt valmiiksi.

Eräs hyvä kirjasto on RiTa – A software toolkit for computational literature. Alla olevasta linkistä löydät RiTa:n esittelysivuston.
https://rednoise.org/rita/