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.
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)
void setup(){
// Asetetaan piirtoikkunan koko.
size(1000, 500);
}
void draw(){
}
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ä.
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);
}
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ä.
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ää?
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);
}
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));
}
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.
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.
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));
}
Alla on eräs esimerkki mahdollisesta tuotoksesta ja kertomus sen taustasta. Voit kurkistaa esimerkin koodiin klikkaamalla mustan yläpaneelin </> -symbolia.
Lisätietoja: