3. Configurazioni parametriche

La programmazione

“Algoritmi + Strutture Dati = Programmi” è il titolo di un importante testo di Niklaus Wirth.

Cos'è una variabile

Contenitore di valori modificabili durante l'esecuzione del programma.

Nome della variabile

Deve:

• iniziare con una lettera non accentata, con "_" o "$"
• contenere lettere e/o numeri ma non spazi
• essere diverso da altri identificatori del linguaggio

Si consiglia di non utilizzare il carattere "$" perché è usato come identificatore da una libreria molto diffusa (jQuery).

Valore della variabile

che solitamente rappresentano:

• numeri (interi o con decimali)
• stringhe (sequenze di caratteri)
• valori booleani (true o false)

Valori numerici interi

	function setup() {
		var peso;            // dichiarazione
		peso = 53;           // assegnazione
		text( peso, 10,20 ); // lettura/uso
	}
	

La dichiarazione ('var' seguito dal nome della variabile) va fatta una sola volta prima dell'uso.

Valori numerici con decimali

	function setup() {
		var peso;            // dichiarazione
		peso = 53.86;        // assegnazione
		text( peso, 10,20 ); // lettura/uso
	}
	

La parte intera e quella decimale vanno separati dal punto (non dalla virgola).

Valori stringa

	function setup() {
		var specie;            // dichiarazione
		specie = "felino";     // assegnazione
		text( specie, 10,20 ); // lettura/uso
	}
	

La sequenza di caratteri dev'essere delimitata dalle doppie virgolette.

Valori booleani

	function setup() {
		var verificato;            // dichiarazione
		verificato = true;         // assegnazione
		text( verificato, 10,20 ); // lettura/uso
	}
	

Le parole true e false non devono essere messe fra virgolette perché sono parole chiave di JavaScript.

Dichiarare e assegnare direttamente

	function setup() {
		var peso = 53;       // dichiarazione
							 // e assegnazione
		text( peso, 10,20 ); // lettura/uso
	}
	

La parola chiave 'var' non va ripetuta per cambiare il valore.

Riferimenti al contenuto delle variabili

	function setup() {
		var pesoA = 53;     // valore esplicito
		var pesoB = pesoA;  // valore della variabile
		text( pesoB, 10,20 );
	}
	

JavaScript riconosce la variabile e ne legge il contenuto.

Variabili di sistema

Contengono informazioni sullo stato dello sketch e degli elementi con cui interagisce (dimensione del canvas, posizione mouse, tasto premuto, ecc.).

Ad esempio, larghezza e altezza del canvas

	function setup() {
		background( 200 );
		rect( 0,30, width,40 );
		rect( 30,0, 40,height );
	}
	

Provare a modificare le dimensioni del canvas usando l'istruzione createCanvas() prima di background(200).

Costanti di sistema

Per convenzione i nomi vengono scritti tutti in maiuscolo e contengono valori che non hanno bisogno di essere modificati (costanti matematiche, codici di parametri, ecc.).

Ad esempio, le costanti PI

	function setup() {
		background( 200 );
		arc( 50,50, 70,70, QUARTER_PI,TAU );
	}
	

Ad esempio, i codici d'impostazione

	createCanvas( 640,480, WEBGL );

	colorMode( HSB, 360,100,100 );

	textAlign( RIGHT, BOTTOM );

	rectMode( CENTER );
	

Il codice è solo un elenco di esempi e non produce nessun output grafico.

Operatori

Principali operatori aritmetici

Risultati memorizzati o usati direttamente

	function setup() {
		background( 200 );
		var proporzione = 0.5;
		var larghezza = width * proporzione;
		rect( 0,0, larghezza,height-1 );
	}
	

Provare a modificare le dimensioni del canvas usando l'istruzione createCanvas() prima di background(200).

"Istruzioni" (funzioni) che restituiscono numeri

Funzioni matematiche

Nell'esempio, dopo l'esecuzione dell'istruzione, la variabile radiceQuadrata conterrà 9.

Ad esempio, la funzione dist()

	function setup() {
		background( 200 );
		line( 20,15, 80,70 );
		var lunghezza = dist( 20,15, 80,70 );
		text( lunghezza, 5,95 );
	}
	

Il valore in basso è la lunghezza della linea.

