Kuvataide ja ohjelmointi

Johdanto

Luovassa työskentelyssä suurimmat onnistumisen kokemukset saattavat seurata siitä, että tulos on lopulta juuri halutun kaltainen. Tätä edeltää monesti kuitenkin paljon kokeilemista, yritystä ja erehdyksiä, ja monesti jokin yllättävä havainto tai idea voi muuttaa tekemisen suuntaa prosessin aikana. Tämän luvun harjoituksessa huvitellaan ja haaveillaan, mikä tarkoittaa juuri ennakkoluulotonta kokeilemista ilman suurempia huolia lopputuloksesta. 

  • Idea: Lähdet liikkeelle tekemälläsi työllesi taustan värillä, joka kuvaa parhaiten tämän hetkistä olotilaasi. Sitten otat käyttöön vinkeät ja ilmaisuvoimaiset Bézier-käyrät ja selvität kokeellisesti, mitä kiinnostavaa niillä voisi ilmaista. Lopuksi lisäät mukaan vielä yhden paikallaan pysyvän muodon, joka täydentää teoksen.

Asioiden ja esineiden tarkat paikat eivät nyt ole oleellisia - keskiössä on kokeileminen ja yllättävät oivallukset. 

Heidi Mäkiniemi - Bezier Maton pöllytys (Let Me Hack It, Kevät 2019)

Heidi Mäkiniemi - Bezier Maton pöllytys (Let Me Hack It, Kevät 2019)


Taustavärin fiilistely

Vaihe 1
Aloitetaan määrittelemällä piirtoikkunan koko. Alla piirtoikkunan leveydeksi on asetettu 1000 ja korkeudeksi 500 pikseliä, mutta kokeile tämän lisäksi esimerkiksi piirtoikkunaa, jonka leveys onkin 200 ja korkeus 800 pikseliä - erimuotoinen ikkuna avaa aivan erilaisia ajatuksia siitä, miltä lopputulos voisi näyttää.
    void setup(){
       // Asetetaan piirtoikkunan koko.
       size(1000, 500);
    }

    void draw(){

    }
Vaihe 2
Valitse väri, joka kuvaa tämän hetkistä olotilaasi. Avaa Processing IDE:ssä Tools -> Color Selector, ja etsi tätä tunnelmaa kuvastava väri. Aseta värin RGB-arvot osaksi fill-komentoa. Tästä tulee ohjelmasi taustaväri!
Color Selector

Taustavärin peittävyys

Processingissa värejä säädetään käytännössä kahdella komennolla, jotka ovat fill ja stroke. Voit määrittää värin monella tapaa, mutta eräs yleisimmistä on RGB-värimalli. Kolme komponenttia määrittävät värin punaisuuden (R), vihreyden (G) ja sinisyyden (B) määrän.

Fill-komennolla valitaan täyttöväri eli väri, jolla esimerkiksi nelikulmion tai ellipsin sisus täytetään. Stroke-komennolla puolestaan valitaan piirtoviivan väri eli väri, jolla piirretään esimerkiksi nelikulmion tai ellipsin ääriviivat. Jos käytät komentojen sisällä neljättä numeroa, on tämä värin peittävyys (opacity). Arvo 255 tekee väristä täysin peittävän ja arvo 0 tekee väristä täysin läpinäkyvän.

noFill ja noStroke -komennoilla täyttö- tai piirtoviivan väritys voidaan poistaa kokonaan käytöstä. Tällöin väri katoaa eli siitä tulee täysin läpinäkyvä.

Vaihe 3

Piirrä koko piirtoikkunan kokoinen nelikulmio valitsemallasi värillä asettamalla rect-komento fill-komennon perään. Aseta taustaväri vain osittain peittäväksi lisäämällä fill-komentoon myös neljäs parametri (0-255). Kokeile pienintä mahdollista arvoa (1) ja sitten suurenna arvoa vähitellen. Miten tämä vaikuttaa taustaväriin?

Lisää myös noStroke-komento rect-komennon eteen. Taustanelikulmion ei tarvitse sisältää ääriviivoja.

void setup(){
  // Asetetaan piirtoikkunan koko.
  size(1000, 500);
}

void draw(){
   // Asetetaan täyttöväri (tässä turkoosi). Neljäs numero vaikuttaa täyttövärin peittävyyteen.
  fill(67, 237, 96, 50);
  // Poistetaan piirtoviivan väritys käytöstä. Muuten taustanelikulmion ääriviivat jäisivät näkyviin.
  noStroke();
  // Piirretään taustalle koko ikkunan  kokoinen nelikulmio. 
  // Nelikulmion vasen yläkulma on pisteessä (0, 0) ja koko on 1000 x 500.
  rect(0, 0, 1000, 500); 
}
Pohdittavaksi

Tutustu taitelija Madara Masonin kokoamiin teoksiin, jossa kaikissa on leikitelty värien peittävyydellä jollain tapaa. https://fi.pinterest.com/madaramason/transparency/?showPulsar=true

