Processing suomeksi

Aikajana

Animaatiota luotaessa tarvitaan liikettä. Liike merkitsee muutosta ajan kuluessa. Sijainti, väri tai joku muu asia voi muuttua. Tieto muutoksesta voidaan tallentaa muuttujiin.

Animaatioita luotaessa sinun tulee tietää, missä järjestyksessä asiat tapahtuvat aikajanalla. Voimme käyttää joko oikeaa aikaa tai laskea esimerkiksi yhdestä kymmeneen.

Paljonko kello on?

Voimme luoda kellon kutsumalla Processingissa metodeita hour(), minutes() ja second(). Käytämme ulostuloa muuttaaksemme kolmen ohuen neliön sijaintia horisontaalisella akselilla.

Tässä on koodi hyvin yksinkertaisen kellon luomiseen:

void setup() {
  size(60, 60);
  noStroke();
}

void draw() {
  background(0);

  // Tunnit ovat 0-23
  // Muunnamme skaalalta 0-60

  rect((hour() / 24.0) * 60, 0, 1, 20);
  rect(minute(), 20, 1, 20);
  rect(second(), 40, 1, 20);
}

Tässä esimerkissä kuvat piirretään toistensa päälle. Metodin background() kutsuminen piirtää kuvat toistensa päälle. Komento background() täyttää piirroksen määritellyllä värillä, jotta kuva poistetaan.

Mittaa ajan kuluminen

Saat ohjelman suorittamisen aloitushetkestä kuluneen ajan komennolla millis(). Se palauttaa ajan millisekunteina. Voimme luoda animaatioita käyttäen tätä arvoa. Sekunnissa on tuhat millisekuntia. Tämä antaa meille melko korkean tarkkuuden muotoja animoitaessa.

Jotta animaatiot toimivat, voit käyttää modulo-operaattoria (%), josta saat jakojäännöksen. Esimerkiksi komento System.out.println(109% 10); näyttää tuloksen 9, sillä 109 jaettuna kymmenellä antaa 10 ja 9 jakojäännökseksi jää 9. Vastaavasti kahden numeron x ja y ottaminen, ja jakaminen numeroilla x ja y, antaa jakojäännöksen, joka on vähemmän kuin y. Modulo antaa meidän laskea ja olla koskaan ylittämättä tiettyä numeroa.

Seuraavassa esimerkissä piirrämme ympyrän, joka kulkee hyvin nopeasti vinossa suunnassa. Tämä ympyrä jättää jälkeensä vanan, joka katoaa hyvin hitaasti.

balle_motion_blur_1

Tässä on koodi, jota käytetään sen piirtämiseen.

void setup() {
  size(320, 240);
  noStroke();
  frameRate(60);
  smooth();
}

void draw() {
  fill(0, 0, 0, 10);
  rect(0, 0, width, height);
  fill(255);
  ellipse(millis() % width, millis() % height, 20, 20);
}

Sen sijaan että kutsuttaisiin komentoa background(), piirrämme neliön osittain läpinäkyvänä. Tämä tekee liikkeen sumennuksen. Kutsumme komentoa smooth(), koska rakastamme tasaisia kurveja.

On paras tehdä toiminnot ajan perusteella eikä laskea piirrettyjä kuvia. Tämä johtuu siitä, että renderöintinopeus riippuu koneesta ja sillä pyörivistä muista ohjelmista. Animaatioista tulee nykiviä, jos käytämme mittarina laskuria eikä aikaa. Katsomme kuitenkin animaatioiden tekemistä laskurilla, koska se on hyvin helppoa.

Animoi laskurilla

Näemme nyt, kuinka animaatio tehdään laskurilla. Piirrämme yhden viivan, joka liikkuu jatkuvasti.

ligne_qui_tourne

Koodi on melko yksinkertaista. Avain on kuvien laskenta. Muutamme viivan pyörimistä laskemalla kuvan renderöintikertoja.

int laskin;

void setup() {
  size(320, 240);
  frameRate(60);
  fill(0, 0, 0, 10);
  stroke(255);
  smooth();
  laskin = 0;
}

void draw() {
  frame = frame + 1;

  rect(0, 0, width, height);

  translate(width / 2, height / 2);
  rotate(radians(frame));
  line(-height, -height, height, height);
}

Julistetaan laskuri.

int laskin;

Laskuri initialisoidaan komennossa setup ().

void setup() {
  size(320, 240);
  frameRate(60);
  fill(0, 0, 0, 10);
  stroke(255);
  smooth(); 
  laskin = 0; }

Jokaisessa draw () -metodikutsussa yksi lisätään muuttujaan frame.

frame = frame + 1;

Tämän jälkeen voit siirtää piirroskohdan piirrosavaruuden keskustaan ja pyörimisliike riippuu ruudusta.

  translate(width / 2, height / 2);
  rotate(radians(frame))