Kaksi if-lausetta

On myös mahdollista yhdistää kaksi tai useampi ehto samaan if-lauseeseen. Yhdistämiseen käytetään seuraavia operaattoreita.

Kun yhdistetään usempi ehtolause, niin jokainen ehto laitetaan omien sulkujen sisäpuolelle ja jokaisen ehdon väliin laitetaan sitten joko &&-merkki tai ||-merkki. Lopuksi laitetaan kaikkien ehtojen ympärille vielä yhdet sulkulausekkeet. Mieti aina, että onko ehto järkevä. Esimerkiksi ehto: if ((a < 5) && (a > 10)) ei toteudu koskaan, koska luku a ei voi olla yhtä aikaa sekä pienempi kuin 5 ja suurempi kuin 10. Vastaavasti ehto: if ((a >5) || (a < 10)) ei ole järkevä, koska ehto on aina voimassa eli a on aina joko suurempi kuin 5 tai pienempi kuin 10.

Tehdään ohjelma, jossa ikkunan leveys on 800. Jaetaan ikkunan leveys 100 px levyisiin kaistaleisiin. Ensimmäinen väli on välillä 0…100 eli kun hiiren vaakasuuntainen koordinaatti on suurempi kuin 0 ja pienempi tai yhtä suuri kuin 100. Toinen väli on välillä 100…200 eli kun hiiren vaakasuuntainen koordinaatti on suurempi kuin 100 ja pienempi tai yhtä suuri kuin 200. Jatketaan näin kunnes kaikki kahdeksan väliä saamme piirrettyä. Ohjelma siis piirtää punaisen pystypalkin eli suorakulmion siihen kohtaan jossa hiiri on vaakasuunnassa. Kokonainen ohjelma on seuraavanlainen.

function setup() {
  createCanvas(800, 400);
}

function draw() {
  background(0);
  fill(255,0,0);
  if ((mouseX > 0) && (mouseX <= 100)) {      // Väli 0...100
     rect(0,0,100,400); 
  }
  if ((mouseX > 100) && (mouseX <= 200)) {    // Väli 100...200
     rect(100,0,100,400); 
  }
  if ((mouseX > 200) && (mouseX <= 300)) {    // Väli 200...300
     rect(200,0,100,400); 
  }
  if ((mouseX > 300) && (mouseX <= 400)) {    // Väli 300...400
     rect(300,0,100,400); 
  }
  if ((mouseX > 400) && (mouseX <= 500)) {    // Väli 400...500
     rect(400,0,100,400); 
  }
  if ((mouseX > 500) && (mouseX <= 600)) {    // Väli 500...600
     rect(500,0,100,400); 
  }
  if ((mouseX > 600) && (mouseX <= 700)) {    // Väli 600...700
     rect(600,0,100,400); 
  }
  if ((mouseX > 700) && (mouseX <= 800)) {    // Väli 700...800
     rect(700,0,100,400); 
  }
}

​Voit testata ohjelman tästä.

Alueen valinta

Katsotaan seuraavaksi kuinka voidaan valita alue. Esimerkiksi jos halutaan valita alue, jossa x:n arvot on välillä 100…200 ja y:n arvot on välillä 100…200, niin ehto on muotoa if ((x>100) && (x < 200)) && (y>100) && (y < 200)). Tämä tarkoittaa samaa kuin jos x on suurempi kuin 100 ja x on pienempi kuin 200 ja y on suurempi kuin 100 ja y on pienempi kuin 200. Nämä kaikki neljä ehtoa on voimassa silloin kun ollaan neliön sisällä eli neliön, joka on vasemmassa yläreunassa. Samalla tavalla jos halutaan valita alue, jossa x:n arvot on välillä 400…500 ja y:n arvot on välillä 400…500, niin ehto on muotoa if ((x>400) && (x < 500)) && (y>400) && (y < 500)). Tämä tarkoittaa samaa kuin jos x on suurempi kuin 400 ja x on pienempi kuin 500 ja y on suurempi kuin 400 ja y on pienempi kuin 500. Nämä kaikki neljä ehtoa on voimassa silloin kun ollaan toisen neliön sisällä eli neliön joka on oikeassa alareunassa.

Tehdään sellainen ohjelma, että jos hiiri on vasemmassa yläreunassa olevan neliön sisällä (tällöin kaikki neljä ehtoa toteutuu), niin pyöräytetään neliö ympäri. Mikäli kaikki neljä ehtoa ei ole voimassa, niin piirretään neliö. Pyöritys onnistuu kun ensin siirrämme origon neliön keskelle komennolla: translate(150,150); ja sen jälkeen pyöräytämme neliön ympäri komennolla: rotate(radians(kulma)); jossa kulma saa arvoja väliltä 0..360. Käytännössä kun hiiri liikkuu välillä 100…200, niin nämä arvot skaalataan asteikolle 0…360. Tämä muunnos onnistuu map-funktiolla. Map funktiota käytetään seuraavasti:

muuttuja2 = map(muuttuja1,min1,max1,min2,max2);

Eli muuttuja1 saa arvoja väliltä [min1,max1], jonka jälkeen muuttujan1 arvo skaalataan asteikolle [min2,max2] ja skaalattu arvo sijoitetaan muuttujalle2.

Vastaavasti jos hiiri on ikkunan oikeassa alakulmassa eli toisen neliön sisällä, niin silloin tyhjennetään tausta ja piirretään kolmio. Mikäli kaikki neljä ehtoa ei ole voimassa, niin piirretään neliö. Ohjelma on seuraavanlainen.

function setup() {
  createCanvas(600, 600);  // Ikkunan koko
}

function draw() {
  background(220);   // Tyhjennä tausta ja väritä se vaalean harmaaksi
  var x = mouseX;    // Määritellään muuttuja x ja sijoitetaan siihen hiiren x-koordinaatin arvo
  var y = mouseY;    // Määritellään muuttuja y ja sijoitetaan siihen hiiren y-koordinaatin arvo
  fill(255,0,0);     // Punainen täyttöväri
  if ((x > 100) && (x < 200) & (y > 100) & (y < 200)) {  // Jos vasemman-ylä neliön sisällä 
    push();                             // Koordinaatisto muistiin
     translate(150,150);                // Origo neliön keskelle (pyörityskeskipiste)
     var kulma = map(x,100,200,0,360);  // Muuta x arvot väliltä 100..200 asteikolle 0...360
     rotate(radians(kulma));            // Pyöräytä neliötä kulman verran
     fill(0);                           // Musta täyttöväri
     rect(-50,-50,100,100);             // Piirrä neliö siten, että origo neliön keskellä
    pop();                              // Palauta koordinaatisto muistista
  } else {                              // Jos ehto ei ole voimassa, niin silloin
     rect(100,100,100,100);             // Piirrä 100x100 neliö paikkaan (100,100)
  }
  if ((x > 400) && (x < 500) & (y > 400) & (y < 500)) {   // Jos oikean-ala neliön sisällä
     background(0);                     // Väritä tausta mustaksi
     triangle(450,400,400,500,500,500); // Piirrä kolmio
  } else {                              // Muutoin
     rect(400,400,100,100);             // Piirrä 100x100 neliö paikkaan (400,400)
  }
}

Testaa ohjelman suoritus tästä.