Liikkeen animointi

Edellisissä esimerkeissä olet luonut animaatioita random-metodin avulla. Esimerkiksi komento ellipse(random(width), random(height), 50,50); piirtää 50 pikseliä leveän ympyrän satunnaiseen sijaintiin ruudulla. Entä jos haluat animoida jatkuvaa liikettä? Yksinkertainen esimerkki voisi olla x-koordinaatin kasvattaminen jokaisen piirtokerran jälkeen. Kokeile seuraavaa esimerkkiä:

float x = 0;
float speed = 1;

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

void draw(){
  ellipse(x,height/2,50,50);
  x = x + speed;
}

Esimerkki toimii hienosti, kunnes ellipsi saavuttaa ruudun oikean reunan. Olisi mukavaa, jos ellipsi vaihtaisi suuntaa kohdatessaan reunan, eli kimpoaisi reunasta. Suomeksi ilmaistuna ohjelman käytös vaikuttaisi tältä:

Piirrä ellipsi.

Muuta ellipsin x-koordinaattia nopeuden verran.

Jos x-koordinaatti on suurempi kuin leveys:

• muuta nopeus negatiiviseksi.

Jos x-koordinaatti on pienempi kuin 0:

• muuta nopeus positiiviseksi.

Uutta edeltävässä kuvauksessa ovat "jos suurempi kuin" ja "jos pienempi kuin" -rakenteet. Processingilla ilmaistuna "Jos suurempi, kuin leveys" näyttää tältä:

if (x > width) {
  //tämä koodi suoritetaan jos x on suurempi kuin width
}

Kokonaisuudessaan edellinen esimerkki näyttää tältä:

float x = 0;
float speed = 1;

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

void draw(){
  ellipse(x,height/2,50,50);
  x = x + speed;
 
  if (x > width) {
    speed = speed * -1;
  }
 
  if (x < 0) {
    speed = speed * -1;
  }
}

Esimerkki toimii nyt oikein mainiosti. Ellipsi liikkuu edestakaisin x-akselilla ja kimpoaa pystyreunoista. Ohjelmassa on kaksi eri ehtolausetta, jotka toteuttavat täsmälleen saman toiminnallisuuden. Edellistä esimerkkiä elegantimpi tapa olisi ilmaista looginen ehto yhdessä lauseessa:

Jos x < width tai x < 0:

• muuta nopeus nopeuden vastaluvuksi

Tai ilmaistaan javassa merkillä '||'. Ja ilmaistaisiin javassa merkillä '&&'. Näin ollen lause 'jos x < width tai x < 0' voidaan ilmaista seuraavasti:

if (x < 0 || x > width) {
  //code here
}

Koko esimerkki näyttää tältä:

float x = 0;
float speed = 1;

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

void draw(){
  ellipse(x,height/2,50,50);
  x = x + speed;
 
  if (x < 0 || x > width) {
    speed = speed * -1;
  }
}

Lisätehtävä

Edellisessä esimerkissä y-koordinaatti pysyi vakiona. Toteuta nyt y-koordinaatille sama toiminnalisuus, kuin edellisessä esimerkissä toteutettiin x-koordinaatille.

Vinkki: Luo y, speedX ja speedY -muuttujat.

Tehtävästä voi olla sinulle apua seuraavan sivun harjoituksessa, joka päättää tämän luvun.