Kuvataide ja ohjelmointi

Johdanto: Valitse kolmesta vaihtoehdosta

Tämän luvun tehtävä on ohjelmointipolun viimeinen. Tehtävän tekemiseen on kolme eri vaihtoehtoa. Voit toki kokeilla vaikka kaikkia, jos mielenkiintoa ja aikaa riittää. Ensimmäiset kaksi vaihtoehtoa tuovat töihisi uuden ulottuvuuden, sillä pääset niiden kautta vuorovaikuttamaan ympäröivän fyysisen tilan kanssa.  

1. Äänen visualisointia. Tässä harjoituksessa pääset lukemaan dataa tietokoneesi mikrofonista ja visualisoimaa äänen voimakkuutta haluamallasi tavalla.

2. Omakuvan hahmottelua. Tässä harjoituksessa pääset käsittelemään tietokoneesi webkameran videokuvaa säätämällä pikseleiden kokoa ja värejä. Lopulta luot eräänlaisen omakuvan tekemällä videostasi muutamia kuvakaappauksia. Ohjelmoinnillisesti videokuvan prosessointi on äänenvoimakkuuden visualisointia vähän haastavampaa. Saat kuitenkin suurimman osan koodista valmiina.

3. Aiemman kurssityön jatkaminen. Jos haluat, voit käyttää tämän harjoituksen jonkin aiemman viikkotehtäväsi jatkamiseen. Tämä voi olla hyvä vaihtoehto, jos kaipaat vielä aikaa perusteiden harjoitteluun tai sinulla on muuten vaan paljon ideoita aiempien töidesi kehittelyyn. Aiempia töitä voi jatkaa myös silloin, jos tietokoneessasi ei ole toimivaa kameraa tai mikrofonia tai vuorovaikutus niiden kanssa ei jostain syystä onnistu. 

Äänen visualisointia 1/3

Sound-kirjaston asentaminen

Tämä ja kaksi seuraavaa vaihetta käsittelevät mikrofonin äänen visualisointia. Jos haluat käsitellä kameran videokuvaa tai kehitellä aiempaa kurssityötäsi, siirry eteenpäin ohjeissa!

Vaihe 1

Asenna Processingin sound-kirjasto valitsemalla Sketch > Import Library > Add Library . Etsi valikosta sound ja paina Install.

// Tuodaan mukaan sound-kirjaston komennot
import processing.sound.*;
// Luodaan Amplitude ja AudioIn tyypin objektit äänen havainnointia ja analysointia varten
Amplitude amp;
AudioIn in;

void setup() {
  size(600, 600);
  // Valmistellaan Processing kuuntelemaan ääntä mikrofonista
  amp = new Amplitude(this);
  in = new AudioIn(this, 0);
  // Aloitetaan äänen havainnointi
  in.start();
  // Aloitetaan äänen amplitudin havainnointi
  amp.input(in);
}      

void draw() {  
  // Tulostetaan äänenvoimakkuuden (amplitudin) arvoja consoleen ruudun alareunassa.
  println(amp.analyze());
}

Äänen visualisointia 2/3

Äänen voimakkuuden skaalaus

Edellisellä sivulla tulostit äänen amplitudin arvoja println-komennolla. Äänen voimakkuuden muutoksia olisi hauska visualisoida jollain tapaa. Esimerkiksi jonkin muodon koko voisi vaihdella voimakkuuden mukaan.

Kuten ehkä huomasitkin, amplitudin arvot ovat kuitenkin hyvin pieniä, ja niitä on siksi vaikeaa käyttää suoraan esimerkiksi ellipsin kokona. Arvot täytyisi skaalata suuremmalle välille.

Processingissa ja monissa muissa ohjelmointikielissä skaalaukseen käytetään map-komentoa. Meidän täytyy syöttää komentoon alkuperäinen arvo, alkuperäisen arvon vaihteluväli ja haluttu vaihteluväli, ja komento tekee laskutoimituksen puolestamme!

Kuten amp.analyze -komennon dokumentaatiosta näet, alkuperäinen amplitudin arvo on desimaaliluku väliltä 0-1. 

import processing.sound.*;
Amplitude amp;
AudioIn in;

void setup() {
  size(600, 600);
  amp = new Amplitude(this);
  in = new AudioIn(this, 0);
  in.start();
  amp.input(in);
}      

void draw() {
  println(amp.analyze());
  // Muunnetaan äänenvoimakkuuden arvo (välillä 0-1) numeroksi väliltä 50-200.
  // Tallennetaan tämä uusi arvo muuttujaan 'loudness'
  float loudness = map(amp.analyze(), 0, 1, 50, 200);
  // Piirretään valkoinen ellipsi, jonka leveytenä ja korkeutena käytetään loudness-muuttujaa
  fill(255);
  ellipse(300, 300, loudness, loudness);
}

