Info Draft 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. 

sketch_Rand 

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.

sketch_frameCount_1 

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. 

illustration_draw

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. 

Screen_shot_2010_09_10_at_11.57.39_AM_1 

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));
}