Controlli condizionali II: operatori logici

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!

Federico

Federico Pepe è un Ableton Certified Trainer, un esperto di tecnologie musicali, un creative coder per passione e, soprattutto, una persona a cui piace molto insegnare. Questo sito è il luogo dove, da diversi anni, raccoglie articoli, tutorial e guide. Per maggiori informazioni, visita la pagina "About me".

Potrebbero interessarti anche...

7 risposte

  1. Davide Ugolini ha detto:

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

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

  2. Ambra ha detto:

    Ecco qui il mio compito:

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

    void draw() {
    background(0);
    fill(255);
    line(width/2, 0, width/2, height);
    line(0, height/2, width, height/2);

    if((mouseX > width/2) && (mouseY < height/2)) {
    rect(width/2, 0, width/2, height/2);

    } else if((mouseX < width/2) && (mouseY < height/2)) {
    rect(0, 0, width/2, height/2);

    } else if((mouseX height/2)) {
    rect(0, height/2, width/2, height/2);

    } else if ((mouseX > width/2) && (mouseY > height/2)) {
    rect(width/2, height/2, width/2, height/2);

    }

    }
    __________

    Manca l’else, ma penso di preferire non usarlo. Mi piace la chiarezza di If ed Else if, che riportano nella propria stringa la condizione. Mi immagino una struttura molto più elaborata e penso che utilizzare If ed Else if renda, a lungo termine, il codice molto più leggibile!

    Tu che ne pensi?

  3. Federico ha detto:

    Attenzione che facendo copia-incolla del tuo codice mi segnala un errore sul secondo elseif() manca infatti l’operatore logico tra mouseX e height/2.

    Detto questo, io non ho un parere specifico sull’utilizzo di if, else o else if. Diciamo che è una di quelle cose che si imparano programmando: più vai avanti e più capisco come, secondo te, è meglio scrivere il codice. Di fatto non ci sono regole specifiche a meno che non si inizi a lavorare per un’azienda con una policy specifica su come deve essere scritto il codice.

  4. Ambra ha detto:

    eheh, hai ragione! Ho fatto un pasticcio, non so come, nel copia-incolla :P

    else if((mouseX height/2)) {
    rect(0, height/2, width/2, height/2);
    }

    Ad ogni modo, grazie per queste guide!

  5. Ambra ha detto:

    oh santa pazienza ahahah non sono io ad aver fatto un pasticcio, ma è proprio copiare il codice in questo commento che, in qualche modo, rimuove quel pezzetto! :P

    Questa volta giuro che sono stata attenta ed il copia-incolla l’ho fatto bene! :P

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.