Äänen visualisointia 3/3

Äänen merkitys?

Edellinen esimerkki käytti äänen amplitudia ruudulle piirrettävän ellipsin kokona. Tämä on hyvin yksinkertainen äänen visualisointikeino. Alla on vinkkejä muunlaisiin visualisointeihin. Voit tutkia niistä yhtä tai muutamaa tai sitten lähteä seuraamaan ihan jotain muuta ajatusta. Tietokoneen mikrofoni hoitaa äänen mittaamisen, ja me voimme keskittyä antamaan äänelle jonkin hienon tai kiinnostavan merkityksen.

Työ on riittävä, jos äänen vaihtelu vaikuttaa siinä johonkin - kunhan kyse ei ole suoraan edellisen sivun esimerkistä. Harjoituksen ideana oli saada kokemus äänen visualisoimisesta ohjelmoinnin keinoin.

if(loudness > 200){
  fill(random(0, 255), random(0, 255), random(0, 255));
}

Omakuvan hahmottelua 1/4

Video-kirjaston asentaminen

Tämä ja kolme seuraavaa vaihetta käsittelevät tietokoneesi webkameran videon visualisointia. Jos haluat mieluummin kehitellä aiempaa kurssityötäsi, siirry eteenpäin ohjeissa!

Vaihe 1

Asenna Processingin video-kirjasto valitsemalla Sketch > Import Library > Add Library . Etsi valikosta Video ja paina Install.

Avaa tyhjä ohjelmaikkuna ja kopioi siihen alta löytyvä koodi. Tutustu koodin kommentteihin.
Suorita koodi. Piirtoikkunaasi pitäisi ilmestyä videokuvaa. Jos videokuvaa ei ilmesty, varmista seuraavat asiat.

• Jos Processing ei löydä tietokoneesi kameraa, ohjelman pitäisi tulostaa teksti "No Cameras found" Consoleen Processing IDE:n alareunaan. Jos kameraa ei löydy muutaman yrityksen jälkeen, kannattaa ehkä miettiä viikkotehtävän tekemistä jollain muulla tapaa.
• Jos tekstiä "No Cameras found" ei ilmesty, Processing kyllä löytää kameran mutta ongelma on jossain muualla. Ilmestyykö Consoleen jokin virheilmoitus punaisella tekstillä?

// Tuodaan mukaan video-kirjaston komennot
import processing.video.*; 
// Luodaan uusi Capture-tyypin objekti videon lukemista varten.
Capture cam;

void setup() {  
    size(640, 480);
    // Luodaan lista saatavilla olevista kameroista.
    String[] cameras = Capture.list();
    // Jos listan pituus on 0, Processing ei löydä kameroita. 
    // Tällöin tulostetaan teksti "No cameras found." ruudun alareunan Consoleen.
    if (cameras.length == 0) {
        println("No cameras found.");
        exit();
    } 
    // Jos listan pituus ei ole 0, kameroita löytyy.
    else {
        // Tallennetaan sopivat asetukset kameran lukemista varten.
        // Asetukset: Videon koko  640 x 480 ja nopeus 30 ruutua sekunnissa.
        cam = new Capture(this, 640, 480, 30);
        // Aloitetaan kameran lukeminen
        cam.start();
    }
}

void draw() {
    // Jos kameran lukeminen onnistuu, luetaan seuraava ruutu ja lisätään se piirtoikkunaan image-komennolla.
    if (cam.available()) {
        cam.read(); 
        image(cam, 0, 0);
    }
}

Omakuvan hahmottelua 2/4

Pikseleiden koon säätäminen

Video koostuu aivan tavallisista kuvista, joita näytetään nopeasti peräjälkeen. Jokainen yksittäinen kuva puolestaan koostuu joukosta erivärisiä pisteitä, joita kutsutaan pikseleiksi. Jos kuvaa haluaa muokata, täytyy pystyä muokkaamaan sen pikseleitä. Tässä harjoituksessa muokataan ensin pikseleiden kokoa, ja sitten niiden värejä.

Jotta pikseleitä pääsee muokkaamaan, täytyy niihin ensin päästä käsiksi jollain tapaa. Suorakaiteen muotoisissa kuvissa pikselit on kätevää ajatella ruudukkona, joka on myös helppo käydä läpi ohjelmoimalla. Alla olevassa ohjelmassa ruudukon läpikäymiseen käytetään kahta for-loopia, joista ensimmäinen pitää kirjaa pystysuunnasta ja toinen vaakasuunnasta. Jokainen kuvan pikselirivi käydään läpi ylhäältä lähtien. Aina kun rivi on käyty läpi vasemmalta oikealle, siirrytään yhtä alemmas seuraavalle riville.