Funzioni di conversione

Nell'esempio, la funzione int() farà una doppia conversione (da stringa a numero con decimali a numero intero) e la variabile variabileIntera conterrà il valore numerico 79.

Per arrotondare all'intero più vicino è possibile usare la funzione round().

Funzione random(max)

Nell'esempio, la variabile valoreCasuale conterrà un numero con decimali non prevedibile (dall'utente) fra 0 e 70 (escluso).

Esempio funzione random()

	function setup() {
		background( 200 );
		noFill();
		ellipse( 50,50, random(100),40 );
		ellipse( 50,50, random(100),40 );
		ellipse( 50,50, random(100),40 );
	}
	

Provare a far rieseguire il codice più volte ricaricando la pagina cono lo scketch.

Funzione random(min,max)

Nell'esempio, la variabile casuale conterrà un numero decimale a caso fra -50 e 70 (escluso).

Mappatura dei valori

Problema: ho un valore (v) che può variare da un minimo (vMin) a un massimo (vMax) ma devo usarlo in un'istruzione che accetta parametri con un intervallo diverso (mMin e mMax). Cosa faccio?

Esempio funzione map()

	function setup() {
		var perc = 50;  // percentuale
		var grigio = map( perc, 0,100, 0,255 );
		background( grigio );
	}
	

L'operatore stringa +

	function setup() {
		var cognome = "Pallino";
		var nomeCompleto = "Pinco " + cognome;
		text( nomeCompleto, 10,20 );
	}
	

L'operatore restituisce una stringa composta dagli operandi concatenati ed è l'unico operatore utilizzabile con le stringhe.

Fare attenzione all'uso di variabili miste perché l'operatore + può concatenare, se trova almeno una stringa (ad es. con "20"+2, che restituisce "202"), o sommare (ad es. con 20+2, che restituisce 22).

Funzioni stringa

Alcune funzioni permettono di eseguire operazioni che restituiscono una stringa creata o modificata.

	function setup() {
		var conSpazi = "  parole parole  ";
		var senzaSpazi = trim( conSpazi );
		text( ">"+senzaSpazi+"<", 10,20 );
	}
	

La funzione trim(), ad esempio, restituisce una stringa senza spazi iniziali e finali.

Proprietà e metodi delle variabili stringa

Le variabili stringa contengono anche una serie di variabili (proprietà) e funzioni (metodi) che permettono di ottenere informazioni o ulteriori modifiche.

	function setup() {
		var nome = "pinco pallino";
		var maiuscolo = nome.toUpperCase();
		text( maiuscolo, 10,20 );
	}
	

Il punto permette di indicare la dipendenza dei metodi dalla variabile specifica.

Il metodo non richiede l'indicazione della stringa da trasformare in maiuscolo perché utilizza i caratteri della variabile nome.

Le variabili stringa contegono anche una proprietà che permette di capire di quanti caratteri sono composte:
lunghezza = nomeVariabile.length;

Istruzioni condizionali: if

	if (condizione) {
		istruzioni A
	}
	

La condizione dev'essere una variabile booleana o un'espressione che restituisce true o false.

Le istruzioni vengono eseguite solo se la condizione è vera (true).

Le parentesi graffe possono essere tolte se viene usata un'unica istruzione.

Esempio d'uso dell'if

	function setup() {
		background( 200 );
		var cerchio = false;
		rect( 10,15, 80,70 );
		if (cerchio) {
			ellipse( 50,50, 60,60 );
		}
	}
	

La variabile cerchio è impostata a false e viene quindi disegnato solo il rettangolo.

Provare a cambiare il valore della variabile cerchio da false a true.

Istruzioni condizionali: if else

	if (condizione) {
		istruzioni A
	} else {
		istruzioni B
	}
	

La parola else permette di indicare una o più istruzioni alternative a quelle del primo blocco.

Le istruzioni A vengono eseguite solo se la condizione è vera (true).

Le istruzioni B vengono eseguite solo se la condizione è falsa (false).

Esempio d'uso di if else

	function setup() {
		background( 200 );
		var cerchio = false;
		if (cerchio) {
			ellipse( 50,50, 60,60 );
		} else {
			rect( 10,15, 80,70 );
		}
	}
	

L'uso di else permette di far disegnare solo il cerchio o solo il rettangolo.

