Olio-ohjelmointia

P5.js-ohjelmoinnissa voimme käyttää JavaScriptin olio-ohjelmointia. Olio-ohjelmoinnin idea on se, että ensin luomme luokan (class), jossa määrittelemme olion. Esimerkiksi voisimme luoda pallo-olion, joka on määritelty Pallot-luokassa. Pallot-luokassa on määritelty pallon ominaisuudet, joita voi olla esimerkiksi pallon paikka, pallon väri ja pallon koko. Kun ohjelmassa setup-lohkossa annetaan komento:

pallo = new Pallot ();

niin tällöin luomme uuden olion nimeltään pallo. Pallon ominaisuudet määräytyvät Pallot-luokan constructor-osiossa. Tämän lisäksi tarvitsemme toisen komennon draw-lohkoon, joka näyttää luomamme pallo-olion. Tässä se komento on pallo.nayta(); Oheinen kuva havainnolistaa asiaa.

Katsotaan ideaa tarkemmin esimerkki-ohjelman avulla.

var pallo1,pallo2,pallo3;  // Jokainen olio-tarvitsee oman muuttujan
function setup() {
  createCanvas(600, 600);
  pallo1 =  new Pallot();  // Luodaan pallo1-olio Pallot-luokan avulla
  pallo2 =  new Pallot();  // Luodaan pallo2-olio Pallot-luokan avulla
  pallo3 =  new Pallot();  // Luodaan pallo3-olio Pallot-luokan avulla
}

function draw() {
  background(0);
  pallo1.nayta();     // Näytä pallo1 olio
  pallo2.nayta();     // Näytä pallo2 olio
  pallo3.nayta();     // Näytä pallo3 olio
}

class Pallot {
   constructor() {               // Tässä osiossa on määritelty olion ominaisuudet
     this.x = random(width);
     this.y = random(height);
     this.halkaisija=round(random(10,100));
     this.R =round(random(255));
     this.G =round(random(255));
     this.B =round(random(255));
   }
   nayta() {
     fill(this.R,this.G,this.B);                              // Asetetaan pallon väri
     ellipse(this.x,this.y,this.halkaisija,this.halkaisija);  // Piirretään pallo 
   }
 }

Kun ajat ohjelman, niin tällöin luodaan kolme pallo-oliota. Jokaisella pallolla on oma satunnainen paikka, väri ja koko. Tässä tarvitsemme kolme muuttujaa, koska jokainen olio tarvitsee oman muuttujan, johon kunkin pallon ominaisuudet on tallennettu. Fiksumpi idea on sijoittaa pallo-oliot taulukkoon, jolloin tarvitsemme vain yhden taulukko-muuttujan. Nyt palloja voi olla kolme, kymmenen, sata tai enemmän. Täydennetään koodia seuraavasti.

var pallo = [];
function setup() {
  createCanvas(600, 600);
  for(var a=0; a <100; a++) {  // Luodaan jokaiseen soluun oma olio
   pallo[a] = new Pallot();
  }
}

function draw() {
  background(0);
  for (var b=0; b < pallo.length; b++) {  // Näytetään oliot
    pallo[b].nayta();
  }
}

class Pallot {
   constructor() {                        // Tässä osiossa on määritelty olion ominaisuudet
     this.x = random(width);
     this.y = random(height);
     this.halkaisija=round(random(10,100));
     this.R =round(random(255));
     this.G =round(random(255));
     this.B =round(random(255));
   }
   nayta() {                                                 
     fill(this.R,this.G,this.B);                             // Asetetaan pallon väri
     ellipse(this.x,this.y,this.halkaisija,this.halkaisija); // Piirretään pallo 
     
   }
 }

Jolloin saamme aikaiseksi 100 palloa. Jokainen pallon on eri paikassa, eri värillä ja eri kokoinen. Lopputulos näyttää esimerkiksi tältä.

Mikäli oliota on paljon, niin taulukon käyttö on aina kätevää, koska silloin muuttujia on vain yksi eli taulukko-muuttuja. Laitetaanko pallot vielä liikkumaan? Myös liike voidaan määrietellä luokan (class) sisällä. Täydennetään ohjelmaa seuraavasti.

var pallo = [];
function setup() {
  createCanvas(600, 600);
  for(var a=0; a <100; a++) {
   pallo[a] = new Pallot();
  }
}

function draw() {
  background(0);
  for (var b=0; b < pallo.length; b++) {
    pallo[b].nayta();
    pallo[b].liiku();
  }

}

class Pallot {
   constructor() {
     this.x = random(width);
     this.y = random(height);
     this.halkaisija=round(random(10,100));
     this.R =round(random(255));
     this.G =round(random(255));
     this.B =round(random(255));
   }
   nayta() {
     fill(this.R,this.G,this.B);
     ellipse(this.x,this.y,this.halkaisija,this.halkaisija);
     
   }
   liiku() {
     this.x = this.x+random(-5,5);
     this.y = this.y+random(-5,5);
   }
 }