Jos for-loopit ovat sinulle täysin uusi asia, ei hätää. Tämän harjoituksen aikana ei ole tarkoituskaan oppia syvemmin niiden toimintaa vaan riittää, että saat käytettyä alla annettua koodia ja muokattua muutamia sen osia ohjeiden mukaan. Jos sinua kuitenkin kiinnostaa lukea lisää pikseleistä ja for-loopeista, löydät lisätietoja Processingin sivuilta: https://processing.org/tutorials/pixels/

import processing.video.*; 
Capture cam;
//stepsize määrittelee sen, kuinka isoja harppauksia pikseleitä käsitellessä otetaan.
//Se määrittelee myös sen, kuinka iso neliö pikselin kohdalle piirretään. 
//Mitä isompi stepSize, sitä rakeisempi kuvasta tulee.
int stepSize = 10;

void setup() {  
    size(640, 480);
    noStroke();
    String[] cameras = Capture.list();
    if (cameras.length == 0) {
        println("No cameras found.");
        exit();
    } 
    else {
        cam = new Capture(this, 640, 480, 30);
        cam.start();
    }
}

void draw() {
    if (cam.available()) {
        cam.read(); 
        image(cam, 0, 0);
        cam.loadPixels();
        // Videokuvan voi ajatella erivärisistä pisteistä koostuvana ruudukkona.
        // Tämä ruudukko käydään läpi kahdella for-loopilla.
        // Muuttujat x ja y kasvavat, kunnes koko kuva on käyty läpi.
        // Ruudukosta ei käydä läpi kaikkia pikseleitä, vaan siinä otetaan muuttujan 'stepSize' kokoisia harppauksia.
        for (int y = 0; y < height; y = y + stepSize) {
            for (int x = 0; x < width; x = x + stepSize) {
                // Aina uuden pikselin kohdalla sen väriarvo tallennetaan pixelColor-muuttujaan
                color pixelColor = cam.get(x, y);
                // Pikselin väri otetaan täyttöväriksi
                fill(pixelColor);
                // Pikselin kohdalle piirretään neliö, jonka leveys/korkeus on stepSize.
                rect(x, y, stepSize, stepSize);
            }
        }
    }
}

Omakuvan hahmottelua 3/4

Pikseleiden värien säätäminen

Edellisen vaiheen ohjelmassa pikselin väri tallennettiin muuttujaan, ja sitten sitä käytettiin täyttövärinä neliöitä piirrettäessä. 

Värejä voi kuitenkin myös muunnella monella tapaa. Alla olevassa ohjelmassa luetaan käsiteltävän pikselin kirkkaus brightness-komennolla. Jos kirkkaus on tarpeeksi suuri, piirrämme pikselin kohdalle valkoisen neliön ja jos pikselin kirkkaus on pienempi, piirrämme sen kohdalle mustan neliön. Näin saamme tehtyä värillisesti rikkaasta kuvasta kaksivärisen: siinä on pelkkää mustaa ja valkoista. 

import processing.video.*; 
Capture cam;
int stepSize = 10;
// Pikselin kirkkautta verrataan aina muuttujaan threshold. 
// Jos pikseli on kirkkaampi kuin threshold, se muunnetaan valkoiseksi. Jos se on vähemmän kirkas, se muunnetaan mustaksi.
int threshold = 150;

void setup() {  
  noStroke();
  size(640, 480);
  String[] cameras = Capture.list();
  if (cameras.length == 0) {
    println("No cameras found.");
    exit();
  } 
  else {
    cam = new Capture(this, 640, 480, 30);
    cam.start();
  }
}

void draw() {
  if (cam.available()) {
    cam.read(); 
    image(cam, 0, 0);
    cam.loadPixels();
    for (int y = 0; y < height; y = y + stepSize) {
      for (int x = 0; x < width; x = x + stepSize) {
        // Aina uuden pikselin kohdalla sen väriarvo tallennetaan pixelColor-muuttujaan
        color pixelColor = cam.get(x, y);
        // Jos pikselin värin kirkkaus on suurempi kuin'treshold', valitaan täyttöväriksi valkoinen
        if(brightness(pixelColor) > threshold){
          fill(255);
        }
        // Jos pikselin värin kirkkaus on pienempi kuin 'treshold', valitaan täyttöväriksi musta
        else{
          fill(0);
        }
        // Pikselin kohdalle piirretään valkoinen tai musta neliö, jonka leveys/korkeus on stepSize.
        rect(x, y, stepSize, stepSize);
      }
    }
  }
}

