If-valintalause

Ohjelman pitää pystyä tekemään valintoja. Valinta tehdään if-lauseen avulla. If-lause on muotoa

if (ehto) {
     Komennot;
}

If-lause toimii siten, että jos ehto on totta, niin silloin suoritetaan kaarisulkeiden sisällä olevat komennot. Mikäli ehto ei ole totta, niin silloin ei tehdä mitään. If-lause voidaan esittää pidemmässä muodossa seuraavasti.

if (ehto) {
     Komennot 1;
} else {
     Komennot 2;
}

Eli jos ehto on totta, niin silloine suoritetaan ensimmäisten kaarisulkeiden sisällä olevat komennot (Komennot 1), mikäli ehto ei ole totta, niin silloin suoritetaan toisten kaarisulkeiden sisällä olevat komennot (Komennot 2). Ehtolauseessa yleensä vertaillaan joko kahta muuttujaa tai muuttujaa ja arvoa. Vertailuun käytetään vertailuoperaattoreita, jotka ovat.

Katsotaan if-lausetta esimerkin avulla. Luodaan kaksi muuttujaa x ja y. Muuttuja x saa arvon hiiren vaakasuuntaisesta x-koordinaatista ja muuttuja y saa arvon hiiren pystysuuntaisesta y-koordinaatista. Laitetaan ohjelmassa ikkunan kooksi 600 x 600. Jos x:n arvo on suurempi kuin 300, niin silloin piirretään punainen suorakulmion oikealle, muutoin piirretään sininen suorakulmio vasemmalle. Jos y:n arvo on suurempi kuin 300, niin silloin piirretään vihreä suorakulmio alas, muutoin piirretään keltainen suorakulmio ylös.

Ohjelman koodi on seuraavanlainen.

function setup() {
  createCanvas(600, 600);   // Ikkunan koko 600 x 600
  noStroke();               // Ei reunaviivaa
}

function draw() {
  background(0);            // Taustaväri musta
  var x = mouseX;           // Määritellään muuttuja x ja annetaan sille arvo hiiren x-koordinaatista
  var y = mouseY;           // Määritellään muuttuja y ja annetaan sille arvo hiiren y-koordinaatista
  if (x > 300) {            // Jos x on suurempi kuin 300, niin silloin
   fill(255,0,0,150);       // Aseta punainen täyttöväri, peittävyys 150
   rect(300,0,300,600);     // Piirrä suorakulmio pisteeseen (300,0), jonka leveys on 300 ja korkeus 600 
  } else {                  // Muutoin (jos x on pienempi tai yhtäsuuri kuin 300)
   fill(0,0,255,150);       // Aseta sininen täyttöväri, peittävyys 150
   rect(0,0,300,600);       // Piirrä suorakulmio pisteeseen (0,0), jonka leveys on 300 ja korkeus 600
  }
  if (y > 300) {            // Jos y on suurempi kuin 300, niin silloin
   fill(0,255,0,150);       // Aseta vihreä täyttöväri, peittävyys 150
   rect(0,300,600,300);     // Piirrä suorakulmio pisteeseen (0,300), jonka leveys on 600 ja korkeus 300
  } else {                  // Muutoin (jos y on pienempi tai yhtäsuuri kuin 300)
   fill(255,255,0,150);     // Aseta keltainen täyttöväri, peittävyys 150
   rect(0,0,600,300);       // Piirrä suorakulmio pisteeseen (0,0), jonka leveys on 600 ja korkeus 300.
  }
}

Väreissä on mukana läpinäkyvyys, joten värit hieman sekoittuvat keskenään. Sininen tai punainen suorakulmio piirretään ensin ja näiden päälle piirretään vihreä tai keltainen suorakulmio. Ohjelman suoritus on seuraavanlainen. Liikuta hiirtä ja katso mitä tapahtuu.

​