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. 

Kirjastot?
Kun käytät Processing-ohjelmissa esim. ellipse-komentoa, Processing kutsuu komentoa core -kirjastosta. core -kirjasto sisältää Processingin peruskomennot, mutta usein on tarpeen tehdä jotain, mihin peruskomennot eivät riitä - kuten lukea dataa tietokoneen mikrofonista tai kamerasta. Silloin täytyy asentaa alkuperäisen kirjaston tueksi kokoelma uusia komentoja. Monet harrastajat kehittävät Processingille omia kirjastojaan ja jakavat niitä muille ilmaiseksi. Näin varmistetaan se, että kaikkien ei tarvitse keksiä pyörää aina uudestaan!

Ää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.

Vaihe 2
Avaa tyhjä ohjelmaikkuna ja kopioi siihen alta löytyvä koodi. Tutustu koodin kommentteihin. Koodissa oleva printn-komento tulostaa arvoja Processing IDE:n alalaidassa olevaan Consoleen.
Suorita koodi, ja tarkkaile Consoleen tulostettuja arvoja. Arvojen pitäisi vaihdella mikrofonin havaitseman äänen mukaan. Päästä jokin kova ääni (esim. läpsäytä käsiäsi) tietokoneen vieressä. Arvojen pitäisi kasvaa. Jos arvot eivät vaihtele lainkaan, Processing ei todennäköisesti saa dataa mikrofonista.
// 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. 

Vaihe 3
Lisää koodiin map-komento, joka skaalaa väliltä 0-1 olevan amplitudin uudelle välille ja tallentaa tämän arvon loudness-muuttujaan.  

Käytä loudness-muuttujaa ruudun keskelle piirrettävän muodon kokona. Alla on käytetty ellipsiä, muta voit käyttää jotakin toistakin muotoa. 

Suorita koodi. Kokeile pitää meteliä tietokoneen vieressä. Kasvaako muodon koko aina kovien äänien myötä? Jos muoto ei kasva tai kasvaa vain vähän, sinun tulee muuttaa map-komennon parametrejä.

map-komennon kaksi viimeistä parametriä määrittävät vaihteluvälin, jolle arvo muunnetaan. Jos muodon koko ei kasva tarpeeksi, kasvata map-komennon viimeistä parametriä, joka määrittelee arvon ylärajan.

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.

Vaihe 4

Edellisessä esimerkissä ellipsin koko muuttui äänenvoimakkuuden mukaan. Tee koosta vakio ja vaihda sen sijaan ellipsin korkeutta äänen voimakkuuden mukaan. Voit ikään kuin ohjata ruudulla leijailevaa palloa korottamalla ääntäsi! Tämä on jo yksinkertainen versio äänellä toimivasta peliohjaimesta.

Heiluttele bezier-käyrää äänen voimakkuusarvojen mukaan. Voit jopa liittää voimakkuusarvon viikon 2 bezier-työhösi!

Skaalaa äänen voimakkuus välille 0-255 ja käytä tätä arvoa fill-komennossa. Nyt värit vaihtuvat äänenvoimakkuuden mukaan.

Käytä setupissa size-komennon sijaan fullScreen-komentoa, joka tekee piirtoikkunasta koko tietokoneesi ruudun kokoisen. Piirrä työsi draw-osassa pelkkä koko ruudun kokoinen taustanelikulmio siten, että äänen voimakkuus vaikuttaa taustan väriin. Voisit nyt heijastaa työn esimerkiksi luokan seinälle, ja näin seinän väri vaihtelisi äänenvoimakkuuden mukaan. 

Jos haluat tehdä työhösi jonkin muutoksen aina tarpeeksi kovan äänen kohdalla (esimerkiksi käsien lyöminen yhteen), voit lisätä draw-osaan if-lauseen. Alla oleva if-lause muuttaa täyttövärin satunnaiseksi aina, kun loudness-muuttujan arvo on yli 200.

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/

Vaihe 3

Alla olevan koodin draw-osaan on lisätty kaksi for-loopia, jotka käyvät läpi kuvan pikseleitä. Pikseleiden kohdalle piirretään alkuperäistä pikseliä isompi neliö. Suorita koodi ja tutustu sen kommenteihin.

