Processing suomeksi
Draw-metodi
Toistaiseksi olemme luoneet lineaarisia ohjelmia: ohjelma alkaa, se piirtää piirroksemme ja loppuu komentojen loputtua.
Processing ei kuitenkaan ole pelkkä piirrosympäristö, se on myös interaktiivinen ympäristö. Interaktiivisuus vaatii aikaa, sillä ympäristö muuttuu ajan kuluessa ja eri seikkojen vaikuttaessa siihen. Tähän tarvitaan loputonta silmukkaa, jota ohjelma kutsuu jatkuvasti päivittääkseen grafiikkaa. Processingissa tämä loputon silmukka on komento draw(). Siihen liittyy usein metodi setup(), joka valmistelee kuvan, esimerkiksi asettamalla sen koon heti alussa.
Näiden kahden metodin puute tekee Processingista epäaktiivisen. Jos koodissa ei ole metodia draw(), ohjelma loppuu koodin loppuessa.
draw()
Aloita uusi tyhjä Processing-ohjelma, kirjoita seuraavat rivit skripti-ikkunaan, ja paina play -nappia:
void draw() {
background( random(255) );
}
OK, olet mahdollistanut animaation Processingissa. Sinun pitäisi nähdä ikkuna, joka välähtää 30 kertaa sekunnissa satunnaisessa harmaan sävyssä jossain mustan ja valkoisen välillä. Tämä on metodi random (255), joka antaa satunnaisia arvoja väliltä 0-255. Tämä arvo haetaan sen jälkeen taustalle komennolla backgroun (). Koska kaikki tapahtuu toistuvasti, päivittyy kuva kuin elokuvassa.
Oletusarvoisesti komennot, jotka ovat kahden draw-komennon aaltosulun välissä, suoritetaan 30 kertaa sekunnissa. Processing avaa tämän metodin 30 kertaa sekunnissa ja katsoo mitä sisällä on. Voimme laittaa tämän metodin sisään niin monta komentoa kuin tahdomme. Nämä komennot Processing toistaa loputtomasti.
Varo kirjoitusvirheitä tai Processing lopettaa toiston - mikä on animaatiosi loppu. Jos olet kuitenkin kirjoittanut komennon draw() ilman virheitä, se kutsuu silmukkaa 30 kertaa sekunnissa, kunnes käyttäjä lopettaa ohjelman, sähköt katkeavat, tai maailma loppuu. Niinpä voimme luoda animaatioita tällä koodin luomisen menetelmällä.
Suoritustaajuus
On mahdollista määritellä eri taajuus käyttämällä metodia frameRate().
Jos muutat edellistä esimerkkiä seuraavasti, huomaat nopeuden hidastuneen kolmasosaan aiemmasta.
void draw() {
frameRate(10);
background( random(255) );
}
Kuinka monta kertaa draw () kutsuttiin
Processing voi myös laskea kuinka monta kertaa metodi draw () on kutsuttu ohjelman käynnistämisestä alkaen muuttujalla frameCount.
setup ()
Usein joudumme myös kirjoittamaan ohjeet vain ohjelman alkuun. Voimme esimerkiksi määritellä kuvan koon vain kerran, ja tätä määritelmää ei sijoiteta komennon draw() alkuun, koska draw() suoritetaan jatkuvasti. Processing anta meille oletusarvoisen kuvan, jonka koko on 100x100 pikseliä, ja voimme muuttaa sen asetuksia.
Näistä syistä on luotu täydentävä komento: metodi setup().
void setup() {
}
Tämän metodin lovien yskittäisten merkkien hienoudet eivät ole tärkeitä tässä vaiheessa. Sinun pitää vain tietää, että alkuun pitää kirjoittaa void setup(), jota seuraa aaltosulku, käyttämäsi komennot, ja lopulta toinen aaltosulku.
void setup() {
size(500, 500);
}
void draw() {
background(random(255));
}
Tämän jälkeen Processing katsoo metodin sisälle joka kerralla, kun ohjelma suoritetaan. Kun nämä komennot on suoritettu, Processing kutsuu metodia draw(), joka toistetaan uudestaan ja uudestaan.
Background()
Tässä on ohjelma, joka täyttää ruudun ellipseillä.
void setup() {
size(200, 200);
fill(0);
}
void draw() {
ellipse(random(200), random(200), 20, 20);
}
Kuten ruutukaappauksesta näkyy, tämä elokuva täyttää kuvamme kokonaan mustalla.
Lisää vain ohjelmaan puhdas taustakuva, käyttäen metodia background(). Se ottaa yhdestä kolmeen väriarvoa, kuten metodit fill() tai stroke().
Tässä on ohjelman muunnos, jossa näemme nyt yhden animoidun muodon:
void setup() {
size(200, 200);
fill(0);
}
void draw() {
background(255); ellipse( 100, 100, random(100), random(100));
}
Todellisuudessa tyhjennämme ruudun 30 kertaa sekunnissa, jonka jälkeen se piirtää ellipsin taustalle.
Lisää sulatus
Tätä temppua käytetään usein Processingissa. Kuvan tausta pyyhitään, mutta jäljelle jätetään osittain läpinäkyvä neliö, johon piirretään komennolla.
void setup() {
size(200,200);
background(0);
noStroke();
}
void draw() {
fill(0, 0, 0, 20);
rect(0, 0, 200, 200);
fill(255);
ellipse(100 + random(-20,20), 100 + random(-20,20), random(50), random(50));
}