Provare a cambiare il valore della variabile cerchio da false a true.

Operatori logici

Sia il risultato che gli operandi sono valori booleani.

Esempio d'uso di un operatore logico

	function setup() {
		background( 200 );
		var buco = true;
		var acqua = true;
		if (buco) {
		  ellipse( 50,10, 10,10 );
		}
		if (buco && acqua) {
		  bezier( 50,10, 95,70, 5,70, 50,10 );  // goccia
		}
	}
	

La goccia viene disegnata solo se sia buco che acqua sono true.

Provare a modificare i valori iniziali delle variabili buco e acqua.

Principali operatori di confronto

Il risultato è sempre un valore booleano ma gli operandi possono essere numeri o stringhe.

Alcuni operatori possono essere combinati fra loro e verificare contemporaneamente se...
A è maggiore o uguale a B (>=) o
A è minore o uguale a B (<=).

Esempio d'uso di un operatore di confronto

	function setup() {
		background( 200 );
		var lato = 70;
		if (lato > 90) {
		  lato = 90;
		}
		rect( 5,5, lato,lato );
	}
	

Se il valore della variabile lato supera 90 la variabile viene reimpostata a 90 e quindi non potrà mai avere un valore superiore.

Provare a modificare il valore iniziale della variabile lato con numeri superiori o inferiori a 90.

Parametrizzazione del codice

Parametri numerici

	function setup() {
		background( 200 );
		// PARAMETRI
		var diametro1 = random(20,70);
		var diametro2 = random(20,70);
		var diametro3 = random(20,70);
		// ISTRUZIONI PARAMETRIZZATE
		ellipse( 50,35, diametro1,diametro1 );
		ellipse( 40,60, diametro2,diametro2 );
		ellipse( 60,60, diametro3,diametro3 );
		noStroke();
		ellipse( 50,35, diametro1-2,diametro1-2 );
		ellipse( 40,60, diametro2-2,diametro2-2 );
		ellipse( 60,60, diametro3-2,diametro3-2 );
	}
	

Dichiarazione e impostazione del parametro.

Uso diretto del parametro.

Uso del parametro rielaborato.

Le ultime 4 righe di codice cancellano i contorni sovrapposti dei cerchi.

Parametri booleani

	function setup() {
		background( 200 );
		// PARAMETRI
		var sinistra = random(100) < 50;
		var destra = random(100) < 50;
		var alto = random(100) < 50;
		var basso = random(100) < 50;
		// ISTRUZIONI PARAMETRIZZATE
		noStroke();
		if (sinistra)
			rect( 15,10, 20,80 );
		if (destra)
			rect( 65,10, 20,80 );
		if (alto)
			rect( 10,15, 80,20 );
		if (basso)
			rect( 10,65, 80,20 );
	}
	

50% di probabilità che il risultato sia true.

Può anche capitare che non venga disegnato nessuno dei rettangoli (se tutte le variabili sono false).

Parametri di selezione

	function setup() {
		background( 200 );
		// PARAMETRI
		var forma = int( random(3) );
		// ISTRUZIONI PARAMETRIZZATE
		if (forma == 0)
			rect( 20,20, 60,60 );
		else if (forma == 1)
			ellipse( 50,50, 60,60 );
		else  // forma==2, per esclusione
			triangle( 10,80, 50,20, 90,80 );
	}
	

Permette di avere solo tre possibili valori interi (0, 1 e 2) escludendo i decimali che farebbero eseguire quasi sempre l'else finale.

La scelta fra più opzioni può essere fatta anche attraverso l'istruzione switch.

Parametri misti

	function setup() {
		background( 200 );
		// PARAMETRI
		var aperturaOcchi = random( 0, 30 );
		var aperturaBocca = random( 0, 35 );
		var sorriso = random(100) < 50;
		// ISTRUZIONI PARAMETRIZZATE
		fill(0);
		ellipse( 35,35, 8,aperturaOcchi );  // occhio sinistro
		ellipse( 65,35, 8,aperturaOcchi );  // occhio destro
		if (sorriso)
			arc( 50,60, 60,aperturaBocca, 0,PI );    // ◡
		else
			arc( 50,75, 60,aperturaBocca, PI,TAU );  // ◠
	}