Koodin yläreunassa luodaan muuttuja stepSize joka määrittelee sen, kuinka isoja harppauksia pikseleitä läpi käytäessä otetaan. Muuta muuttujan stepSize-arvoa isommaksi ja sitten pienemmäksi. Suorita ohjelma aina muutoksen jälkeen.

Vaihda draw-osan lopussa oleva rect-komento ellipse-komennoksi ja vaihtele taas muuttujan stepSize arvoa. Tuottaako rect-  vai ellipse-komento mielestäsi mielenkiintoisemman efektin?


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. 

Vaihe 4

Tutustu koodin uuteen osaan, joka tekee kuvasta mustavalkoisen. Löydät koodin for-loopien sisältä. Koodin uudet osat on myös kommentoitu. Suorita koodi.

Vaihda muuttujan treshold arvoa ohjelman ylälaidassa.  Pikselin kirkkautta verrataan aina tähän arvoon. Jos kirkkaus on suurempi kuin treshold, vaihdetaan väri valkoiseksi, ja jos se on pienempi kuin treshold, vaihdetaan väri mustaksi. 

Kirkkauden lisäksi voit halutessasi testata pikselin sävyä hue-komennolla tai kylläisyyttä saturation-komennolla. Sävyn ja kylläisyyden arvot ovat numeroita väliltä 0-255. Voit esimerkiksi muuntaa pikselin värin punaiseksi, vihreäksi tai siniseksi sen mukaan, minkä suuruisia sävyä ja kylläisyyttä mallintavat arvot ovat.


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ä.

Vaihe 5

Voit jatkaa pikseleiden värien ja koon säätämistä, mutta voit vaikuttaa fiilikseen myös tuomalla fyysiseen tilanteeseen joitakin itsellesi tärkeitä elementtejä. Sinun ei välttämättä myöskään itse tarvitse esiintyä omakuvassasi!

Muokkaa omakuvaasi tuomalla siihen erilaisia valoja: laita valot päälle tai avaa vaikka sälekaihtimet. Jos sinulla on erivärisiä valoja, ne voivat tuoda kuvaan paljon uutta.

Lisää ohjelmaan mouseClicked-osa, joka suoritetaan aina, kun hiirtä klikataan piirtoikkunan päällä. Lisää mouseClicked-osaan saveFrame-komento, joka tallentaa kuvakaappauksen työstäsi. Kuva tallentuu aina hiirtä klikattaessa työsi data-kansioon.

void mouseClicked(){
   saveFrame("omakuva####.png");
}
Omakuva?
Omakuvalla on taiteessa pitkät perinteet. Voit hakea inspiraatiota esimerkiksi Turun taidemuseon omakuvagelleriasta. Galleria on melko perinteikäs ja miesvoittoinen, mutta on siellä mukana kokeilevampiakin omakuvia ja ainakin yksi videoteoskin. Onko Vlogeissa aikamme omakuvan henkeä?

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.

Esimerkkejä
Tehtävässä visualisoitiin  esimerkiksi ellipseillä ja nelikulmioilla tehtyjä konfetteja, lumpeita lammessa, aavikkomyrsky, sieniä sateella ja joukkovoimaa marraskuussa.
Jatkokehittelyä

Tee satunnaisesti elävästä maisemasta työsi tausta.

Käytä ellipse- tai rect- komentoa ennen rotate-komentoa, joka kääntää koordinaatistoa. Voit tehdä kääntöarvosta satunnaisen, jolloin ilmestyvät muodot ovat hauskasti vinksallaan. Muista, että koko koordinaatisto kääntyy. Käytä aluksi pieniä arvoja, jotta muodot eivät katoa kokonaan piirtoikkunalta.

Voit tehdä työn geometrisilla muodoilla sommitelmia ilman random-komentoa ja liikettäkin. Inspiraatiota voi hakea esimerkiksi geometrisen abstraktion taideperinteestä. Katso inspiraatioksi geometrisen abstaktion töitä myös MET:n galleriasta.

Opetusidea: laita oppilaat tutkimaan ympäristöä ja pohtimaan, mitä liikettä saisi esitettyä kiinnostavasti pyörylöillä ja random-komennolla. 


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.

