Entä jos haluat ohjelman tekevän jotain, kun tiettyä näppäimistön näppäintä painetaan? Tarvitset tähän jonkin tavan vertailla näppäimistöltä tullutta syötettä haluamaasi merkkiin.

Vertailuun voit käyttää edellisessä kappaleessa kuvattuja ehtolauseita.

Tutustu seuraavaksi ehtolauseisiin esimerkin avulla:

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

void draw(){
  
}

void mouseClicked(){
  ellipse(mouseX, mouseY, 40, 40);
}

void keyPressed(){
  if (key == 'b'){
    rect(mouseX, mouseY, 50, 50);
  } 
}

Kun mitä tahansa näppäimistön näppäintä painetaan, ohjelma kutsuu keyPressed-metodia ja suorittaa keyPressed-metodin sisällä olevat komennot. Seuraavaksi if-lause vertailee muuttujia key ja 'b'. Jos ne ovat samat, suoritetaan if-lauseen sisällä määritelty koodi. Tässä tapauksessa piirretään neliö siihen kohtaan, jossa hiiri sijaitsee.

Ohjelma siis piirtää neliön silloin, kun painetaan b-näppäintä näppäimistöltä.

If-lause

Tutustu tarkemmin if-lauseen syntaksiin:

if (ehto){
  // jos ehto on tosi, suoritetaan täällä oleva koodi
}

If-lauseen suluissa oleva ehto voidaan määritellä jollakin seuraavista tavoista:

• a == b a on yhtä suuri tai sama kuin b
• a != b a on erisuuruinen tai eri kuin b
• a < b      a on pienempi kuin b
• a > b      a on suurempi kuin b
• a <= b   a on pienempi tai yhtä suuri kuin b
• a >= b      a on suurempi tai yhtä suuri kuin b

int a = 3;
if (a = 3){
  print("Toimii!");
}

Lisää vertailua

Entä jos haluat piirtää neliöitä vain toiselle puolelle ruutua, eli mouseX-muuttujan ollessa suurempi kuin 250? Voit laittaa if-lauseet sisäkkäin:

void keyPressed(){
  if (key == 'b'){
    if (mouseX > 250){
      rect(mouseX, mouseY, 50, 50);
    }
  } 
}

Useat sisäkkäiset if-lauseet voivat olla vaikeita lukea. Voit käyttää apuna loogisia lauseita. Ne ovat aivan samoja, kuin matematiikan kursseilla opetettavat loogiset lauseet

• vain syntaksi on eri!

• !(a == b)     a EI ole yhtä suuri kuin b (negaatio)

• a == b && b == c     a on yhtä suuri kuin b JA b on yhtä suuri kuin c (konjunktio)

• a == b || b == c     a on yhtä suuri kuin b TAI b on yhtä suuri kuin c (disjunktio)

Nyt voit kirjoittaa aiemman koodin hieman siistimmin:

void keyPressed(){
  if (key == 'b' && mouseX > 250){
    rect(mouseX, mouseY, 50, 50);
  } 
}

If-else

If-else -rakenteen avulla voi ilmaista vaihtoehtoisia polkuja ohjelman suoritukselle. Jos annettu ehto on tosi, suoritetaan if-lohkossa oleva koodi, muuten suoritetaan else-lohkossa oleva koodi:

void keyPressed(){
  if (key == 'b'){
    rect(mouseX, mouseY, 50, 50);
  } else {
    point(mouseX, mouseY);
  }
}

Else-lohkon sisällä määritelty koodi suoritetaan silloin, kun if-lohkon suluissa määritelty ehto ei päde.

• Mikäli key on b, suoritetaan if-lohkon sisällä oleva koodi, eli piirretään neliö. Else-lohkon sisällä olevaa koodia ei suoriteta.
• Mikäli key ei ole b suoritetaan else-lohkon sisällä oleva koodi, eli piirretään piste. If-lohkon sisällä olevaa koodia ei suoriteta.

Vieläkin monimutkaisempia ohjelmia voi luoda käyttämällä else if -rakennetta, joka mahdollistaa useiden vaihtoehtojen läpikäymisen:

void keyPressed(){
  if (key == 'b'){
    rect(mouseX, mouseY, 50, 50);
  } else if (key == 'p') {
    point(mouseX, mouseY);
  } else if (key == 'c') {
    rect(mouseX, mouseY, 100, 100);
  }
}

