Processing suomeksi

Useamman olion animointi

Olioista koostuvan ohjelman oliomäärä voi lisääntyä nopeasti. Olioihin johdattelevassa luvussa näimme, että voimme laittaa ruudulle kaksi palloa ja laittaa siirtovuoron metodiin draw(). Tämä voi olla hankala toimintatapa, kun kohteita tarvitaan yli kaksi.

Tässä kappaleessa jatkamme pomppoilevan pallon esimerkillä. Lisäämme enemmän palloja, käytämme listoja, jonka jälkeen lisäämme metodin käsittelemään pallojen törmäyksiä toisiinsa.

Koodipohja

Aloituspisteenä on koodi luvusta "Olion animointi". Luvun koodi antaa meidän laittaa ruudulle pomppivan pallon. Proseduurin kuluessa lisäämme koodinpätkiä vanhaan esimerkkiin. Uudet koodinpätkät näytetään lihavoituna ja merkittyinä kommentteina// LISÄÄ tai // LISÄYKSEN ALKU ja // LISÄYKSEN LOPPU. Voit myös kopioida koko koodiblokin ja korvata kyseessä olevan luokan tai metodin. Balle3

//Julista ja luo olion instanssi Pallo
Pallo myPallo = new Pallo(100, 100, color(255));

void setup() {
  smooth(); 
  size(400, 200); //Ikkunan koko
}
void draw() {
  fill(0, 0, 0, 1); // Läpinäkyvä väri
  rect(0, 0, width, height);

  noStroke();

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

class Pallo {
  //Pallon perusparametrien julistus
  float x;
  float y;
  float speedX;
  float speedY;
  color col;

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

    speedX = 2;
    speedY = 2;
  }

  //Piirrä pallo
  void display() {
    fill(col);
    ellipse(x, y, 40, 40);
  }

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

  void testaaTormays() {
    //Jos pallo osuu seinään se pompahtaa
    if (x > width-20 || x < 20) {
      speedX = speedX * -1;
    }
    if (y > height-20 || y < 20) {
      speedY = speedY * -1;
    }
  }
}

Listaa pallot

Voimme nyt käyttää listan konseptia pomppivaan palloon. Tämän avulla meillä voi olla monta palloa ruudulla, ilman että joudumme kopioimaan koodia!

Ensin julistamme listan palloja yhden pallon sijasta. Käytämme muuttujaa palloLaske laskemaan ohjelmassa olevien pallojen määrän.

Korvaamme seuraavan koodin

Pallo myPallo = new Pallo(100, 100, color(255));

tällä koodilla:

//Julista pallojen määrän sisältävä muuttuja
int palloLaske = 3;

//Julistetaan pallon instanssien määrän sisältävä muuttuja
Pallo[] pallot = new Pallo[palloLaske];

Kuten kokonaislukuja käsittelevässä esimerkissä, meidän täytyy vain julistaa mallipallon kopiot. Ne täytyy nyt luoda komennossa setup (). Luomme kolme palloa ruudun keskelle. Kaikki kolme ovat valkoisia.

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

  //Lisäys alkaa
  //Tämä silmukka luo kolme palloa 
  //Valkoista ruudun keskellä
  for (int i = 0; i < palloLaske; i++) {
    pallot[i] = new Pallo(width/2, height/2,  color(255));
  }
  //Lisäys loppuu
}

Metodissa draw () luomme myös silmukan, joka käy läpi kaikki elementit siirtääkseen niitä, testaa niiden törmäykset ja näyttää ne. Korvaamme koodin

  //Liikuta palloa ja näytä
  myPallo.move();
  myPallo.testaaTormays();
  myPallo.display();

tällä koodilla:

  //Tämä silmukka liikuttaa ja näyttää kolmea palloa
  for (int i = 0; i < palloLaske; i++) {
    pallot[i].move();
    pallot[i].testaaTormays();
    pallot[i].display();
  }

Lopullisena operaationa on muokata mallia pallosta, jotta jokaisella pallolla on oma nopeutensa ja suuntansa. Tehdäksemme tämän käytämme funktiota random(). Korvaamme seuraavan koodin

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

    speedX = 2;
    speedY = 2;
}

tällä koodilla:

 //Pallon luominen
  Pallo (float newX, float newY, color newColor) {
    x      = newX;
    y      = newY;
    col    = newColor;
    speedX = 2 + random(-1,1);
    speedY = 2 + random(-1,1);
  }

Lopullinen ohjelma

Tässä on lopullinen ohjelma, jossa on eri arvot muuttujalle ballCount.

//Pallojen määrän sisältävän muuttujan julistaminen
int laskePallo = 3;

//Pallon instanssit sisältävän listan julistaminen
Pallo[] pallot = new Pallo[palloLaske];

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

  //Tämä silmukka luo kolme valkoista palloa
  //Ikkunan keskelle
  for (int i = 0; i < palloLaske; i++) {
    pallot[i] = new Pallo(width/2, height/2,  color(255));
  }
}

void draw() {
  fill(0, 0, 0, 1); // Väri on läpinäkyvä
  rect(0, 0, width, height);

  noStroke();

  //Tämä silmukka luo ja näyttää kolme paloa
  for (int i = 0; i < palloLaske; i++) {
    pallot[i].move();
    pallot[i].testaaTormays();
    pallot[i].display();
  }
}

class Pallo {
  //Pallon parametrien 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 + random(-1,1);
    speedY = 2 + random(-1,1);
  }

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

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

  void testaaTormays() {
    //Pallo pompsahtaa muurista
    if (x > width-20 || x < 20) {
       speedX = speedX * -1;
    }
    if (y > height-20 || y < 20) {
       speedY = speedY * -1;
    }
  }
}