Archivi tag: else if

Getting started

Controlli condizionali II: operatori logici

2 commenti

NdA: da oggi, nei post della categoria Processing troverete gli screenshot aggiornati alla versione 3. Se volete scoprire quali sono le principali novità di quest’ultima versione, potete fare riferimento a questo post.

La scorsa settimana abbiamo imparato a utilizzare i controlli condizionali if, else if ed else per fare in modo che i nostri programmi eseguano determinate azioni al verificarsi di condizioni prestabilite.

Operatori Logici

Oggi approfondiamo l’argomento introducendo gli Operatori Logici. Può capitare, infatti, di avere la necessità di concatenare insieme più controlli condizionali: immaginiamo, ad esempio, di voler realizzare un programma in cui il colore dello sfondo cambia in base sia alla posizione X che Y del mouse.

In italiano dovremmo scrivere una cosa simile a:

SE la posizione X del mouse è inferiore alla metà della larghezza della finestra E la posizione Y del mouse è inferiore alla metà dell'altezza della finestra ALLORA colora lo sfondo di nero.

Possiamo tradurre in codice la frase di prima così:

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

void draw() {
  if(mouseX < width/2) {
    if(mouseY < height/2 {
    }
  }
}

Oppure, in modo più elegante:

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

void draw() {
  if((mouseX < width/2) && (mouseY < height/2)) {
  }
}

Gli operatori logici che possiamo utilizzare sono fondamentalmente 3:

  • && (AND) quando entrambe le condizioni devono essere true
  • || (OR) quando è sufficiente che una delle due condizioni sia true
  • ! (NOT) per testare se la condizione è not true oppure not false

Faccio una precisazione: benché non sia richiesto, se non in casi particolari, che le condizioni prima e dopo l'operatore logico siano racchiuse tra parentesi, io preferisco sempre aggiungere delle parentesi tonde per essere sicuro di rendere chiaro quali condizioni sto testando.

Ecco un esempio:

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

void draw() {
  if((mouseX < width/2) && (mouseY < height/2)) {
    background(255, 0, 0);
  } else if((mouseX > width/2) && (mouseY < height/2)) {
    background(0, 255, 0);
  } else {
    background(0);
  }
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);
}

Traduco il codice in italiano:

Imposto una finestra di dimensioni 500x500px e che le linee di riferimento disegnate saranno di colore bianco. SE la posizione X del mouse sarà inferiore alla metà della larghezza della finestra E la posizione Y del mouse sarà inferiore alla metà dell'altezza della finestra allora lo sfondo sarà rosso ALTRIMENTI SE la posizione X del mouse sarà superiore alla metà della larghezza della finestra E la posizione Y del mouse sarà inferiore alla metà dell'altezza della finestra allora lo sfondo sarà verde ALTRIMENTI lo sfondo sarà nero.

Questo è il risultato:

Utilizzo degli operatori Logici in Processing

Utilizzo degli operatori logici in Processing

Compiti per casa

Prendendo spunto dal codice che abbiamo scritto oggi, scrivete un programma in cui la finestra, con lo sfondo di colore nero, sia divisa in 4 quadranti (consiglio di fare delle linee di riferimento di colore bianco). L'obiettivo del vostro programma è fare in modo che si evidenzi con il colore bianco il quadrante su cui passate sopra con il mouse facendo in modo che gli altri 3 rimangono di colore nero.

Buon lavoro!

Getting started

Controlli condizionali: if, else if, else

2 commenti

Abbandoniamo temporaneamente la casualità generata dalla funzione random(), che abbiamo visto la scorsa settimana, per immergerci nel mondo dei controlli condizionali.

Nella vita di tutti i giorni siamo condizionati da scelte: siamo abituati a pensare che se facciamo qualcosa allora accadrà qualcosa di specifico altrimenti (cioè nel caso in cui non si verifichi la condizione iniziale), non succederà nulla.

Il nostro obiettivo di oggi è avere la possibilità di creare una logica simile all’interno dei nostri programmi ovvero far eseguire determinate parti di codice solo al verificarsi di condizioni specifiche. Stiamo cercando di fare qualcosa di simile a quello che abbiamo già visto con mousePressed() e keyPressed() ma, questa volta, vogliamo avere ancora più controllo.

Espressioni e variabili booleane

I computer, purtroppo (o per fortuna), non sono macchine intelligenti e seguono una logica abbastanza semplice: una condizione può essere vera oppure falsa, in inglese true o false. Nell’elenco dei tipi di variabili più comuni ho volutamente escluso quelle di tipo booleano: variabili, dunque, che possiamo creare e inizializzare e a cui possiamo assegnare solo uno di questi due valori.

Una cosa molto importante è che non può esistere in nessun programma una variabile che sia contemporaneamente vera e falsa.

Operatori di confronto

Dal momento che ci troveremo spesso a lavorare con dei valori numerici, possiamo utilizzare gli operatori di confronto/comparazione:

  • Maggiore: >
  • Minore: <
  • Maggiore o uguale: >=
  • Minore o uguale: <=
  • Uguale: ==
  • Diverso: !=

Controlli condizionali

Per inserire un controllo condizionale è sufficiente tradurre in inglese le parole che ho sottolineato precedentemente e creare dei blocchi di codice con le classiche parentesi graffe: il se diventa, dunque, if mentre l’altrimenti si traduce con else.

Nel campo condizione dobbiamo inserire la nostra espressione di controllo.

Esempio 1:

/*
 * Controlli condizionali: if, else if, else
 * by Federico Pepe
 * http://blog.federicopepe.com
*/
void setup() {
  size(500, 500);
  stroke(255);
}
void draw() {
  if(mouseX > width/2) {
    background(0);
  } else {
    background(127);
  }
  line(width/2, 0, width/2, height); 
}

Con questo programma verifichiamo se la posizione X del mouse è maggiore della metà della larghezza. In caso positivo (true), lo sfondo della finestra verrà colorato di nero, in caso contrario (false) di un grigio scuro.

Per comodità ho creato una linea bianca che mi segnala esattamente il punto da oltrepassare per vedere lo sfondo cambiare colore. Avendo utilizzato la condizione maggiore se il valore di mouse X è pari a 250, la metà della larghezza, la condizione sarà ancora considerata false.

Esempio 2:

/*
 * Controlli condizionali: if, else if, else
 * by Federico Pepe
 * http://blog.federicopepe.com
 */
void setup() {
  size(500, 500);
  stroke(255);
}
void draw() {
  if (mouseX > 200) {
    background(200);
  } else if (mouseX > 100) {
    background(127);
  } else {
    background(0);
  }
  line(100, 0, 100, height);
  line(200, 0, 200, height);
}

In questo secondo esempio abbiamo due condizioni differenti: se la X del mouse è maggiore di 200 lo sfondo sarà grigio chiaro, altrimenti se (else if) è maggiore di 100 lo sfondo sarà grigio scuro, altrimenti sarà nero. È possibile concatenare molteplici condizioni else if per coprire tutti i casi che ci interessa verificare.

La prossima settimana faremo altri esempi per essere sicuri di aver appreso il funzionamento dei controlli condizionali; nel frattempo sbizzarritevi con i vostri sketch.