Kuvataide ja ohjelmointi

Johdanto

Ohjelmointi perustuu lopulta toistamiseen. Komentoja suoritetaan uudestaan ja uudestaan, ja kun välissä tehdään pieniä muutoksia, saamme aikaan jonkinlaista liikettä. Tähän mennessä tällä polulla on työskennelty melko kokeilevasti käyttämällä satunnaislukuja muotojen sijainteina, kokoina ja väreinä. Monet ympäristömme ilmiöt näyttävät meistä ainakin osittain satunnaisilta, ja ohjelmointi on oivallinen työkalu tällaisen liikkeen esittämiseen ja luomiseen.

Tässä luvussa syvennytään kuitenkin ennakoidumpaan liikkeeseen. Jatkuva liike on jollain tapaa läsnä kaikissa kuvissa: esimerkiksi valokuvia katsellessamme alamme vaistomaisesti kuvitella, mitä ennen kuvaa on tapahtunut ja mitä kuvan jälkeen saattoi tapahtua.

• Idea: Ensin perehdytään vähän muuttujiin ja liikkeeseen ohjelmoinnissa. Sitten havainnoidaan ympäristöä, ja pohditaan, mitä tällaisella liikkeellä voisi esittää. Lopuksi viimeistellään työ.

Aloitetaan ohjelmointi

Pääset tämän harjoituksen aikana havainnoimaan ympäristöä, ja tuomaan siellä huomaamaasi liikettä osaksi työtäsi. Liikettä luodaksemme meidän tulee kuitenkin ensin ottaa käyttöön muutama uusi ohjelmointityökalu.

Aloitetaan  harjoitus perehtymällä hieman muuttujiin ja liikkeen luomiseen ohjelmoinnissa.

float paikkaX = 0;

void setup(){
  // Asetetaan piirtoikkunan koko.
  size(750, 400);
}

void draw(){
  // Liikkuva neliö
  rect(paikkaX, 200, 40, 40);
  paikkaX = paikkaX + 2;
}

Mitä muuttujat ovat

Ohjelman yläreunassa luomasi muuttuja on kuin tietosäiliö, johon tallennettua arvoa voi hyödyntää myöhemmin ohjelmassa, joko setup- tai draw-osassa. Arvoa voi myös muuttaa ohjelman aikana - siitä nimi muuttuja. Muuttujalla on Processingissa ja monissa muissakin ohjelmointikielissä aina tyyppi, nimi ja arvo.

Ohjelman yläreunassa asetit muuttujan paikkaX alkuarvoksi 0. Käytit muuttujaa myöhemmin rect-komennossa suorakulmion vaakasuuntaisena paikkana. Siksi ruudulle ilmestyvä suorakulmio oli aluksi aivan piirtoikkunan vasemmassa reunassa. Muista, että x-koordinaatti on piirtoikkunan vasemmassa reunassa 0 ja kasvaa oikealle siirryttäessä.

Jokaisella draw-metodin kierroksella muuttujan paikkaX edelliseen arvoon lisätään 2. Ensin arvo on 0, sitten 2, sitten 4, sitten 6.… Nelikulmio piirretään siksi koko ajan hiukan enemmän oikealle ja se näyttää liikkuvan! Mitä suurempi luku muuttujaan lisätään, sitä nopeammin nelikulmio liikkuu.

Asiaa on havainnollistettu alla olevassa animaatiossa. Muuttujan paikkaX arvo on aluksi 0 ja kasvaa koko ajan.

rect(200, 200, paikkaX, paikkaX);

float paikkaX = 0;


void setup(){
  // Asetetaan piirtoikkunan koko.
  size(750, 400);
}

void draw(){
  // Taustanelikulmion väriksi musta. Väri on osittain läpinäkyvä(peittävyysarvo 50).
  fill(0, 0, 0, 50);
  // Taustanelikulmion piirtäminen
  rect(0, 0, 750, 400);
  // Neliön täyttöväriksi valkoinen
  fill(255, 255, 255);
  // Neliön piirtäminen. Vaakasuuntaisena paikkana käytetään muuttujaapaikkaX
  rect(paikkaX, 150, 40, 40);
  // Edelliseen paikkaX arvoon lisätään aina 2, joten paikkaX kasvaa!
  paikkaX = paikkaX + 2;
}

Nopeus muuttujaksi