Tässä pallon uusi paikka muuttuu -5.:stä 5:een verattuna aina edelliseen arvoon. Lopputulos näyttää nyt tältä.

Jo edellisessä kappaleessa todettiin, että yhteen taulukkoon voidaan sijoittaa erilaisia muuttujia ja antaa niille arvoja. Tällöin käytämme taulukon olio-ominaisuutta. Myös funktio voidaan muuttaa olioksi luomalla ensin luokka class, jossa olio määritellään. Katsotaan asiaa esimerkin avulla eli luodaan aikaisemmin luodusta avaruusalus funktiosta olio.

var hahmo;            // Määritellään muuttuja hahmo
var paikkax = 300;    // Määritellään muuttuja paikkax ja annetaan sille alkuarvo (=aluksen paikka alussa vaakasuunnassa)
var paikkay = 300;    // Määritellään muuttuja paikkay ja annetaan sille alkuarvo (=aluksen paikka lopussa pystysuunassa)
var koko = 50;        // Määritellään muuttuja koko ja annetaan sille alkuarvo (= aluksen koko)
var muutos = 2;       // Aluksen liikkumisnopeus

function setup() {
  createCanvas(600, 600);                         // Ikkunan koko 600 x 600
  hahmo = new Alus(paikkax,paikkay,koko/100,0);   // Luodaan olio hahmo luokan Alus avulla
}

function draw() {
  background(200,200,0);      // Tyhjennä ikkuna ja aseta taustaväri
             
  if (keyIsPressed) {         // Jos painike on pohjassa
     if ((keyCode == LEFT_ARROW) && (paikkax > koko)) {          // Jos painetaan vasen painike ja vasenta reunaa ei vielä saavutettu
      paikkax=paikkax-muutos;                                    // niin vähennä paikkax:n arvoa muutoksen verran (=liikuu vasemalle)
     }                                                           // Lopeta jos lause

     if ((keyCode == RIGHT_ARROW) && (paikkax < (width-koko))) { // Jos painetaan oikea painike ja oikeaa reunaa ei vielä saavutettu
      paikkax=paikkax+muutos;                                    // niin kasvata paikkax:n arvoa muutoksen verran (=liikuu oikealle)
     }                                                           // Lopeta jos lause

     if ((keyCode == UP_ARROW) && (paikkay > koko)) {            // Jos painetaan ylös painike ja yläreunaa ei vielä saavutettu
      paikkay=paikkay-muutos;                                    // niin vähennä paikkay:n arvoa muutoksen verran (=liikkuu ylös)
     }                                                           // Lopeta jos lause

     if ((keyCode == DOWN_ARROW) && (paikkay < (height-koko))) { // Jos painetaan alas painike ja alareunaa ei vielä saavutettu
      paikkay=paikkay+muutos;                                    // niin lisää paikkay:n arvoa muutoksen verran (=liikkuu alas)
     }                                                           // Lopeta jos lause
    }                                                            // Lopeta ulompi jos lause (keyIsPressed)
    
    hahmo.display(koko/100,0);                                   // Muuta hahmon kokoa ja pyörityskulmaa
    hahmo.move(paikkax,paikkay);                                 // Liikuta hahmoa
}

class Alus {                            // Luokka Alus
  constructor(x,y,koko,kulma) {         // Muuttujien määrittely
    this.x = x;
    this.y = y;
    this.koko = koko;
    this.kulma = kulma;
  }

  move(x,y) {                           // Olion liikuttelu
    this.x = x;
    this.y = y;
  }

  display(koko,kulma) {
    var w = 150;  // Pyöritys pisteen korjaus
    var h = 150;
    this.koko = koko;
    this.kulma = kulma;
    push();                   // Koordinaatisto muistiin
    translate(this.x,this.y); // Liikuta hahmoa
    rotate(radians(this.kulma)); // Pyöritä hahmoa
    scale(this.koko);    // Skaalaa hahmoa
    
    // Tästä alkaa oman hahmon piirtokomennot
    strokeWeight(3);
    fill(200,50,0);
    rect(70-w,130-h,20,100);
    rect(210-w,130-h,20,100);
    rect(110-w,200-h,80,40);
    fill(250,100,0);
    triangle(150-w,100-h,50-w,200-h,250-w,200-h);
    fill(180,80,0);
    beginShape();
      vertex(150-w,50-h);
      vertex(170-w,100-h);
      vertex(200-w,220-h);
      vertex(100-w,220-h);
      vertex(130-w,100-h);
     endShape(CLOSE);
    fill(255,255,0);
    ellipse(150-w,125-h,40,50);
    // Tähän loppuu oman hahmon piirtokomennot
    
    pop();
  }  // Lopeta display

}    // Lopeta Alus luokka

Napsauta hiirellä tarvittaessa ensin ikkunan päällä, jonka jälkeen voit ohjailla avaruusalusta nuolinäppäimillä.

Lisämateriaalia JavaScript-ohjelmointiin

YouTube videoita

Tunnistaudu

Etkö ole vielä jäsen?