Tutustu myös Processing IDE:stä löytyvään valmiiseen esimerkkiin, jossa kuva on asetettu osittain läpinäkyväksi:
File -> Examples -> Basics -> Image -> Transparency
Tietokoneympäristössä väri on helppo säätää täysin peittäväksi, mutta piirtäessä tai maalatessa käytetyt värit ovat harvoin tällaisia. Miten itse olet hyödyntänyt osittain läpinäkyviä värejä? Katso ympärillesi ja koita poimia ympäristöstä värejä, jotka ovat vain osittain peittäviä.

Kaarevat käyrät

Joskus luova oivallus voi syntyä sopivasta reunaehdosta, ja tällä kertaa reunaehtona on tietyn geometrisen muodon käyttäminen. Renaultilla aikanaan työskennellyt Pierre Bezier kehitti pyöreiden muotojen mallintamiseen käyriä, jotka tulivat myöhemmin tunnetuksi bezier-käyrinä. Mitä tällaisilla käyrillä voisi esittää?

Vaihe 4

Tutustu bezier-käyrän dokumentaatioon täällä: https://processing.org/reference/bezier_.html

Käyrälle määritellään käytännössä alkupiste, päätepiste sekä kaksi kontrollipistettä, jotka vaikuttavat käyrän muotoon. Lisää ohjelman draw-osaan bezier-käyrä, ja aseta sen väri mieleiseksesi stroke-komennolla. Valitse käyrän alkupiste, päätepiste ja välipisteet sen enempää laskelmoimatta. Muista kuitenkin käyttää numeroita, jotka ovat piirtoikkunasi rajoissa - muuten osa käyrästä jää ikkunan ulkopuolelle. Muista, että kyse on huvittelusta. Bezier-käyrän piirtäminen juuri tietynlaiseksi voi olla haastavaa, mutta kokeilemalla voit löytää jotakin yllätyksellistä ja toimivaa.

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

    void draw(){
      // Asetetaan täyttöväri (tässä turkoosi). Neljäs numero vaikuttaa täyttövärin peittävyyteen.
      fill(67, 237, 96, 50);
      // Poistetaan piirtoviivan väritys käytöstä. Muuten taustanelikulmion ääriviivat jäisivät näkyviin.
      noStroke();
      // Piirretään taustalle koko ikkunan  kokoinen nelikulmio. 
      // Nelikulmion vasen yläkulma on pisteessä (0, 0) ja koko on 1000 x 500.
      rect(0, 0, 1000, 500); 
      // Asetetaan piirtoviivan paksuudeksi 6 pikseliä
      strokeWeight(6);
      // Asetetaan piirtoviivan väri
      stroke(255, 0, 40);
      // Poistetaan täyttöväri käytöstä (muuten bezier-käyrän peittämä ala täytetään värillä).
      noFill();
      // Piirretään bezier-käyrä.
      // Alkupiste: (200, 200), kontrollipisteet: (200, 300) ja (300, 500), loppupiste: (500, 300)
      bezier(200, 200, 200, 300, 300, 500, 500, 300); 
    }
Vaihe 5
Luo sitten ohjelmaan liikettä lisäämällä bezier-käyrään muutama random-komento. Voit pitää jonkin pisteistä vakiona, mutta aseta ainakin osa pisteistä satunnaisiksi.  Kokeile tuotostasi aina muutosten jälkeen ja pohdi samalla, mitä käyrät viivat voisivat esittää?

Huomaatko, miten taustavärin peittävyysarvo vaikuttaa ohjelmaan? Tähän perehdymme seuraavaksi.
    void setup(){
      size(1000, 500);
    }

    void draw(){
      // Asetetaan täyttöväri (tässä turkoosi). Neljäs numero vaikuttaa täyttövärin peittävyyteen.
      fill(67, 237, 96, 50);
      // Poistetaan piirtoviivan väritys käytöstä. Muuten taustanelikulmion ääriviivat jäisivät näkyviin.
      noStroke();
      // Piirretään taustalle koko ikkunan  kokoinen nelikulmio. 
      // Nelikulmion vasen yläkulma on pisteessä (0, 0) ja koko on 1000 x 500.
      rect(0, 0, 1000, 500); 
      // Asetetaan piirtoviivan paksuudeksi 6 pikseliä
      strokeWeight(6);
      // Asetetaan piirtoviivan väri
      stroke(255, 0, 40);
      // Poistetaan täyttöväri käytöstä (muuten bezier-käyrän peittämä ala täytetään värillä).
      noFill();
      // Piirretään bezier-käyrä.
      // Alkupiste:(200, 200), muut pisteet ovat satunnaisia eri vaihteluväleillä.
      bezier(200, 200, random(150, 300), random(15, 500), random(400, 500), random(400, 500), random(500, 1000), random(0, 500));
    }

Läpinäkyvyyttä ja nopeutta

Huomasitkin varmaan, mihin taustavärin peittävyysarvo vaikuttaa! Jos tausta piirretään osittain läpinäkyvällä värillä, käyrät häivyttyvät pois vähitellen. Mitä läpinäkyvämpi taustaväri, sitä hitaammin bezier-käyrät katoavat ruudulta.

Vaihe 6