int a = 5;
int b = 8;
int c = 3;

if (a!=b){
  c = c +2;
} else if (a>b) {
  c = c +4;
} else {
  c = c +1;
}

int jauhoja = 10;
int suolaa = 1;
int munia = 6;

if (suolaa > 1){
  jauhoja = 12;
  munia= 7;
} else if (munia !=6) {
  jauhoja = 9;
  suolaa = suolaa -1;
} else {
  jauhoja = jauhoja -2;
  munia = 4;
}

print("Suolaa: "+suolaa+", munia: "+munia+", jauhoja: "+jauhoja);

Esimerkki: Muuttuja ja ehtolause

Seuraava esimerkki kokoaa yhteen muuttujan käyttöä ehtolauseessa sekä hiiren avulla tapahtuvaa vuorovaikutusta. Tavoitteena on rakentaa ohjelma, joka piirtää joukon kasvavia ympyröitä hiiren kursorin kohdalle.

Aloita tutusta koodinpätkästä, joka piirtää ympyrän kursorin kohdalle:

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

void draw(){
  ellipse(mouseX, mouseY, 20, 20);
}

Ajatellaan, että haluat kasvattaa ellipsin kokoa jokaisella piirtokerralla. Voit käyttää apuna muuttujaa, jota käytät ellipsin korkeutena ja leveytenä. Kun muuttujan arvoa kasvatetaan jokaisella piirtokerralla, myös ruudulle piirrettävän ympyrän koko kasvaa:

void setup(){
  size(500, 500);
  background(255);
  int diameter = 0;   // luodaan uusi diameter-muuttuja, jonka arvo on 0
}

void draw(){
  ellipse(mouseX, mouseY, diameter, diameter);
  diameter = diameter + 10;  // lisätään muuttujan diameter arvoon 10
}

Processing IDE ei kuitenkaan suostu ajamaan ohjelmaa! Ongelmaksi muodostuu muuttujan näkyvyys. Koska diameter-muuttuja on määritelty setup-metodissa, se on myös käytettävissä vain setup-metodin sisällä. {- ja }-merkit muodostavat lohkon, jonka sisällä määritellyt muuttujat näkyvät ainoastaan kyseisen lohkon sisällä.

Ratkaisuna ongelmaan on globaali muuttuja. Kun luot muuttujan setup- ja draw-metodien ulkopuolella, muuttuja on käytettävissä koko ohjelmassa eli "globaalisti":

int diameter = 0;  // luodaan diameter-niminen muuttuja ja annetaan arvoksi 0

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

void draw(){
  ellipse(mouseX, mouseY, diameter, diameter);
  diameter = diameter + 10;  // lisätään muuttujan diameter arvoon 10
}

Nyt ohjelmamme käynnistyy! Huomaa, että muuttujan arvon voi määritellä joko luomisen yhteydessä tai vasta myöhemmässä vaiheessa ohjelmaa (ks. esimerkki alla).

int luku;  // luodaan kukunaisluku tyyppinen muuttuja luku

void setup() {
  luku = 0;  // asetetaan luku-muuttujan arvoksi 0
}

Ohjelma toimii nyt mukavasti, mutta siinä on joitakin puutteita. Ympyrän läpimitta kasvaa loputtomiin, joten ympyrä katoaa pian ruudulta.

Voit tutkia if-lausekkeen avulla, onko diameter-muuttuja ylittänyt jonkun raja-arvon. Jos on, nollataan laskuri.

int diameter; 

void setup(){
  frameRate(20); //Päivitetään ruutu 20 kertaa sekunnissa
  size(500, 500);
  background(255);
  diameter = 0;
  noFill(); //Piirretään ilman täyttöväriä
}              

void draw(){
  ellipse(mouseX, mouseY, diameter, diameter);   
  diameter = diameter + 10; 

  if (diameter > 100){   // tarkistetaan, onko laskurin arvo yli 100
    diameter = 0;        // jos on, asetetaan laskurin arvoksi 0
  }
}

Kokeile muokata arvoja koodissa. Mitä tapahtuu, jos laskuria kasvatetaankin vain yhdellä joka kierroksella tai jos laskurin raja on 100 sijaan jotain muuta?