Selektion

Än så länge har vi endast haft instruktion som som bearbetas som en sk sekvens dvs en efter den andra till man kommer till slutet, om det var i draw-blocket så upprepades alla om och om igen. Men vi behöver även kunna styra det så att vissa delar av koden körs bara om vissa villkor är uppfyllda. Tänk på förra uppgifterna: Hur gör man om rektangeln ska ändra färg vid en viss position? Äggkartonger. Om vi har rest-ägg bhövs en kartong till. Vi måste ha en konstruktion som tillåter att vi kör vissa delar av programmet endast om visa villkor är uppfyllda.

Innan man börjar koda är det inte dumt att skissa sitt förslag. Det finns två välanvända sätt att göra det. Antingen med ett aktvitetsdiagram eller pseudokod:

Aktivitetsdiagram	Pseudokod
	om x är mindre än 300    öka x med 1
	om x är mindre än 300    öka x med 1 annars    skriv ut varning
	om x är mindre än 300    öka x med 1 annars    skriv ut varning

( Ett mycket användbart aktivitetsdiagram finns här )

Och i kod ser det ut så här.Vi utöka exemplet från förra sidan:

    //Version 1 med bara 'om'

    //Variabler
    int x = 100; 

    void setup(){
      size(480,360);
    }

    void draw(){
        background(100);
        rect(x,200,50,50);

        if( x < 300) {  
          x++;
          }
    }

    //============================================================================
    // Version 2 med 'om'  och  'annars'

     //Variabler
    int x = 100; 

    void setup(){
      size(480,360);
    }

    void draw(){
    background(100);
    rect(x,200,50,50);


    if( x < 300) {  
      x++;
      } else {
        text("Du är för långt till höger!",10,340);
      }


    }

Syntax ( =skrivsätt )

    if( sanningsvärde ) {
    // koden mellan 'måsvingarna' körs endast om 
    // sanningsvärde utvärderas till true

    }


    ///Alternativt

    if( sanningsvärde ) {
    // koden mellan 'måsvingarna' körs endast om 
    // sanningsvärde utvärderas till true
    } 
    else {
    // det här blocket körs i andra fallet
    }

Exempel på sanningsvärden

Tecken som används för att jämföra två värden kallas för villkorsoperatorer. Ett uttryckt som a < 5 är antingen sant eller falskt (true/false) och därför ekvivalent ett sanningsvärde.

typ	exempel
större än	a > b , a > 5
större eller lika	a >= b, a>= 5
mindre än	b < a , 5 < a
precis lika	a == b
olika	a != b

Laboration 1

1. Gör om programmet (första exempel, version 1) så att rektangeln börjar om från x = 100;
2. Gör om programmet så att rektangeln byta färg istället för att stanna.
2. Fråga användaren efter gränsen istället för 300 som fast värde. 
3. Utöka programmet att rektangeln studsar fram och tillbaka. Tips: Definera en variabel 'steg = 1' för att sedan ändra rektangelns x-koordinat med ' x = x + steg' vid rätt tillfälle ändras  steg till -1.
4. Ta fram <a href="../variables#laboration-3">äggkartong</a> en gång till. lägg en if-sats konstruktion som avgör om det blir 'restägg' eller inte och använd det för att beräkna rät antal kartonger för alla tänkbara fall.

Flera sanningar samtidigt

Vi kan nu reagera om värdet av en variabel till exempel överstiga ett värde eller dylikt. Men hur kan man testa om en variabel är nu mellan två gränser? Det finns möjlighet att koppla ihop två sanningsvärden. Låt säg att rektangeln ha färgen blå för 100 < x < 300 annars röd. det gör genom att testa om x uppfyller kravet att den är större än 100 (100 < x) OCH samtidigt mindre än 300 ( x < 300). I kod ser det ut så här:

    int x = 10; 

    void setup(){
    size(480,360);
        }

    void draw(){
        background(100);
        rect(x,200,50,50);

        x++;

        if(100 < x &&  x < 300) {  
            fill(0,0,200); // blå
        }
        else {
            fill(200,0,0); // röd
        }
    }

Samma restultat kan nås om man formulerar if satsen med ELLER ( || ) istället för OCH ( && ):

int x = 10; 

    void setup(){
    size(480,360);
        }

    void draw(){
        background(100);
        rect(x,200,50,50);

        x++;

        if(100 > x ||  x > 300) {  
            fill(200,0,0);  //röd
        }
        else {
            fill(0,0,200);  //blå
        }
    }

Uttryck	läses	Exempelvärde	Utvärderas till
a < 100	a mindre 100	a = 50	true
a < 100	a mindre 100	a = 100	false
100 <= a	a större eller lika 100	a = 100	true
a == 100	a (precis) lika med 100	a = 99,9999	false
a != 100	a inte like med 100	a = 99	true
100 < a && a < 300	a större än 100 OCH a mindre än 300	a = 200	true
100 < a && a < 300	a större än 100 OCH a mindre än 300	a = 400 (första villkor uppfylld men inte andra)	false
a < 100 || a > 300	a mindre än 100 ELLER a större än 300	a = 400 (räcker med ett uppfyllt villkor )	true

Laboration 2

//Variabler
PImage img;

void setup(){
    size(520, 370); // anpassad till bilden + 10px ram
    background(50);
    img = loadImage("guioche.jpg"); //ladda bilden in i programmet
    image(img,10,10); //visa bilden. 10:10 är övre vänstre hörn

    textSize(42);
    fill(0,0,0,50); 
    rect(64,100,386,67);
    fill(0,60,0);
    text("Bussbiljett Zone A",71,148);
}

2. Ta fram övningen 'trafikljuset' Kapitel Grunder o Grafik. Utöka programmet så att det visas endast "röd" sedan "röd och gul" osv. Det kan göras med en räknare 'tid' som öka med 1 varje omgång av draw(). Sedan ska visas cirklar vissa om värdet är mellan 0 och sedan, andra om värdet är mellan 61 och 120, osv. Men välj gärna andra gränser för en 'långsamare' trafikljus. Efter ett viss värde borde räknaren sättas på noll igen.

Sammanfattning