Processing suomeksi
Kuvat
Processingin "kuva" ei ole pohjimmiltaan mitään muuta kuin kokoelma pikseleitä, jotka on koottu suorakulmion sisään. Piirtääksemme kuvan ruudulle laitamme jokaiselle suorakulmion pikselille värin, jonka jälkeen annamme sijainnin (x, y), johon tahdomme piirtää tämän pikselikokoelman. On myös mahdollista muuttaa kuvan kokoa (leveys, korkeus), vaikka nämä ulottuvuudet eivät olisi yhteensopivia kuvan alkuperäisen koon kanssa.
Etsi kuva
Piirtääksesi kuvan Processingissa, voit etsiä kuvan ja tuoda sen piirrokseen. Voit ottaa kuvan ja laittaa sen tietokoneellesi, ottaa kuvan kamerallasi, tai etsiä kuvia, jotka ovat koneellasi. Tässä harjoituksessa kuvan alkuperällä ei ole väliä. Aluksi neuvomme kokeilemaan melko pientä kuvaa, jonka koko on 400 x 300 pikseliä.
Tässä aloitamme hieman kutistetulla kuvalla Ermenonvillen saarelta. Se löytyy Wikimedia Commonsista seuraavalta osoitteelta:
http://fr.wikipedia.org/wiki/Fichier:Erm6.JPG
Kuvaformaatit
Kolme kuvaformaattia hyväksytään Processingissa: PNG, JPEG tai GIF. Verkkosivuja suunnitelleiden ihmisten pitäisi tunnistaa nämä kolme kuvaformaattia, koska ne ovat suosituimpia WWW:ssä. Jokainen formaatti käyttää omia kuvanpakkauksen menetelmiään, joilla on etunsa ja haittansa:
1. JPEG -kuvilla esitetään usein pakattuja valokuvia. JPEG ei salli läpinäkyviä alueita.
2. GIF -kuva on usein käytössä käyttöliittymän napeissa ja muissa elementeissä. Siinä voi olla läpinäkyviä alueita. Se voi olla animoitu, mutta Processing ei kiinnitä huomiota animaatioihin.
3. PNG -kuvia käytetään molempiin edellämainittuihin käyttötarkoituksiin (kuvat ja käyttöliittymä) ja siinä voi olla läpinäkyviä alueita, jotka eivät ole binääriä, ja jossa on asteittaisina vaihtoehtoina läpinäkyvä, osittain läpinäkyvä ja täysin läpinäkymätön.
Vetäminen
Tuomme nyt kuvatiedoston Processing-ympäristöön. Saadaksemme tämän aikaan suosittelemme tallentamaan ensimmäisen luonnoksesi mieluiten Processing-tiedostoon, jonka pitäisi olla oletusarvoisesti My Documents tai Documents -hakemistossasi.
Etsi nyt kuvatiedostosi ja vedä se suoraan Processing-ikkunaan:
Kun siirrämme tiedostoja tällä tavalla, Processing osoittaa, että kuva lisättiin. Todellisuudessa Processing vain kopioi kuvan tiedostoon hakemistossa Data, jonka pitäisi näkyä nyt ohjelmasi vieressä.
Tässä tapauksessa hakemisto Data, johon itse asiassa laitamme kaikki kuvat - ja jopa muun median, kuten kirjasimet ja äänet - joita tahdomme käyttää kuvassamme. Jos tahdot päästä tähän hakemistoon nopeasti, esimerkiksi laittamalla sinne lisää kuvatiedostoja, valitse vain hakemistosta Sketch vaihtoehto Show Sketch Folder. Tähän vaihtoehtoon pääset myös valitsemalla pikavalinnan Ctrl-k Windowsissa ja Linuxissa tai Cmd-k Macissa:
Lataa tiedosto
Nyt kun olemme asettaneet kuvan Data-hakemistoomme, voimme käyttää niitä ohjelmassamme.
size(500,400);
PImage saari = loadImage("ile.jpg");
image(saari,50,10);
Ensin olemme antaneet piirroksellemme alueen, joka on isokokoisempi kuin kuvamme, jotta voimme paremmin ymmärtää, kuinka se voidaan sijoittaa viimeiseen luonnokseen.
On kolme tapaa katsoa kuvaa Processingissa:
1. Luo muuttuja, joka sisältää kuvan datan (pikselit).
2. Tuo tiedoston pikselit muuttujaamme.
3. Piirrä tämän muuttujan pikselit suunnittelutilassamme.
Ensin Processingissa täytyy luoda muuttuja. Mutta mikä on muuttuja? Tässä tapauksessa se on ohjelman sisäinen nimi, joka sisältää kaikki pikselit tiedostosta ile.jpg. Kun kirjoitamme sanan "saari", ohjelmamme ymmärtää, että tämä on pikselikokoelma, joka tekee kuvan. Tämä on täsmälleen funktion loadImage("tiedostonimi") tarkoitus: se etsii nämä pikselit tiedostosta ja vie ne muuttujaan, jonka nimi on "saari".
Olet ehkä huomannut myös oudon PImage-sanan edellisen koodin alussa. Tämä osoittaa, millaisen Processing-muuttujan se avaa. Muuttujalle varataan sopiva määrä tilaa. Kaava on {muuttujan tyyppi}{muuttujan nimi}={muuttujan arvo}.
Jos olisi esimerkiksi tarpeen tuoda koiran kuva Processingiin, voisimme käyttää komentoa PikkuKoira milou = loadDog("milou.dog"); Kirjoitamme ensin olion tyypin ja sen jälkeen sen arvon.
Tässä arvo annetaan funktiolla loadImage(), joka hakee kuvatiedoston pikselit ja tuo ne muuttujaan, jonka nimi on saari.
Lisätietoa muuttujista ja muuttujatyypeistä on luvussa, joka käsittelee tätä aihetta.
Lopulta, kun olemme täyttäneet muuttujamme, vedämme sen sijaintiin {x,y} kuvassamme. Jos tahdomme piirtää kuvan alkuperäisessä koossaan, käytämme lyhyttä versiota komennosta image, joka vaatii vain kolme muuttujaa: {PImage}, {x}, {y}.
image(saari,50,10)
Tuo kuva verkosta
Voimme myös tuoda kuvan suoraan World Wide Webistä, osoittaen kuvan osoitteen tiedostonimen sijasta.
size(400,400);
PImage webcam;
webcam = loadImage("http://www.gutenberg.org/files/3913/3913-h/images/rousseau.jpg");
image(webcam,10,20,width,height);
Jos ohjelmamme ei ole animoitu, kuten tässä tapauksessa, joudumme vain odottamaan, kun kuva latautuu Processingiin.
Varmista, että ohjelmasi ei lataa uusia kuvia käynnistyttyään, sillä muuten se pysähtyy aina ladatessaan. On olemassa muita tapoja tuoda kuvia tässä tapauksessa, mutta nämä tekniikat ovat liian kehittyneitä tähän kirjaan. Lisätietoa voit löytää Processing-foorumilta hakusanalla "thread".
Muuta kokoa
Lisäämällä kaksi parametriä voimme muuttaa kuvan kokoa. Tämä koko voi olla suurempi tai pienempi kuin alkuperäinen kuva, teoriassa rajaa ei ole olemassa. Kuitenkin kuvan alkuperäistä kokoa suurennettaessa Processing joutuu laajentamaan kuvan pikseleitä, mikä antaa pikselöityneen vaikutelman. Tämä tehoste voi usein olla käyttökelpoinen.
Muittaaksesi kuvan kokoa, voit lisätä kaksi parametriä kuvaasi, {leveys, korkeus}, mikä antaa meille 5 parametriä: {kuvamuuttuja, x, y, leveys,korkeus}.
size(500,250);
PImage saari;
saari = loadImage("ile.jpg");
image(saari,10,10,20,15);
image(saari,20,20,50,30);
image(saari,45,45,100,75);
image(saari,95,95,1000,750);
Huomaa, että olemme tuoneet vain kerran saaren kuvan muuttujaan, sitä voidaan käyttää nyt koko loppuohjelmassa. Huomaa myös, että olemme kunnioittaneet kuvan ulottuvuuksia {x,y} kokoa muuttaessamme, mutta ne voisivat ottaa minkä tahansa arvon, joka venyttäisi kuvaa toisella näistä akseleista.
Alfa
Usein täytyy tuoda kuvia, jotka eivät ole neliön tai suorakulmion muotoisia, kuten esimerkiksi pienten kaksiulotteisten videopelien tapauksessa. Emme näe valkoista neliötä Pacmanin tai Marion ympärillä. Valitettavasti pikseleihin perustuvat kuvat täytyy nykyisin tuoda neliömuodossa. Tämän esteen kiertämiseksi jotkin tiedostomuodot käyttävät alfakanavan konseptia. Tämä asetetaan kuvan muodostavan punaisen, sinisen ja vihreän päälle. Tämä kerros osoittaa jokaisen pikselin läpinäkyvyyden asteen, PNG-kuvissa voi myös olla osittain läpinäkyviä pikseleitä.
Jos tahdot tallentaa kuvasi alfakanavan kanssa, sinulla on kolme vaihtoehtoa, jotka voit valita viedessäsi kuvaa valitsemallasi kuvankäsittelyohjelmalla:
Jokaisella ohjelmalla on tapa viedä kuvia. Sinun täytyy tietää, että esimerkiksi GIF, PNG-8 ja PNG-24 kuvien välilä on eroja, kuten alfa-kanavan käsittely. Näistä kolmesta turvallisin ja eniten vaihtoehtoja antava on PNG-24.
Tässä on kuva runoilija Lucretia Maria Davidsonista, jonka voit ladata osoitteesta http://upload.wikimedia.org/wikipedia/commons/1/17/LucretiaMariaDavidson_transparent.png
Tämä kuva sopii täydellisesti tämän oppaan sivun pohjaan, koska siinä on ainoastaan alfakanava, joka kuvaa läpinäkyviä ja läpinäkymättömiä osia. Huomaa, että esimerkiksi Lucretian ympärillä olevat kuvat ovat läpinäkyviä, joten hänen otsansa ja niskansa ovat läpinäkymättömiä. Processing-kuvassamme näemme, että ne tosiaan ovat läpinäkymättömiä:
size(400,300);
PImage saari = loadImage("ile.jpg");
PImage lucretia;
lucretia = loadImage("LucretiaMariaDavidson_transparent.png");
image(saari,0,0);
image(lucretia,20,20);
Kuvien värittäminen
Voit myös värittää kuvia. Toisin sanottuna voimme muuttaa pikselien väriä, joko kaikkien tai yksittäisten pikselien. Yksinkertaisin näistä menetelmistä tarkoittaa kaikkien pikselien värittämistä. Tämä väritysmenetelmä näyttää neliöiden värittämiseltä, mutta se vaatii uuden komennon, tint(), jolla se erotetaan neliön pikselien suorasta värittämisestä. Tässä tapauksessa tint() muuttaa jokaisen pikselin väriä, kun se piirretään piirrustusavaruuteen.
size(500,130);
PImage saari;
saari = loadImage("ile.jpg");
tint(255,0,0);
image(saari, 10,10, 110,110);
tint(255,255,0);
image(saari, 130,10, 110,110);
tint(255,255,255,127);
image(saari, 250,10, 110,110);
tint(0,0,255,127);
image(saari, 320,10, 110,110);
Kuten komennot fill() ja stroke(), komento tint() voit ottaa yhden, kaksi, kolme tai neljä arvoa, mikä riippuu siitä, mitä olemme tekemässä. Kun määrittelet kolme arvoa, voit esimerkiksi lisätä/vähentää punaisen, vihreän tai sinisen kerroksen intensiteettiä kuvassamme. Määrittämällä neljä arvoa voimme lisätä/vähentää kuvan läpinäkyvyyttä/läpinäkymättömyyttä.