Omakuvan hahmottelua 4/4

Viimeistely

Tässä harjoituksessa on leikitty videokuvan pikseleiden koolla ja väreillä. Tämä prosessi on luultavasti heikentänyt kuvan laatua ja vähentänyt kuvan värejä, mikä ei ole ansio ainakaan realistisen esittämisen kannalta. Toisaalta tämän kaltaiset muunnokset voivat tuoda videokuvaan erilaista estetiikkaa, jossa on piirteitä esimerkiksi vanhoista videopeleistä tai pointillistisista töistä.

Harjoituksen ideana oli tuoda videokuvaa Processingiin ja hieman kokeilla pikseleiden käsittelyä. Tämä oli luonnollisesti vasta pintaraapaisu aiheesta, joten liian kunnianhimoisia tavoitteita ei itselle kannata asettaa. Seuraavaksi pääset ottamaan videokuvasta muutaman kuvakaappauksen omakuvan hengessä.

void mouseClicked(){
   saveFrame("omakuva####.png");
}

Ylhäällä: Vasemmalla ellipsejä, oikealla neliöitä. Värit luonnolliset.

Alhaalla vasemmalla: Neliöistä koostettu kaksivärinen mustavalkoversio. Takana olevasta Ikkunasta paistaa laskeva aurinko, mikä näkyy kuvassa valkoisena pallona.

Alhaalla keskellä: Pienistä neliöistä koostettu kuva, jossa fill-komennon kolmena parametrinä käytetty pikselin sävyä, kirkkautta ja kylläisyyttä.

Alhaalla oikealla: Pikselin väri on käännetty punaiseksi, vihreäksi tai siniseksi sen mukaan, mitä näistä pikselin väri on lähimpänä.

Aiemman kurssityön jatkaminen

Ei ole hullumpi idea ottaa aiempia tehtäviä jatkokäsittelyyn. Pienen tauon jälkeen uusia oivalluksia voi syntyä kuin huomaamatta. 

Jatkokehittely voi auttaa opetuksen suunnittelussa. Mikä olisi oppilaillesi sopiva projekti, jota haluaisit päästä kokeilemaan omassa opetuksessa?

Alla on ideoita siihen, miten eri lukujen töitä voisi kehitellä eteenpäin. 

Luku 1 - Tervetuloa kurssille!

Ensimmäisessä luvussa otettiin käyttöön Processing-ympäristö, ja käytettiin satunnaislukuja muotojen kokoina, sijainteina ja väreinä halutun vaikutelman luomiseksi. Yksikin ohjelmointikomento voi riittää tunnelman välittämiseen, ja tämä voi olla hauska ensimmäinen Processing-harjoitus oppilaille. Työskentely voi olla kokeilevaa: muutoksia seuraa aina havainto, joka ohjaa pohtimaan, mitä teos voisi esittää ja mitä siihen voisi seuraavaksi lisätä. Teoksen nimeäviä ja selittäviä kommentteja kannattaa lisätä mukaan alusta asti.

Luku 2 - Huvittele ja Haaveile

Toisessa luvussa jatkettiin satunnaislukujen parissa, mutta mukaan otettiin muutama uusi elementti. Läpinäkyvä tausta mahdollistaa teoksen vähittäisen häivyttymisen piirtoikkunasta. Processingin Tools-valikosta löytyvä Color Selector  työkalu mahdollistaa värien tarkan selaamisen ja valitsemisen. frameRate-komento puolestaan mahdollistaa toistonopeuden muuttamisen, ja tällä on ratkaiseva merkitys työn tunnelman kannalta.

Luku 3 - Havaitse ja Hoksaa

Kolmannessa luvussa  asetettiin random-komennot hetkeksi taka-alalle, ja lähdettiin tekemään määrätympää liikettä. Liikkeen inspiraationa toimi havainnointikävelyn löydökset.

Luku 4 - Häkkää ja Jaa

Neljännessä luvussa otettiin mukaan sanallisia ja kuvallisia aineistoja ja tehtiin satunnaisia runoja arpova generaattori. Tehtävässä opittiin luomaan sanoista koostuvia listoja ja valitsemaan niistä satunnaisia sanoja. Sanoja voi kirjoittaa piirtoikkunaan määrättyihin kohtiin käyttämällä text-komentoa. Itse valitsemiaan kuvia voi lisätä Processingiin PImage-objektien avulla.