Kokeile sopivaa peittävyysarvoa fill-komennolle. Muista, että arvojen tulee olla välillä 0-255.

Voit myös tehdä käyrien piirtoväristä ja paksuudesta satunnaisen.  Voit tehdä piirtoväristä satunnaisen lisäämällä random-komentoja stroke-komennon sisään. Voit tehdä piirtoviivan paksuudesta satunnaisen lisäämällä random-komennon strokeWeight-komennon sisään. 


Processing-töissä monet asiat vaikuttavat teoksen tunnelmaan: piirtoikkunan koko ja muoto, piirrettävien viivojen väri, viivojen paksuus... Eräs keskeinen tekijä on ohjelman suoritusnopeus. Tiiviillä tahdilla ruudulle ilmestyvät käyrät voivat luoda kuvan jonkinlaisesta elävästä rihmastosta, kun taas hiljalleen ilmestyvät laakeammat käyrät voivat kuvastaa esimerkiksi pilviä, kukkuloita tai revontulia.

Vaihe 7
Lisää setup-osaan frameRate-komento, joka muuttaa draw-osan suoritusnopeutta. Oletuksena nopeus on 60 kertaa sekunnissa, mutta esimerkiksi frameRate(3) asettaa nopeudeksi 3 kertaa sekunnissa ja rauhoittaa ohjelmaa kummasti. Pohdi sopivaa suoritusnopeutta taas sen kannalta, mitä ruudulle ilmestyvät satunnaiset käyrät voisivat esittää tai ilmaista
void setup(){
  // Asetetaan piirtoikkunan koko.
  size(1000, 500);
  // Ohjelman draw-osaa suoritetaan nyt kolme kertaa sekunnissa.
  frameRate(3);
}

void draw(){
  // Asetetaan täyttöväri (tässä turkoosi). Neljäs numero vaikuttaa täyttövärin peittävyyteen
  fill(67, 237, 96, 50);
  // Poistetaan piirtoviiva käytöstä. Muuten taustanelikulmion ääriviivat jäisivät näkyviin.
  noStroke();
  // Piirretään taustalle koko ikkunan  kokoinen nelikulmio. 
  // Nelikulmion vasen yläkulma on pisteessä (0, 0) ja koko on 1000 x 500.
  rect(0, 0, 1000, 500);
  // Asetetaan piirtoviivan paksuudeksi 6 pikseliä
  strokeWeight(6);
  // Asetetaan piirtoviivan väri
  stroke(255, 0, 40);
  // Poistetaan täyttöväri käytöstä (muuten bezier-käyrän peittämä ala täytetään värillä).
  noFill();
  // Piirretään bezier-käyrä.
  // Alkupiste:(200, 200), muut pisteet ovat satunnaisia eri vaihteluväleillä.
  bezier(200, 200, random(150, 300), random(15, 500), random(400, 500), random(400, 500), random(500, 1000), random(0, 500));
 
}

Viimeistely ja extra

Vaihe 8
Lisää mukaan vielä jokin  paikalla pysyvä muoto, kuten ellipsi, nelikulmio, kolmio tai ellipsin puolikas. Ellipsejä piirsimmekin viime viikolla, mutta muiden muotojen esittämiseen et välttämättä olekaan vielä tutustunut. Onneksi kaikki nämä komennot on dokumentoitu Processingin omille sivuille Reference-osioon. Löydät tämän dokumentaation osoitteesta https://processing.org/reference/

2D-muotojen piirtämiseen löydät ohjeet kohdasta 2D Primitives.
reference

Alla on eräs esimerkki mahdollisesta tuotoksesta ja kertomus sen taustasta. Voit kurkistaa esimerkin koodiin klikkaamalla mustan yläpaneelin </> -symbolia.

ESIMERKKI "Lähdin liikkeelle luomalla turkoosin taustan. Väri tuli mieleeni ehkä keväisestä taivaasta. Bezier-käyrät muodostivat aluksi pelkkää spagettia. Tein alkupisteestä vakion, ja yhtäkkiä aloin ajatella, että tässä voisikin olla medusan jalat (olin juuri edellisenä päivänä nähnyt kiehtovan videon medusan liikkeestä Instagramissa). Samalla tajusin, että taustaväri toikin mieleeni  taivaan sijaan merenalaisen maailman. Lisäsin vielä lopuksi medusalle hatun arc-komennolla."


Extra
Yllä oleva työ on lisätty tälle sivulle Open Processing -palvelun kautta. Voit luoda Open Processingiin omat tunnukset ja upottaa tätä kautta töitäsi nettisivuille tai lähettää niitä linkkeinä kavereillesi. Open Processing on myös oiva tapa etsiä inspiraatiota. Sivuston löydät osoitteesta https://www.openprocessing.org/

Voit katsella muiden töitä, vaikka sinulla ei olisikaan omia tunnuksia. Etsi töitä sivuston ylälaidasta löytyvän suurennuslasikuvakkeen avulla. Käytä esim. hakusa "bezier" ja katso, mitä ihmiset ympäri maailmaa ovat samoilla välineillä tehneet!

Lisätietoja: