Olioiden animointi

Olioiden animointi on näyttämö, jolle voimme ajatella laajempia käyttötarkoituksia. Olion animointi merkitsee toimintojen lisäämistä malliin: liike, pomppoilu, törmäysten testaus jne. Tämä luku näyttää esimerkkejä luvussa Oliot luodun pallon käsittelystä ja sen pomppoiluttamisesta ruudun neljän reunan välillä.

Lopputulos on kuin seuraavassa kuvassa. Laitamme viivästysefektin näyttääksemme pallon liikeradan.

Koodiperusta

Alkupisteeksi otamme pallon koodin luvusta Kohteet. Se antaa meidän nähdä pallon ruudulla. Tämän proseduurin kuluessa lisäämme koodinpätkiä perusesimerkkiin. Uudet osat näytetään paksulla ja niissä on kommentit //LISÄÄ tai // LISÄYS ALKAA ja // LISÄYS LOPPUU. Voit myös kopioida koko koodiblokin ja korvata kyseessä olevan luokan tai metodin.

//Yhden pallon instanssin julistaminen
Pallo myPallo = new Pallo(100, 100, color(255));

void setup() {
  smooth(); 
  size(400, 200); //Ikkunan koko
}

void draw() {
  background(0); //Mustan taustan luominen
  noStroke(); //Ei ääriviivaa

  myPallo.display(); //Näytetään pallo
}

class Pallo {
  //Pallon ominaisuuksien julistus
  float x;
  float y;
  color col;

  //Pallon luominen
  Pallo (float newX, float newY, color newColor) {
    x      = newX;
    y      = newY;
    col    = newColor;
  }

  //Pallon suunnittelu
  void display() {
    fill(col);
    ellipse(x, y, 40, 40);
  }
}

Liike

Pallon täytyy liikkua x- ja y- akseleita pitkin. Luomme kaksi muuttujaa malliin ja olion toimintaa edustaa sen nopeus akseleita x ja y pitkin. Tämän jälkeen lisäämme olioon uuden metodin move(), jota kutsutaan ohjelman metodista draw(). Tämä metodi tulee kuitenkin, aina oliota näytettäessä, muuttamaan pallon sijaintia suhteessa sen nopeuteen. Se alustaa myös konstruktorin nopeuden kuvaavat muuttujat. Aluksi annamme niille pysyvän arvon.

class Pallo {
  //Pallon ominaisuuksien julistus
  float x;
  float y;
  float speedX; //LISÄÄ
  float speedY; //LISÄÄ
  color col;

  //Pallon rakentaminen
  Pallo (float newX, float newY, color newColor) {
    x      = newX;
    y      = newY;
    col    = newColor;

    speedX = 2; //LISÄÄ
    speedY = 2; //LISÄÄ
  }

  //Pallon suunnittelu
  void display() {
    fill(col);
    ellipse(x, y, 40, 40);
  }

  //LISÄYS ALKAA
  void move() {
   x = x + speedX;
   y = y + speedY;
  }
  //LISÄYS LOPPUU
}

Se kutsuu metodia move() metodista draw(). Voimme lisätä kutsun komentoon background pyyhkiäksemme ruudun jokaisen uuden kuvan jälkeen. 

void draw() {
  background(0); //Mustan taustan luominen
  noStroke(); //Ei ääriviivoja

  //Pallon liikuttaminen ja näyttäminen
  myPallo.move(); //LISÄÄ
  myPallo.display();
}

Törmäykset

Tällä hetkellä pallo jatkaa liikettään törmätessään ruudun seinään. Pallo pitäisi saada poukkoilemaan seinistä, joten lisäämme metodin testaaTormays, joka kääntää pallon liikesuunnan sen osuessa seinään.

class Pall {
  //Pallon ominaisuuksien julistaminen
  float x;
  float y;
  float speedX;
  float speedY;
  color col;

  //Pallon luominen
  Pallo (float newX, float newY, color newColor) {
    x      = newX;
    y      = newY;
    col    = newColor;

    speedX = 2;
    speedY = 2;
  }

  //Pallon suunnittelu
  void display() {
    fill(col);
    ellipse(x, y, 40, 40);
  }

  void move() {
   x = x + speedX;
   y = y + speedY;
  }

  //LISÄYS ALKAA
  void testaaTormays() {
    //Pallo pomppaa törmätessään seinään
    if (x > width-20 || x < 20) {
      speedX = speedX * -1;
    }
    if (y > height-20 || y < 20) {
      speedY = speedY * -1;
    }
  }
  //LISÄYS LOPPUU
}

Nyt lisätään kutsu metodiin testaaTormays metodista draw(). 

void draw() {
  //Korvataan komennolla background () näille kahdelle riville
  fill(0, 0, 0, 1); // Läpinäkyvä väri
  rect(0, 0, width, height);
  noStroke();

  //Pallon liikuttaminen ja näyttö
  myPallo.move();
  myPallo.testaaTormays(); //LISÄÄ
  myPallo.display();
}

Lopullinen koodi

Tässä on lopullinen koodi kaikkien näiden muutosten jälkeen.

//Yhden olion pallo instanssin luominen
Pallo myPallo = new Pallo(100, 100, color(255));

void setup() {
  smooth(); 
  size(400, 200); //Ikkunan koko
}
void draw() {
  fill(0, 0, 0, 1);
  rect(0, 0, width, height);

  noStroke();

  //Pallon näyttö ja liikuttaminen
  myPallo.move();
  myPallo.testaaTormays();
  myPallo.display();
}

class Pallo {
  //Pallon luokan ominaisuuksien julistaminen
  float x;
  float y;
  float speedX;
  float speedY;
  color col;

  //Pallon luominen
  Pallo (float newX, float newY, color newColor) {
    x      = newX;
    y      = newY;
    col    = newColor;

    speedX = 2;
    speedY = 2;
  }

  //Pallon suunnittelu
  void display() {
    fill(col);
    ellipse(x, y, 40, 40);
  }

  void move() {
   x = x + speedX;
   y = y + speedY;
  }

  void testaaTormays() {
    //Pallo pomppaa törmätessään muuriin
    if (x > width-20 || x < 20) {
      speedX = speedX * -1;
    }
    if (y > height-20 || y < 20) {
      speedY = speedY * -1;
    }
  }
}