Omat metodit

Olet käyttänyt Processingin valmiita metodeja (esim. random) ja määritellyt Processingin olemassaolevien metodien sisältöä (esim. setup, draw, mouseClicked). Voit kuitenkin luoda myös täysin omia, uusia metodeja ohjelman sisällä.

Voit esimerkiksi luoda metodin drawElement. Tämä tapahtuu täsmälleen samalla tavalla kuin esimerkiksi mouseClicked-metodin määrittely, paitsi että tällä kertaa päätämme antaa metodillemme syötteenä kaksi parametria, kokonaislukumuuttujat x ja y. Ne määrittävät sijaintipisteen, jonka ympärille rakennamme useasta ympyrästä koostuvan elementin:

void setup(){
}

void draw() {
}

void drawElement(int x, int y) {
  ellipse(x+50, y+25, 50, 50);
  ellipse(x+25, y+50, 50, 50);
  ellipse(x+75, y+50, 50, 50);
  ellipse(x+50, y+75, 50, 50);
}

Koska metodi ei ole Processingin ennalta määritelty metodi, drawElement-metodia on kutsuttava esimerkiksi draw-metodin sisältä. Koska drawElement tarvitsee kaksi parametria, annetaan sille x:n ja y:n arvoiksi vaikkapa 0 ja 0.

void setup(){
  size(500, 500);
  noFill();
}

void draw() {
  background(255);
  drawElement(0, 0);
}

Ohjelma piirtää yhden elementin. Kokeile seuraavaksi piirtää useampi elementti käyttämällä apuna for-toistorakennetta:

void draw() {
  background(255);
  
// sarake += 50 tarkoittaa samaa kuin sarake = sarake + 50
  for (int sarake = 0; sarake < width-50; sarake += 50){   
     drawElement(sarake, 0);
  }
}

Ohjelma piirtää nyt 50 pikselin välein uuden elementin, kunnes sarake-laskuri ylittää luvun width-50. Voit vielä yhdistää kaksi sisäkkäistä for-looppia ja täyttää koko ruudun elementeillä:

void draw() {
  background(255);
  
  for (int sarake = 0; sarake < width-50; sarake += 50){
    for (int rivi = 0; rivi < height-50; rivi += 50){
       drawElement(sarake, rivi);  // kutsutaan drawElement-metodia 
                                   // for-looppien laskurien arvoilla
     }
  }
}

Animaatio

Alla olevassa esimerkissä ornamentti on animoitu muuttamalla elementtien kokoa. Lopputulos on yksinkertaisuudestaan huolimatta näyttävä ja hypnoottinen.

Tutki alla olevan esimerkin koodia ja tutustu siihen miten liikkeen animointi on toteutettu. Lisää sen jälkeen omaan ornamenttiisi liikettä kasvattamalla ja pienentämällä yksittäisten elementtien kokoa.