Esimerkkejä
Bezier-käyrät ovat pedagogisesti kiinnostavia, koska ne mahdollistavat hyvin monenlaiset lopputulokset. Kurssilla palautettuja töitä ovat olleet mm. vesimeloni, unikko, opettajan ohjaava käsi, joraava someniska, leija ja tulivuorenpurkaus.
Jatkokehittelyä

Toteutit bezier-käyrillä jonkinlaisen rajatun kokonaisuuden. Voisiko se olla jonkin laajemman maiseman osa? 

Siirry rohkeasti kaksiulotteisesta maailmasta kolmiuloitteiseen! Kolmiulotteistakin visuaalista esittämistä voi harjoitella kokeilemalla. Katso esimerkiksi box-komennon dokumentaatiosta mallia, ja lähde leikittelemään ruudulle satunnaisesti ilmestyvillä laatikoilla. Mitä niillä voisi ilmaista?

Opetusidea: Ottakaa haasteeksi jonkin ilmiön esittäminen pelkillä viivoilla ja käyrillä? (line ja bezier-komennot). Niukkuus asettaa luovuudelle sopivat rajat - miten pelkistää monimutkaista ilmiötä? Toisaalta teemana voi olla värien ja värin peittävyysarvojen tutkiminen. 


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.

Esimerkkejä
Kolmannen viikon kurssitöinä on syntynyt mm. kiitäviä englanninlakuja, unelmien frisbee, muurahainen liikenteessä, lepattavia perhosia ja auringossa sulava lumiukko.
Jatkokehittelyä

Jos haluat, että liikkuva kappale ei katoa piirtoikkunaltasi vaan kimpoaa sen seinistä, tutustu Bounce-esimerkkiin. Tarvitset toteutukseen if-lauseita, joiden avulla voit vaihtaa kappaleen suuntaa sen kohdatessa piirtoikkunan reunat. Yksityiskohtaisia ideoita tällä Daniel Shiffmanin videolla.

Haluaisitko tehdä liikkeestä aaltomaista tai pyörivää? Tee kokeiluja sin-komennolla.

Avoimesti luettavissa olevassa Daniel Shiffmanin nature of Code -kirjassa syvennytään siihen, miten luontoa ja sen lakeja voi mallintaa Processingissa. Kirjan harjoitusten tekeminen vaatii perehrymistä objektiorientoituneeseen ohjelmointiin, mutta jos sinulla on enemmän ohjelmointikokemusta, niin ehdoton lukusuositus! Ja luonnonlakejahan voi myös keksiä itse...

Opetusidea: Tehkää havainnointikävely oppilaiden kanssa. Jos liikkuvien asioiden ohjelmointi tuntuu liian kunnianhimoiselta, niin havainnoinnin kohteena voi olla esimerkiksi ympäristöstä löytyvät muodot! Ohjaa oppilaita esimerkiksi valokuvaamaan ympäristöstä kolmio, nelikulmio ja ellipsi. Lähtekää sitten ohjelmoimaan näitä näkymiä.


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.

Jatkokehittelyä

Tee teoksestasi esimerkiksi levynkansi, poliittinen kannanotto, elokuvan mainosjuliste tai meemi.

Lisää valitsemasi kuva taustalle setup-metodissa, ja piirrä sen päälle esimerkiksi ensimmäisellä tai toisella viikolla toteuttamiasi satunnaisia muotoja ohjelman draw-osassa. Mitä satunnaisliikettä voisit tuoda klassikkoteokseen?

Opetusideoita:

Viikon teemassa on pedagogisia mahdollisuuksia moneen suuntaan. Luokassa voisi pohtia tekoälyn määritelmää ja toimintaa. Onko jo satunnaisia sanoja arpovassa ohjelmassa kyse tekoälystä, vai olisiko tekoälyä vasta se, että ohjelma osaisi esimerkiksi taivuttaa sanoja ja tunnistaa niiden välittämiä tunteita?

Toisena vaihtoehtona on perehtyä avoimiin digitaalisiin taideaineistoihin. Aineistoja ja niiden lisenssien tutkimisen lisäksi voi pohtia sitä, mikä on vanhojen klassikkoteosten hedelmällisintä käyttöä. Mitä tämän hetkisestä taiteesta tullaan myöhemmin digitoimaan osaksi museoiden arkistoja?  Teoksia voi myös muokata muutenkin kuin ohjelmoimalla.