float paikkaX = 0;
float nopeusX = 2;
void setup(){
  // Asetetaan piirtoikkunan koko.
  size(750, 400);
}
void draw(){
  // Taustanelikulmion väriksi osittain läpinäkyvä musta
  fill(0, 0, 0, 50);
  // Taustanelikulmion piirtäminen
  rect(0, 0, 750, 400);
  // Neliön täyttöväriksi valkoinen
  fill(255, 255, 255);
  // Neliön piirtäminen. Vaakasuuntaisena paikkana käytetään muuttujaa paikkaX
  rect(paikkaX, 150, 40, 40);
  // Edelliseen paikkaX arvoon lisätään aina muuttuja nopeusX, joten paikkaX kasvaa!
  paikkaX = paikkaX + nopeusX;
  
}

Pystysuuntainen liike

Neliö on tähän mennessä liikkunut pelkästään vaakasuuntaisesti. Pystysuunnassa paikka on ollut koko ajan sama. Liikutetaan neliötä seuraavaksi myös pystysuunnassa. Tämä tapahtuu ihan samalla periaatteella kuin vaakasuuntainenkin liikuttelu. Luodaan siis kaksi uutta muuttujaa pystysuuntaista liikettä varten.

float paikkaX = 0;
float nopeusX = 2;
float paikkaY = 100;
float nopeusY = 1;

void setup(){
  // Asetetaan piirtoikkunan koko.
  size(750, 400);
}

void draw(){
  // Taustanelikulmion väriksi osittain läpinäkyvä musta
  fill(0, 0, 0, 50);
  // Taustanelikulmion piirtäminen
  rect(0, 0, 750, 400);
  // Neliön täyttöväriksi valkoinen
  fill(255, 255, 255);
  // Neliön piirtäminen. Vaakasuuntaisena paikkana käytetään muuttujaa paikkaX ja pystysuuntaisena muuttujaa paikkaY.
  rect(paikkaX, paikkaY, 40, 40);
  // Edelliseen paikkaX arvoon lisätään aina muuttuja nopeusX, joten paikkaX kasvaa!
  paikkaX = paikkaX + nopeusX;
  // Edelliseen paikkaY arvoon lisätään aina muuttuja nopeusY, joten paikkaY kasvaa!
  paikkaY = paikkaY + nopeusY;
}

Havainnoidaan!

Olemme tähän mennessä luoneet tasaista liikettä muuttujien avulla. Ehkä sinulle onkin syntynyt jokin ajatus siitä, mitä tällaisella liikkeellä voisi esittää tai ilmaista? Seuraavaksi pääset jalostamaan liikettä kohti tekemiäsi havaintoja.

Havaintoja kohti

Olet tähän asti liikutellut objektia melko kokeilevasti. Nyt voit pohtia, miten voisit hyödyntää liikettä havainnoimiesi asioiden esittämisessä. Muista, että kyse on tässä kohtaa pelkistävästä ilmaisusta - tarkka jäljitteleminen ei ole välttämättä hedelmällistä.

//Tämä on extra-tekemistä!
//Jos sinulla on intoa ja kärsivällisyyttä, voit tehdä sommitelman useista muodoista ja liikutella sitä
//Tässä koodissa piirretään useista muodoista koostuva harakka. 
//Jokainen muoto paikannetaan erikseen käyttämällä muuttujia paikkaX ja paikkaY.
//Kun näiden muuttujien arvot muuttuvat, harakka liikkuu
//Ensin Harakan pää
fill(0);
ellipse(paikkaX, paikkaY, 10, 10); 
//Harakan keho 
fill(255); 
rect(paikkaX - 12, paikkaY, 8, 18); 
// Harakan sininen osa 
fill(0, 20, 240); 
rect(paikkaX-15, paikkaY, 5, 10); 
// Harakan vihertävä pyrstö 
fill(50, 200, 20); 
rect(paikkaX-50, paikkaY, 30, 5); 
// Harakan mustat siivet on tehty nelikulmioina quad-komennoilla. 
fill(0); 
quad(paikkaX-10, paikkaY, paikkaX-25, paikkaY-25, paikkaX-50, paikkaY-50, paikkaX + 10, paikkaY - 25); 
quad(paikkaX-10, paikkaY, paikkaX-25, paikkaY+25, paikkaX-50, paikkaY+50, paikkaX + 10, paikkaY - 25)

Muoto maisemassa

Alla on muutamia esimerkkejä muodoilla esittämisestä ja pelkistämisestä. 

Ylärivi vasemmalta: Delaunay (1906), Baisunghuri (1431-1432) , Mondriaan (1939-1942)

Keskirivi vasemmalta: El Lissitzky (1925), Seurat (1881), La Fresnaye (1914)

Alarivi vasemmalta: Pop & Zebra, Ludovic Gauthier

Viimeistely ja extra

void mouseClicked(){
  nopeusX = -2;
  nopeusY = 3;
}

 paikkaX = paikkaX + random(-5, 5);
 paikkaY = paikkaY + random(-5, 5);

 if (paikkaX > 750){
   paikkaX = 0;
 }