Processing Ita

5/16/2018 Processing Ita - slidepdf.com

http://slidepdf.com/reader/full/processing-ita 1/69

processing guida introduttiva alla programmazione visuale

1



indice:

prima parte:

seconda parte:terza parte:quarta parte:quinta parte:

This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copyof this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ or send a letter to Creative Commons, 171 Second Street,Suite 300, San Francisco, California, 94105, USA.


2

p.3

p.34 p.48 p.54 p.60

http://creativecommons.org/licenses/by-nc-sa/3.0/






ProcessingProgrammare per l’arte

Prima Parte

Possiamo dire che Processing è un software grafico che si occupa diImmagini, Forme, Movimenti, Suoni e Interazioni.Processing è allo stesso tempo un linguaggio di programmazione, unambiente di sviluppo nonché un metodo di insegnamento dellaprogrammazione.

Processing è stato inventato da Casey Reas e Ben Fry al fine diinsegnare agli studenti nel settore dell’arte e della grafica laprogrammazione software.Oggi Processing è utilizzato da studenti, artisti, designers ericercatori per imparare, sperimentare e produrre. Processing rappresenta in pieno il proverbio di Confucio:

“se ascolto dimentico, se vedo ricordo, se faccio capisco”

Processing, in quanto linguaggio di programmazione, è unlinguaggio testuale (si scrivono le istruzioni) pensato per produrre emodificare immagini. Processing è il giusto compromesso trasemplicità (nell’uso) e complessita dei risultati che si possonoraggiungere. Sono sufficienti pochi minuti di corso affinchè unostudente possa scrivere le prime righe di codice ed osservare deirisultati.Utenti avanzati possono invece realizzare progetti anche moltocomplessi scrivendo direttamente delle librerie che possono anchemigliorare ed aumentare le funzionalità del software stesso.

I lavori fatti in Processing possono essere facilmente esportati nel web e questo aspetto ha facilitato la distribuzione del software edella sua conoscenza. Il sito ufficiale di Processing è www.processing.org , all’interno del sito è presente anche un forumcon migliaia di iscritti che discutono assiduamente riguardo leproblematiche tecniche e creative.

Processing facilita l’insegnamento della grafica digitale, delle tecniche

di interazione come ad esempio disegno vettoriale e raster, image


3

http://www.processing.org/

http://www.processing.org/



processing, gestione degli eventi del mouse e della tastiera ecomunicazione nelle reti di computer.Le librerie estendono le funzionalità di base anche alla generazione

dei suoni, alla comunicazione dei dati (input/output) allefunzionalità tridimensionali ed esportazioni file in vari formati.

Il linguaggio Processing non è molto diverso da tanti altri linguaggidi programmazione. Processing è stato progettato raffinando erivedendo questi linguaggi che lo hanno preceduto. Questo aspetto èmolto importante, infatti possiamo vedere Processing come unostrumento per avvicinarsi alla programmazione. Chi impara aprogrammare in Processing avrà il futuro molto facilitato qualora volesse imparare a programmare anche in altri linguaggi.

L’aspetto principale che differenzia Processing da altri linguaggi diprogrammazione riguarda la sua versatilità per tutto ciò che è legatoalla grafica, al disegno, all’animazione e alle interazioni live.

Installare e Aprire Processing

Processing è appunto Open Source e completamente gratuito. PerScaricarlo è sufficiente andare all’indirizzo www.processing.org/download dove si trovano le versioni per Linux, OSX e Windows.

L’ambiente di sviluppo di Processing (Processing DevelopmentEnvironment PDE) è composto da un semplice editor testuale dove vengono scritte le istruzioni. PDE è anche l’estensione dei file dilavoro prodotti in Processing.Poi troviamo un’area messaggi, una console testuale e una toolbardalla quale possono essere effettuate le operazioni più comuni(nuovo, apri, salva, esporta…). Sempre nella Toolbar in alto sonopresenti i due tipici pulsanti degli ambienti di programmazione (Stop

e Run).

Ecco la lista completa dei pulsanti presenti nella Toolbar:RUNSTOPNEW OPENSAVEEXPORT


4

http://www.processing.org/download








Quando si lancia un programma (Run) il risultato compare in unafinestra che si apre automaticamente (display window).Ogni programma scritto con Processing (attraverso l’editor testuale)

si chiama Sketch. All’interno dell’editor testuale sono presenti le duetipiche funzionalità Taglia e Incolla (Cut and Paste) e Cerca eSostituisci (Search and Replace).L’area messaggi, in basso ci dice ad esempio se una volta lanciato ilprogramma ci sono errori. In pratica l’area messaggi è il mezzo cheProcessing usa per comunicare con noi, scrivendoci in quell’areaqualunque tipo di messaggio riguardo il suo comportamento (adesempio se si scrive uno Sketch errato sarà l’area messaggi adavvertirci).L’area della conosole testuale (sotto l’area messaggi) ci scrive dei

messaggi in forma più estesa e dettagliata della message window).Questa area ha anche la funzione di controllo durante le operazionidi programmazione. Ad esempio quando si vuole controllare unafare intermedia della programmazione, possiamo far comparire inquesta finestra i dati desiderati (più avanti sarà tutto più chiaro).

I menu di Processing sono solo 6:Processing FileEditSketch ToolsHelp

Questa breve lista dei menù all’interno dei quali troviamo pochicomandi, rende l’idea della semplicità dell’ambiente di sviluppoProcessing. Vedremo i comandi all’interno dei menù più avanti.Quando si crea un nuovo Sketch (programma) Processing creaautomaticamente anche una specifica cartella che avrà lo stesso

nome dello sketch (come spiegato prima il file dove è scritto ilprogramma ha l’estensione .pde).Processing è un ambiente in grado di gestire file multimedialipertanto se all’interno del nostro progetto per esempio aggiungiamoun suono o un’immagine questi file andranno a collocarsiautomaticamente dentro la cartella data, all’interno della cartelladello Sketch. Processing permette di lavorare secondo la logica“drag and drop” pertanto per aggiungere un’immagine al nostroprogramma è sufficiente prendere il file e trascinarlo sopra l’editortestuale dove stiamo scrivendo il nostro Sketch.


5



La cartella dello Sketch che a sua volta conterrà anche la cartella datacon tutti i file multimediali aggiunti si troverà in una directory delcomputer che possiamo decidere dal menù File/Preferences.

Programmare in Processing

Abbiamo detto che programmare in Processing è molto semplicepertanto il modo migliore per capire questo concetto è iniziare ascrivere qualche semplice programma cercando di comprenderne ilsenso.

//Creiamo una finestra 320 x 240 pixel//

size(320, 240);background(255);

Abbiamo scritto tre righe nella finestra testuale dell’ambiente disviluppo di Processing.La prima riga potrebbe sembrare semplice e tutti i programmatorigiovani o inesperti o egoisti o masochisti tendono a trascurarequesto tipo di istruzione che invece è determinante.Ogni volta che scriviamo un programma dobbiamo aggiungere dei

commenti che possano essere letti dai programmatori ma che non vengano interpretati come istruzioni dal programma stesso. Icommenti sono importanti perchè attraverso i commenti ilprogrammatore dichiara le operazioni che compie in modo chepotrà rileggerli in futuro oppure in modo che altri programmatoriche apriranno il programma leggendo i commenti possano capirecome ha ragionato il programmatore precedente.Commentare un programma significa comunicare con se stessi (nelfuturo) e con gli altri. Non commentare un programma significa noncomunicare ne con se stessi (quando un anno dopo aprirete un

programma fatto e non commentato non ricorderete qualiragionaventi avrete fatto e vi dispererete) ne con altre persone allequali per lavoro o per divertimento volete lasciare in eredità il vostrolavoro. Un programma non commentato è spazzatura.Questo aspetto così centrale della programmazione risulta ancor piùcentrale quando ci riferiamo ad un programma Open Source comeProcessing. Processing non costa nulla perchè delle persone buoned’animo hanno lavorato a lungo e hanno deciso di larsciarci ineredità gratuita il loro lavoro. Un programmatore che non scrive i

commenti sui programmi realizzati in processing contravviene alla


6



filosofia Open Source perchè i suoi programmi sarannodifficilmente interpretabili da altri programmatori.La stesso giudizio però vale anche per i programmatori che lavorano

in ambiti commerciali. Un programmatore che non commenta ipropri software danneggia economicamente il suo datore di lavoro etutto l’ambiente nel quale lavora.

Torniamo quindi alla nostra prima riga di programma scritta inProcessing


I due slash “//” indicano esattamente l’inizio e la fine di un

commento del programmatore. Questo commento è molto sempliceagli occhi di un programmatore esperto potrebbe sempbrare inutilema in realtà quanto più diffusamnte è documentato un softwaretanto più facile sarà la sua lettura e correzione in futuro.Per scrivere dei commenti che siano più lunghi di una rigaProcessing ci permette di utilizzare anche la seguente forma:

/* I commenti sono molto importanti

possiamo scriverli anche in più righe

il software non interpreta queste istruzioni*/

Vediamo invece ora la prima istruzione (o funzione) vera e propria:

size(320, 240);

Possiamo notare in questa istruzione tre elementi importanti:- Il comando “size”

- I parametri (320, 240)- Il simbolo che chiude l’istruzione “;”

Il comando “size” stabilisce che deve essere creata una finestra.Questa è la tipica istruzione con cui si inizia a programmare inProcessing. Con “size” si stabiliscono le dimensioni della finestrasulla quale poi compariranno i risultati del nostro programma.Le dimensioni che abbiamo stabilito in questo caso sono 320 pixelin larghezza (asse X) e 240 pixel in altezza (asse Y).Con “;” invece diciamo a Processing è terminata l’istruzione.

Da notare la seguente istruzione:


7



//size(320, 240);

Poichè la riga inizia con “//” Processing interpreterà tutto ciò chesegue come un commento e quindi quando si lancerà il programmanon verrà effettuata nessuna azione. A volte i programmatoridisordinati tendono a commentare molto le istruzioni durante ilprocesso produttivo. Questa operazione se non documentata è unoperazione che genera solo confusione. Pertanto quando sicommenta un’istruzione è bene spiegare, attraverso un ulteriorecommento il motivo per il quale sono presenti delle istruzionicommentate.

Rispetto ai paramentri è importante notare che ad esempio nel casodi “size” debbono essere 2 e la loro posizione è obbligatoria. Alprimo posto si mette il valore delle X e al secondo posto (dopo la virgola) si mette il valore delle Y.Infine da notare un aspetto molto importante dellaprogrammazione, la convenzione di chiudere l’istruzione con “;”potrebbe sembrare inutile e noiosa. Potrebbe anche essere così, macomunque è dobbiamo capire che qualora non mettessimo queldettaglio “;” il nostro programma non funzionerà. I linguaggi di

programmazione usano una sintassi molto più rigida della sintassiche si usa quando si parla o quando si scrive una mail. Quandoscriviamo una mail ad un amico e ci dimentichiamo una virgola nelcontenuto del nostro messaggio esso arriverà a destinazioneuguamente. Se invece facciamo un errore quando scriviamol’indirizzo mail il messaggio non arriverà mai al destinatario.Scrivere un’istruzione in Processing è come scrivere un indirizzomail, se non metti la chiocciola o sbagli anche solo un puntino nonfunzionerà nulla.

Gli aspetti formali della programmazione sono importanti e nonpossono essere tralasciati. Un altro aspetto formale che nonpossiamo tralasciare in Processing è che i comandi sono “casesensitive”. “Size” e “size”non sono la stessa cosa, il comando “size”deve essere scritto con tutte le lettere minuscole, se non lo facciamoProcessing non interpreta il comando. “Size” per Processing nonsignifica nulla.

Torniamo ora alla terza riga del nostro breve programma:

background(255);


8



Possiamo facilmente distiguere il comando “background” ilparametro tra parentesi e il termine della riga di istruzione “;”.

Il comando specifico “background” indica a Processing il colore chedovrà avere lo sfondo della finestra che abbiamo appena creato. 255indica il colore bianco.

Una volta terminato di scrivere il nostro programma in tre righe lopotremo lanciare cliccando sul pulsante RUN. Potremointerrompere l’esecuzione del nostro programma cliccando sulpulsante STOP.

Numeri e Variabili

Abbiamo creato il nostro primo breve programma in Processing. Abbiamo compreso alcuni principi base della programmazione.Questi principi sono pressochè universali nella programmazione ecomprenderli in processing ci permetterà poi di applicarli apraticamente qualunque altro linguaggio di programmazione.Nel nostro primo programma abbiamo visto che i comandi possonoavere dei parametri e che questi parametri si esprimono in numeri.Nella programmazione è normale però esprimere i numeri ancheattraverso delle variabili.

Queste due espressioni producono lo stesso risultato:

//senza variabili

background(0);

//con variabili

int X = 0;

background (X);

Nel secondo caso abbiamo fatto due operazioni. Con la primaoperazione abbiamo detto al programma di attivare l’uso di una variabile che abbiamo chiamato “X” e abbiamo assegnato un valorea questa variabile “0”.Il risultato è che “background” avrà un valore pari a zero, propriocome nel primo esempio.Le variabili sono molto utili nella programmazione proprio perchèsono “variabili” e quindi il loro valore può cambiare in base a degli


9



eventi , oppure possono cambiare in base a delle operazionimatematiche.Le variabili sono molto utili anche perchè memorizzano dei valori e

permettono di riutilizzarli quando serviranno in futuro.Esistono diversi tipi di variabili; nel nostro esempio “int” indica una variabile che può assumere un valore numerico intero (senza valoridopo la virgola). “float” è un altro tipo di variabile numerica che puòinvece contenere anche valori dopo la “virgola”.Importante: come in quasi tutti i linguaggi legati all’informatica la virgola che noi utilizziamo nei numeri per indicare i valori decimali,deve essere sostituita dal punto “.”.Nei linguaggi di programmazione 10.5 equivale al 10,5 nellanotazione che utilizziamo in Italia.

Da notare che non è possibile fare operazioni matematichemescolando due variabili di tipo diverso (una “int” e l’altra “float”).

Nel linguaggio comune della programmazione l’istruzione:

int X = 0;

viene detta inizializzazione o dichiarazione di una variabile. Questotipo di istruzioni generalmente vengono messe all’inizio dei

programmi e comunque debbono essere posizionate sempre primache si utilizzi la variabile stessa.La seguente sequenza non funzionerebbe:

background (X);

int X = 10;

Se vogliamo utilizzare la variabile “X” prima la dobbiamoinizializzare “int X = 10;”.Una volta che la variabile è stata inizializzata è possibile utilizzarlatutte le volte che si desidera. Inoltre dopo l’inizializzazione la variabile può essere “manipolata”.Nell’esempio seguente osserviamo che:

int X = 10;

X = 6;

background (X);

la variabile “X” è stata prima inizializzata poi successivamente è

stato assegnato un nuovo valore alla variabile “X = 6;”.


10



Pertanto il valore finale di “background (X);” sarà 6.Ovviamente per brevità sarebbe stato più intelligente scrivere:

int X = 6;background (X);

il risultato sarebbe stato identico.

Il nome delle variabili

Abbiamo visto quindi che le variabili hanno un nome. Ho utilizzato“x” e come primo passagio potrebbe essere anche corretto maquandi si scrive un programma più complesso è invece consigliabile

dare un nome “sensato” alle variabili.Il lungo discorso che ho fatto nelle pagine precedenti riguardo icommenti vale anche per le variabili.Ipotizziamo ad esempio di voler disegnare un cerchio attraverso unprogramma e ipotizziamo che questo cerchio cambierà didimensione durante l’esecuizone del programma stesso.Potremmo assegnare a questa variabile semplicemente una lettera“X” oppure “C”, ma se immaginiamo che il nostro programma saràabbastanza complesso allora sarà sicuramente meglio utilizzare un

nome della variabile più esteso.Possiamo chiamare la variabile che gestirà il nostro cerchio adesempio “cerchio”. In questo modo quando riapriremo ilprogramma in futuro oppure qualcun’altro aprirà il nostroprogramma il nome della variabile permetterà facilmente dicomprendere di che variabile si tratta e per che cosa viene utilizzata.Pertanto quando dichiarerò la mia variabile all’inizio del programmascriverò

int cerchio = 10;

anzichè

int X = 10;

Il termine cerchio ci aiuterà molto in futuro quando il nostroprogramma andrà progressivamente coplicandosi. Ma in realtà unbuon programmatore dovrebbe precedere la dichiarazione della variabile con un commento che spiega a cosa serve quella variabile.

Ad esempio:


11



// ecco la variabile che gestisce

// il raggio del cerchio

int cerchio = 10;

Il nome delle variabili è sempre meglio che sia “parlante”. Alcuninomi però sono inibiti e non possono essere utilizzati per le variabili. Ad esempio non posso nominare una variabile “int” perchè facendoquesto complicherei molto la vita a Processing che potrebbe fareconfusione. Infatti “int” è anche un termine assegnato ad uncomando.

Di seguito una lista dei nomi di variabili che non possiamo usare inProcessing:

abstract

assert

boolean

break

byte

case

catch

char

class

const

continuedefault

do

double

else

enum

extends

false

final

finally

float

for

goto

if

implements

import

initinstanceof

int

interface

long

native

new

null

package

private

protected

public

return

setup

short

startstatic


12



stop

strictfp

super

switch

synchronizedthis

throw

throwstransient

true

try

update

void

volatile

while

Questo aspetto è comune a praticamente tutti i linguaggi diprogrammazione. Un consiglio che posso dare ai programmatoriitaliani è proprio quello di dare un nome in italiano alle variabili.

Poichè i comandi tipicamente sono in inglese si eviterà facilmente diutilizzare un nome vietato.

Esiste poi una lista di variabili che gestisce autonomamenteProcessing. Quando ad esempio abbiamo generato la finestra:

size(320, 240);

Processing ha automaticamente immagazzinato in un due variabili“width” e “height” questi valori. Se in futuro vorremo utilizzare

questi valori potremo utilizzarli richiamando direttamente le variabili.

Variabili e calcoli matematici

Le variabili normalmente vengono utilizzate anche per effettuarecalcoli matematici. Le operazioni di base che si effettuano sono più“+”, meno ”-“, per ”*” e diviso “/”.Normalmente il risultato di un’operazione matematica vienememorizzato nelle variabili.

Ad esempio:

int x = 2 + 3;

trasferisce il risultato della somma “2+3” nella variabile X almomento della sua inizializzazione “int”.Oppure:

int x = 4;


13



int y = 6;

int s = x + y;

int d = s / 2;

int m = (x * y)-2;

dichiara il valore delle variabili “x” e “y”, poi viene sommato e ilrisultato è memorizzato nella varibile “s” (da cui avremo s = 10). In“d” invece memorizziamo il risultato di della somma precedentedividendola per 2 (da cui otterremo d = 5).Infine nella quinta riga abbiamo una vera e propria espressione. Trasferiamo nella variabile “m” il risultato della moltiplicazione di“x” per “y” e successivamente, fuori dalle parentesi, sottraiamo 2 (dacui otteniamo m = 22).Da notare che il risultato di un calcolo matematico deve sempreessere associato a una variabile. Infatti se nella terza riga scriviamosolo:

x + y;

otterremo un errore quando manderemo in RUN il nostro sketch.

L’uso delle parentesi cosi come nella matematica serve per dare la

priorità ai calcoli. Inoltre moltiplicazione e sottrazione hanno lapriorità su addizione e sottrazione.

Le variabili posso essere utilizzate molte volte all’interno della stessaespressione. A volte siamo costretti a compiere diverse operazionima non ci interessato i risultati intermedi bensì solo il risultatofinale.Nel seguente programma:

int x = 4;int y = 6;

int s = x + y;

s = s / 2;

dopo avere calcolato “x+y” e memorizzato il risultato in “s”utilizziamo nuovamente “s” nella riga successiva per memorizzare il valore “s” della riga precedente diviso per 2. Operando in questomodo abbiamo “risparmiato” una variabile però abbiamo perso ilrisultato temporaneo della somma “x + y”. Quando Processing


14



eseguirà la quarta riga trasferirà in “s” il risultato della nuovaoperazione (“s/2”) e il precedente valore di “s” sarà perso.

Iniziare a disegnare

Le operazioni matematiche che si possono effettuare in Processing sono molte di più delle quattro operazioni di base, ma stiamoprocedendo secondo un livello di difficoltà progressivo. Abbiamocapito come si scrive un’istruzione in Processing e abbiamo capitol’importanza della sintassi. Inoltre abbiamo introdotto il concetto di variabile nella programmazione. Questi primi elementi cipermettono di iniziare a scrivere un programma leggermente piùcomplesso.

Per fare questo però ci avvarremo dell’aspetto maggiormentepotente in Processing, cioè le funnzionalità grafiche.Credo che comprendere una formula matematica sia molto piùsemplice se il risultato di questa formula viene tradotto in unadimensione grafica.Prima quindi di addentrarci nei meandri della programmazione edell’uso intensivo della matematica iniziamo quindi ad osservare lefunzionalità grafiche di Processing. La conoscenza delle funzionalitàgrafiche faciliterà molto lo sviluppo di formule matematiche piùcomplesse.

Abbiamo iniziato la nostra programmazione scrivendo tre righe:


size(320, 240);

background(255);

che, abbiamo visto cliccando su RUN, generano una finestra disfondo bianco della dimensione di 320 pixel di larghezza e 240 pixel

di altezza.Per disegnare qualche cosa dentro questa finestra è necessario primadi tutto comprendere il concetto di coordinate. L’asse delle X scorrein orizzontale mentre l’asse delle Y scorre in verticale.L’angolo in alto a sinistra della nostra finestra ha le coordinate (0, 0).L’angolo in basso a destra ha coordinate (320, 240). L’angolo in altoa destra ha coordinate (320, 0) mentre l’angolo in basso a sinistra hacoordinate (0, 240).

figura 2disegno delle coordinate


15



L’istruzione grafica piùsemplice di Processing permette di generareun punto nello schermo. Questa è la sua sintassi:

point(X, Y);

questo comando grafico ha due parametri, “X” ed “Y” che indicanole coordnate della finestra nella quale verrà disegnato il punto.Se ad esempio decidessimo di disegnare il punto esattamente alcentro della finestra che abbiamo appena creato sarà sufficienteaggiungere una quarta riga:


size(320, 240);background(255);

point(160, 120);

Dividendo per due la larghezza e l’altezza della finestra ottengo lecoordinate “X,Y” del punto centrale della finestra.Per comprendere meglio il funzionamento del sistema dellecoordinate è sufficiente cambiare i valori “X,Y” del comando point.Da notare che questi valori debbono necessariamente rimanere

all’interno dell’intervallo della finestra stessa.Per generare più punti nella finestra aggiungo più volte la stessaistruzione cambiando le coordinate.Mantenendo fisso uno dei due valori delle coordinate si ottengonodei punti lungo l’asse verticale o orizzontale a seconda del valoretenuto fisso.

size(320, 240);

background(255);

//Creiamo tre punti sull’asse verticale//tenendo il valore “X” stabile

point(160, 60);

point(160, 120);

point(160, 180);

L’aspetto centrale di Processing in quanto strumento didattico èproprio la facilità con la quale possiamo visualizzare dei principimatematici e statistici. Le coordinate X,Y le ritroviamo in infinitisistemi e rappresentazioni. Manipolare in Processing i valori del


16



comando “point” permette di comprendere immediatamente inmodo visivo il funzionamento delle coordinate.Questa guida può essere letta anche come un’introduzione ai

principi della matematica, della programmazione e degli algoritmi,possiamo vedere Processing come lo strumento più veloce percomprendere questi principi.

Una volta compreso il principio delle coordinate sarà moltosemplice con processing disegnare tutte le forme geometriche dibase. Ad esempio questa è la sintassi del comando per disegnare una linea:

line(x1, y1, x2, y2);

Con questo comando viene eseguita una linea che come estremi duepunti individuati con “X1,Y1” e “X2,Y2”.

size(320, 240);

background(255);

//Creiamo una linea diagonale

//che attraversa la finestra

//dall’angolo in alto a sinistra//all’angolo in basso a destra

line(0, 0, 320, 240);

Per fare una linea in senso orizzontale il parametro Y dei due puntidovrà rimanere costante. Il seguente comando genera una linea cheattraversa la finestra orizzontalmente alla sua metà.

line(0, 120, 320, 120);

Per disegnare diverse linee è sufficiente mettere un’istruzione dopol’altra nello stesso Sketch. Per disegnare diverse linee con dei puntiin comune è sufficiente scrivere più istruzioni dove ogni linea ha duecoordinate uguali alla linea successiva.

//figura composta da due linee

//che hanno un punto in comune

//100,120

line(0, 120, 100, 120);


17



line(100, 120, 80, 220);

Unendo delle linee possiamo disegnare triangoli, quadrilateri,

rettangoli e linee spezzate.

//triangolo prodotto

//disegnando 3 linee

line(0, 120, 100, 120);

line(100, 120, 80, 220);

line(80,220,0, 120);

Ovviamente però Processing prevede le istruzioni per disegnare

direttamente Triangoli, Quadrilateri, Rettangoli ed Ellissi.

triangle

quad

rect

ellipse

Ecco spiegato di seguito il funzionamento di ogni istruzione:

triangle (X1, Y1, X2, Y2, X3, Y3);

Attraverso i tre punti vengono disegnati i tre lati del triangolo.

quad (X1, Y1, X2, Y2, X3, Y3, X4, Y4);

Attraverso i quattro punti vengono definiti i quattro lati delquadrilatero. Il quadrilatero che ne deriva può avere anche tutti i latidiversi e non avere lati paralleli.Importante però quando si disegna un quadrilatero è di seguire unordine dei lati.Se ad esempio scrivete questa istruzione

quad (1, 1, 50, 10, 100, 100, 130, 100);

succede che anzichè generare un quadrilatero genererete duetrinagoli. Ciò succede perchè nel passaggio dal secondo punto alterzo e dal terzo al quarto Processing segue l’ordine dei punti equindi i lati del quadrilatero si incrocieranno.


18



Scambiando il terzo punto con il quarto otterremo invece unquadrilatero:

quad (1, 1, 50, 10, 130, 100, 100, 100);

Per quanto riguarda il rettangolo Processing ragiona in modoleggermente diverso, ecco la sintassi:

rect(x, y, width, height)

si individua con i parametri “X,Y” l’angolo in alto a sinistra delrettangolo e successivamente si dichiara la larghezza e l’altezza delrettangolo. Ovviamente se “width” e “height” hanno lo stesso valore succede che il rettangolo diventa un quadrato.

Infine ecco l’istruzione per generare ellissi e cerchi:

ellipse (X, Y, width, height);

Con “X, Y” si stabilisce il centro dell’ellisse mentre con “width,height” si stabiliscono larghezza e altezza dell’ellisse. Se i dueparametri “width, height”sono uguali si ottiene un cerchio perfetto.

Abbiamo quindi visto come si disegnano le figure geometriche dibase con Processing. Gli esempi descritti sopra fanno sempreriferimento a delle forme “stabili” legate cioè a dei numeri “fissi”. Volendo effettuare dei disegni più complessi e dinamici potremmoassociare le nostre forme a delle variabili.Inoltre le forme che abbiamo disegnato fanno sempre riferimentoad un contesto “neutrale”dove il colore di sfondo è sempre bianco ele figure sono bianche bordate di nero.

Ad esempio il seguente Sketch

size(320, 240);

background(255);

//Creiamo un quadrilatero

quad (1, 1, 50, 10, 130, 100, 100, 100);

//mettiamo sopra al quadrilatero un cerchio

ellipse (20,20, 50, 50);


19



produrrà graficamente il quadrilatero che conosciamo esuccessivamente sopra di esso un cerchio le cui coordinate delcentro sono “20, 20” ed il cui raggio è 50. Il cerchio come possiamo

vedere ha uno sfondo bianco pertano si sovrappone, coprendolo inparte, al quadrilatero.Questo comportamento ci spiega due aspetti di Processing.Prima di tutto dobbiamo capire che Processing come tutti i linguaggidi programmazione esegue i comandi leggendoli in sequenza. Lasequenza di esecuzione diventa sempre più importante e strategicaquando si complica lo Sketch.Inoltre le figure grafiche hanno un riempimento e non sonotrasparenti. Per vedere meglio questo riempimento possiamocambiare il colore della finestra.

background(0);

Canbiando il valore di background da 255 (bianco) a 0 (nero) vediamo ancora maglio che le forme geometriche create hanno uncolore di riempimento.I numeri compresi tra 0 e 255 rappresentano tutte le gradazioni che vanno dal nero al bianco, cioè sono dei grigi sempre meno intensiche alla fine 255 diventa un bianco.

Questa modalità di classificazione dei colori vale anche per il coloredi riempimento delle forme.Quando questo colore non viene dichiarato Processing stabilisceautonomamente un colore (questo in informatica viene definito valore di default).Per vedere ad esempio quale è il colore di default delle finestre èsufficiente cancellare l’istruzione background dal nostro sketch.Mandando in run Processing vediamo che la finestra assume uncolore di sfondo grigio.I comandi hanno valori di default diversi infatti le forme

geometriche che abbiamo creato hanno un valore di default per ilriempimento che è il bianco (255).Per cambiare il valore di default per il riempimento delle formegeometriche si utilizza l’istruzione:

fill ();

questa istruzione deve precedere il comando per la generazione dellaforma geometrica.

Il seguente sketch


20



size(320, 240);

fill (80);

//Creiamo un quadrilateroquad (1, 1, 50, 10, 130, 100, 100, 100);


ellipse (20,20, 50, 50);

genera quindi una finestra con un colore di sfondo di default (grigio)e delle forme geometriche con un colore di sfondo stabilito dal valore tra parentesi del comando “fill”. 80 indica un grigio scuro.Il valore fill funziona per tutte le forme geometriche che verranno

generate dopo di esso. Possiamo infatti vedere che sia il quadrilateroche il cerchio hanno lo stesso riempimento. Qualora volessimogenerare forme geometriche con valori di sfondo diversi dobbiamosemplicemente mettere dei nuovi comandi fill

size(320, 240);

//Creiamo un quadrilatero

fill (80);

quad (1, 1, 50, 10, 130, 100, 100, 100);


fill (250);

ellipse (20,20, 50, 50);

Il fill valido è sempre l’ultimo e vale nello sketch finchè non nedichiariamo uno nuovo. Il cerchio dello sketch qui sopra è pressochèbianco (250) il quadrilatero e grigio scuro (80) e se creassimo unanuoma forma geometrica dopo il cerchio senza specificare un nuovofill esso sarebbe 250.

Le forme grafiche hanno altri valori di default. Ad esempiodisegnando le forme geometriche notiamo che il bordo della formaha un colore e uno spessore. Il cerchio che abbiamo creato nelprecedente Sketch ha il bordo nero, questo colore è di default e puòessere cambiato mettendo, sempre prima dell’istruzione che generala forma geometrica , l’istruzione:

stroke (255);


21



in questo caso il cerchio avrà un bordo bianco (255) e qualora siabianco anche il riempimento ovviamente non avremo percezione delbordo stesso.

Un modo più corretto per fare scomparire il bordo da una formageometrica è l’apposito comando

nostroke (0);

così come possiamo fare scomparire il riempimento con

noFill (0);

Inoltre possiamo anche decidere lo spessore del bordo delle formegeometriche (e delle linee) attraverso l’istruzione

strokeWeight(4);

dove il valore tra parentesi indica lo spessore del bordo espresso inpixel. Da notare un aspetto importante: la “W” di Weight èmaiuscola e come ho spiegato nelle prime pagine i comandi sono“case sensitive” pertanto dobbiamo scriverli tenendo presenti lemaiuscole e le minuscole.

In generale su questo aspetto però l’ambiente di sviluppo diProcessing ci aiuta poichè se per errore digitiamo un comandoerrato (es: strokeweight) vediamo che Processing non modifica ilcolore del comando stesso lasciandolo nero. Quando invecedigitiamo un comando che per Processing significa qualche cosa (es:strokeWeight) succede che immediatamente il testo viene cambiatodi colore e diventa marrone.Da notare infine che in molti linguaggi di programmazione si seguequesta convenzione, la prima parola di un comando si scrive inminuscolo la seconda parola (attacata) inizia sempre con unamaiuscola, lo stesso vale per l’eventuali terza o quarta parola.

Diversi altri parametri permettono di intervenire sulle formegeometriche ma per ora abbiamo visto quelli essenziali e possiamoprocedere oltre nel nostro percorso di addestramento allaprogrammazione.In seguito scopriremo come gestire i colori (per ora abbiamo vistosolamente come gestire i grigi, e come gestire ad esempio le

trasparenze nonchè le curve e tante altre cose ...).


22



Ora però è necessario un nuovo salto nella modalità di lavoro.

Programmare veramente

La programmazione che abbiamo visto fino ad ora è composta dauna serie di comandi messi in sequenza. Processing elabora leistruzioni una dopo l’altra partendo dalla prima riga e terminandoall’ultima. In pratica Processing legge i programmi che abbiamofatto fino ad ora come noi leggiamo i contenuti di un libro. Abbiamo visto anche il concetto di variabile. Le variabili sono utiliperchè invece di utilizzare sempre i numeri possiamo sostituirli condelle entità il cui stato varia con lo scorrere del programma.I disegni che abbiamo fatto fino ad ora sono molto semplici e

sopratutto sono statici. Infatti tutte le istruzioni che abbiamo scritto vengono elaborate sequenzialmente ma ad una velocità tale percuiquando premiamo il tasto RUN davanti a noi compare una figuraapparentemente statica.Processing è un’applicazione che si presta bene per fare lavori di tipostatico (immagini fisse) ma si presta molto bene anche per fareanimazioni.Inoltre anche nell’elaborazione di immagini statiche potrebbesuccedere che vogliamo produrre molte volte una figura ad intervalliregolari oppure di dimensioni progressivamene crescenti.Questa tipologia di problematiche: animazioni e ripetizioni(iterazioni) possono essere risolte in modo veloce attraverso delleapposite istruzioni.

Partiamo da un caso molto semplice: all’interno della nostra finestra vogliamo disegnare dei punti ad intervalli regolari sull’asseorizzontale, uno ogni 40 pixel.Disegniamo ora questi punti utilizzando il metodo più semplice cheabbiamo visto.

size(320, 240);

background(255);

//Creiamo sette punti

//sull’asse orizzontale

//tenendo il valore “Y” stabile

point(40, 120);

point(80, 120);

point(120, 120);

point(160, 120);


23



point(200, 120);

point(240, 120);

point(280, 120);

Abbiamo visto già nelle pagine precedenti tutte le istruzioni chepermettono di generare questo nuovo Sketch. Premendo RUN vediamo sette punti a intervalli rogolari che attraversano lo schermoin senso orizzontale.Ora introduciamo l’uso delle variabili. Stabiliamo una variabile chechiamiamo “intervallo” e che ha il valore di 40, successivamentesostituiamo i valori delle coordinate X dei punti con le variabili.

size(320, 240);

background(255);

// dichiaro la variabile

int intervallo = 40;




point(intervallo, 120);

point(intervallo*2, 120);






Abbiamo moltiplicato l’intervallo per dei valori progressivamentemaggiori ottenendo esattamente lo stesso risultato del precedenteSketch. Il coefficiente di moltiplicazione che applichiamoall’invervallo stabilisce la distribuzione dei punti.Proviamo quindi a trasformare in variabile anche questocoefficiente, chiamandola coefficiente.

size(320, 240);

background(255);




// coefficiente

int coefficiente = 1;


24






point(intervallo*coefficiente, 120);coefficiente = coefficiente + 1;

point(intervallo*coefficiente, 120);

coefficiente = coefficiente + 1;






coefficiente = coefficiente + 1;point(intervallo*coefficiente, 120);




Leggendo con attenzione lo Sketch appena scritto vediamo che essoè diventato molto più lungo. Infatti per poter incrementare ogni volta il coefficiente è stata aggiunta l’apposita istruzione

“coefficiente = coefficiente + 1;”. Comunque un primo vantaggiopossiamo coglierlo dal fatto che osservando con attenzione lo sketch vediamo che le istruzioni sono sempre uguali. Infatti le due righe diistruzione:



si ripetono sette volte generando i sette punti. Per velocizzare

l’operazione di scrittura dello sketch potremmo scriverlo facendo“copia” e “incolla” delle due righe fino a ripeterle sette volte.La logica della programmazione informatica sta esattamente inquesti passaggi:

- concepire tutti i passaggi che portano al risultato(abbiamo scritto nel primo Sketch tutte le istruzioni che portavanoal risultato desiderato)- concepire questi passaggi in modo che siano ripetitivi(abbiamo scritto nel terzo Sketch istruzioni ripetitive che portano al

risultato desiderato)


25



- trasformare i passaggi da ripetitivi a ricorsivi(ora trasformeremo le operazioni ripetitive in ricorsive scrivendo un“ciclo”):

size(320, 240);

background(255);




// coefficiente



//sull’asse orizzontale//tenendo il valore “Y” stabile

for (coefficiente = 1; coefficiente < 8;

coefficiente = coefficiente+1) {


}

L’unico elemento nuovo nello Sketch precedente è esattamentel’istruzione “for” che ha la seguente sintassi:




}

I principi di ricorsività vengono stabiliti tra parentesi dopo averescritto l’istruzione “for”. Tra parentesi troviamo tre elementiseparati da “;”.Il primo elemento “coefficiente = 1” stabilisce il valore di partenzadel ciclo.Il secondo elemento “coefficiente < 8” stabilisce il valore diinterruzione del ciclo.Il terzo elemento stabilisce l’aggiornamento del valore che avverràricorsivamente (l’incremento della variabile) che nel nostro caso è“coefficiente = coefficiente+1”.In seguito all’istruzione “for” tra le parentesi graffe vengono messele operazioni da compiere durante tutta la durata del ciclo “point(intervallo*coefficiente, 120)”.


26



Leggiamo come se fosse scritta in lingua italiana l’istruzione “for”delnostro ciclo:Incrementa il coefficiente di una unità e finchè il suo valore è

minore di 7 disegna un punto. Attraverso le istruzioni di tipo “for” possiamo quindi ripetereun’operazione finchè non si verifichi una condizione di interruzione. Abbiamo quindi sintetizzato il nostro sketch, da notare che ora,qualora volessimo disegnare 100 punti invece di 7 la lunghezza dellosketch sarebbe sempre la stessa mentre invece nella modalitàprecendente avremmo dovuto scrivere 100 righe di codice, una perpunto.Il seguente Sketch disegna 100 punti, con un intervallo tra un puntoe l’altro di 3 pixel:

size(320, 240);

background(255);


int intervallo = 3;


// coefficiente



//sull’asse orizzontale//tenendo il valore “Y” stabile




}

Per fare questa semplice modifica abbiamo solamente modificato la variabile “int intervallo = 3;” ed abbiamo cambiato il valore di

interruzione del ciclo “for” con “coefficiente < 100”.La verifica di interruzione del ciclo ”for” avviene attraverso unsimbolo comunemente conosciuto: “<”.In processing è possibile anche controllare se un valore è maggiore“>” oppure se un valore è uguale “==”.Nel caso di uguale (come in molti linguaggi di programmazione) siutilizza due volte ilsimbolo “=” per evitare che il programma compia un’operazionesulla variabile.Pertanto quando scriviamo:


27



X = 5 trasferiamo il valore “5” nella variabile “X”

Mentre se scriviamo

X == 5 controlliamo se il valore di X è uguale (==) a 5.

La programmazione in Processing ci permette quindi di evitare discrivere infinite operazioni descrivendole una ad una. Attraverso icicli “for” possiamo ripetere delle operazioni infinite voltecambiando ogni volta l’operazione grazie all’uso delle variabili.

Le condizioni

Un’altra istruzione (oltre al ciclo “for”) è determinante nel processodi apprendimento della programmazione. Questa istruzione è “if ”.Continuiamo a lavorare nel nostro precedente Sketch emodifichiamolo decidendo che i nostri punti devono diventare dellelinee quando il valore del “coefficiente” supera la soglia di 90(elimino i commenti per risparmiare “carta” visto che sono presentinello Sketch precedenti).

size(320, 240);

background(255);int intervallo = 3;




if (coefficiente > 90) {

line (intervallo*coefficiente, 120,

intervallo*coefficiente, 130);

}

point(intervallo*coefficiente, 120);}

Abbiamo aggiunto l’istruzione “if ”:




}


28



che controlla se il coefficiente è maggiore di 90 e qualora lo siadisegna una linea verticale lunga 10 pixel (notare il valore dellacoordinata Y che è prima 120 poi 130). Mandando in RUN lo sketch

completo vediamo che Processing disegna 90 punti e poi inizia adisegnare delle linee.La gestione delle condizioni nella programmazione è determinante,infatti ogni volta che verifichiamo se una condizione si verificaautomaticamente creiamo un bivio nel percorso possibile che puòcompiere il programma.Quando al mattino usciamo di casa controlliamo se piove e qualorastia piovendo prendiamo l’ombrello. In quel momento compiamoun’operazione di tipo “if ”.Quando all’interno di un programma ad esempio vogliamo gestire le

possibili interazioni con l’utente che lo userà dobbiamo farloattraverso delle operazioni “if ”. Tutti i software che producono delleinterazioni con l’utente lo fanno ragiornando attraverso dei comandidi tipo “if ”.I cicli “for” insieme ai controlli “if” sono due elementi centrali dellalogica di programmazione (in processing e praticamente inqualunque altro linguaggio di programmazione).Il controllo “if ” permette anche di gestire la condizione negativa(detta “else” ossia altrimenti). Pertanto possiamo decidere anche dicambiare il nosro sketch così come segue:

size(320, 240);

background(255);

int intervallo = 3;







}

else {


}

}

Oltre al controllo precedente (“if coefficiente > 90”) abbiamoaggiunto la verifica della condizione negativa “else”. In questipassaggi è importante seguire anche l’uso delle parentesi poichè se


29



utilizzate in modo errato producono degli errori in fase diesecuzione.Rispetto all’uso delle parentesi vale sempre una regola semplice: le

parentesi aperte debbono essere tante quante le parentesi chiuse.Inoltre le parentesi sono sempre legate, quindi se si apre unaparentesi tonda si deve chiudere la parentesi tonda. Quando si apreuna graffa si deve chiudere la graffa.Inoltre le parentesi possono essere nidificate, messe cioè una dentrol’altra.Nello Sketch sopra ad esempio abbiamo messo dentro alle parentesidel ciclo “for” (che quindi inglobano il resto delle istruzioni) leparentesi relative ad “if” e ad “else”. Possiamo dire che abbiamomesso due piccole scatole (“if ” e “else”) dentro una scatola più

grande (“for”).

Programmare le animazioni

Le istruzioni che abbiamo visto fino ad ora ci hanno permesso dicapire i principi base della programmazione. Per generare delleforme grafiche è sufficiente scrivere le specifiche istruzioni. Leforme grafiche hanno sempre delle coordinate e dei valori (colore,spessore...) che possono essere espressi in numeri o attraverso delle variabili.L’esecuzione delle istruzioni da parte di Processing procedelinearmente a meno che, attraverso le istruzioni for non realizziamodei cicli.Nel caso in cui volessimo però realizzare delle animazioni dobbiamoragionare in modo diverso.

Un’animazione è composta da fotogrammi (immagini fisse)successivi. L’esecuzione dei fotogrammi ad una velocità sufficientegenera un effetto di animazione nel nostro cervello.

Processing è un software che ci permette di disegnare attrvaerso leistruzioni grafiche e ci permette anche di disegnare in movimento.Riconfiguriamo ora lo Sketch realizzato precedentemente dandociun nuovo obiettivo. Produrre attraverso un’animazione dei puntisuccessivi che compaiono progressivamente.Per ottenere questo nuovo effetto dobbiamo utilizzare le istruzioniche permettono di gestire le funzioni:

// configuro i parametri

// di esecuzione

void setup () {


30



size (320,240);

background (255);

}

int intervallo = 0;// definisco la funzione

// dentro la funzione

// metto le istruzioni ricorsive

void draw (){

frameRate (1);

point(intervallo, 120);

intervallo = intervallo + 10;

}

Le funzioni utilizzate in questo nuovo Sketch sono due:void setup () {}

void draw () {}

Con “void setup” vengono definite tutte quelle parti del programmache rimarranno effettive durante la sua esecuzione. Le istruzioniinterne alla funzione “void setup” vengono eseguite una sola volta.Infatti dentro le parentesi “{}” sono state messe le due istruzioni

tipiche di ogni Sketch per la definizione della finestra e del suocolore di sfondo. Inoltre è stata anche messa l’inizializzazione della variabile “intervallo” che è necessaria un’unica volta.

Con “void draw”viene invece definita la funzione ricorsiva che verràeseguita ricorsivamente senza sosta. “frameRate (1);” stabilisce la velocità dell’animazione che ho impostato ad 1 fotogramma alsecondo in modo al fine di cogliere bene gli effetti dello Sketch. Poimetto l’istruzione per disegnare il punto e l’istruzione per spostaredi intervalli regolari il punto stesso (intervallo = intervallo + 10).

Quando verrà mandato in RUN lo Sketch si otterrà un’animazionealla velocità di un frame al secondo dove compare un nuovo puntoogni frame. Questo punto (grazie al contatore) avrà ad ogni frameuna coordinata Y incrementata di 10.Mandando in RUN lo Sketch così come è stato configurato succedeche i punti creati nel fotogramma precedente rimangono persistentinel video pertanto ad ogni fotogramma avremo un punto in più.Qualora invece volessimo avere un effetto di spostamento del puntodovremmo ad ogni nuovo frame cancellare il punto creato nelfotogramma precedente. Per fare questo è sufficiente spostare


31



l’istruzione “background (255);”dalla funzione “setup” alla funzione“draw”.Mandando nuovamente in RUN lo Sketch modificato notiamo che il

punto del frame precedente scompare ed abbiamo un effetto dimovimento (anche se molto a scatti e lento).Per velocizzare il movimento è sufficiente modificare i parametriframeRate (lo impostiamo a 5 poi a 15). Per dare maggiore fluidità èsufficiente abbassare l’incremento costante della variabile“intervallo”; anzichè 10 mettiamo 3 poi 1.Continuando a modificare questi due parametri possiamo capiresempre meglio il loro uso. Da ricordare che nel cinema e nellatelevisione si lavora all’incirca ad una frequenza di 25 fotogrammi alsecondo.

Processing ha un valore di default del “frameRate” di 60. Pertanto seall’interno della funzione “draw” non dichiariamo una velocitàquesto valore sarà automaticamente impostato a 60 (molto veloce).Da notare infine che, mandando in esecuzione lo Sketch, il punto sisposta progressivamente da sinistra a destra finchè non scompare. Inrealtà, pur scomparendo il punto Processing continua ad elaborarelo Sketch incrementando il valore “intervallo” anche oltre ladimensione della finestra dichiarata in “size”. Questo aspetto dovràessere tenuto presente quando verranno programmati degli Sketchsempre più complessi poichè in termini di elaborazione essiimpegnano il computer pur non generando alcun effetto visibile.

Farsi in casa una funzione

I processi base della programmazione sono stati introdotti. Lefunzioni sono molto importanti poichè permettono di eseguire inmodo ricorsivo delle operazioni.La programmazione in Processing permette anche di definire dellefunzioni da richiamare quando se ne ha bisogno.

Ad esempio possiamo definire una funzione che disegna due puntiche si muovono da sinistra a destra.Costruisco una funzione come segue:

void punti () {

// con il controllo if

// faccio in modo di ripartire

// ogni volta che esco dallo schermo

if (intervallo > 320) {

intervallo = 10;


32



}


point (intervallo, 120);

point (intervallo +1, 118);}

dopo l’istruzione che introduce le funzioni (void) viede dato unnome alla funzione stessa. In questo caso “punti”. Poi per vederel’effetto in modo continuativo utilizzo anche una istruzione if chepraticamente controlla se i punti hanno superato la dimensione delloschermo “if (intervallo > 320)”. In caso affermativo riporto la variabile “intervallo” al suo valore di partenza (intervallo = 10;) equindi i punti riappariranno nello schemo a sinistra in modo infinito.Le due istruzioni “point” definiscono la posizione dei due punti chescorreranno in senso orizzontale (infatti come coordinata X hannouna variabile mentre come coordinata Y hanno un numero fisso).L’utilità delle funzioni definite sta nel fatto che possono essererichiamate quando sono necessarie. Pertanto una volta definitepotranno essere utilizzate molte volte.Di seguito uno sketch che richiama la funzione “punti” (tolgo icommenti ricorsivi dallo Sketch per brevità).


void setup () {

size (320,240);

}

void draw (){

frameRate (15);

background (255);

punti ();}

void punti () {


intervallo = 10;

}


point (intervallo, 120);

point (intervallo +1, 118);


33



}

Leggendo il contenuto della funzione “void draw ()” vediamo il

richiamo alla funzione creata “punti ();”. Per richiamare unafunzione creata è sufficiente quindi scrivere il nome della funzione emettere le due parentesi tonde e la virgola.Il flusso di esecuzione dello Sketch salterà quindi alla funzione“punti” e la scorrerà come se fosse un sottoprogramma. Terminatala funzione Processing tornerà a leggere l’istruzione subito dopo ilrichiamo. Da ricordare che tutte le istruzioni della funzione “voiddraw ()” sono eseguite da processing in modo infinito.

E’ comunque possibile interrompere questo ciclo infinito attraverso

l’istruzione “noLoop ();” sia in un punto specifico durantel’esecuzione della funzione “draw” sia come caratteristica generaledello sketch mettendo l’istruzione nell’area “setup”. Volendo far ripartire il loop infinito di “draw” è invece sufficientemettere l’istruzione “loop ();” nel punto desiderato.

Variabili, funzioni, interazioni (if) e cicli rapresentano la base dellaprogrammazione. Chi ha letto e compreso tutto ciò che è scrittonelle pagine precedenti può tranquillamente dire in giro che conoscei rudimenti della programmazione.


34



Seconda Parte

I colori

Molte istruzioni sono state volontariamente tralasciate nella primaparte del testo perchè l’intento era far comprendere i principi base esuccessivamente incrementare la conoscenza intorno ad essi. Ad esempio nella Prima parte ho descritto il metodo utilizzato inProcessing per definire il bianco, il nero e tutte le tonalità di grigioche stanno in mezzo. Traducendo in termini informatici e matematici la modalità di

classificazione utilizzata da Processing per le scale di grigio possiamodire che vengono utilizzati 8 bit. Infatti 8 bit permettono di ottenere28 (256) combinazioni diverse (da 0 a 255).Il criterio che processing utilizza per i colori è praticamente lo stessosolamente che applica la scala ai tre colori primari utilizzati perclassificare i colori negli schermi (anche quelli televisivi). Questicolori sono Il Rosso il Verde (Green) e il Blu, il metodo viene infattichiamato RGB.Processing utilizza 8 bit per classificare ognuno dei tre colori primari

del metodo RGB. Vediamo prima di tutto un semplice Sketch per capire meglio ilmetodo:

size (320, 240);

fill(255, 255, 255);

ellipse (50, 50, 20, 20);

Lo Sketch produce un cerchio (ellipse) di colore bianco poichè nellaistruzione “fill” sono stati impostati i parametri RGB al massimo valore (255, 255, 255). Ne consegue che se impostiamo tutti e tre iparametri al mimimo otteniamo il nero (0, 0, 0). Questo metodo èanche detto additivo.I tre numeri hanno una posizione fissa, il primo indica il Rosso, ilsecondo il Verde e il tezo il Blu. Di seguito una breve tabella conalcuni esempi di colore ottenuti attraverso il metodo RGB:

(255, 0, 0) = Rosso

(0, 255, 0) = Verde

(0, 0, 255) = Blu


35



(255, 255, 0) = Giallo

(150, 150, 150) = Grigio

(250, 200, 200) = Rosa

Le combinazioni possibili prodotte da 24 bit sono circa 16 milioni

di colori.

Il metodo RGB può essere applicato in sostituzione del metodo a 8bit. Ad esempio per tornare allo Sketch precedente potremmostabilire di voler disegnare un cerchio bianco con bordo rosso. Perfare questo utilizziamo un’istruzione che abbiamo già visto “stroke”però in questo caso dichiariamo i 3 colori primari.

size (320, 240);

fill(255, 255, 255);

stroke (255, 0, 0);

ellipse (50, 50, 20, 20);

Inoltre aggiungendo l’istruzione background possiamo anchestabilire il colore di sfondo della finestra. Ad esempio se allo sketchprecedente aggiungiamo l’istruzione “background (0, 0, 0)” dopol’istruzione “size”, otteniamo uno sfondo verde.

Trasparenza

Processing permette anche di gestire un quarto parametro pergestire i colori. Anche questo quarto parametro viene gestito conuno spettro di 8 bit, esso è la trasparenza (anche detto canale alpha ). Vediamo uno Sketch:

size (320, 240);

fill(0, 0, 255, 200);ellipse (50, 50, 20, 20);

fill(255, 0, 0, 100);

ellipse (40, 40, 20, 20);

fill(255, 0, 255, 50);

ellipse (20, 20, 50, 50);

Il precedente Sketch produce tre cerchi con colori diversi e gradi diriempimento diversi (il quarto parametro dell’istruzione “fill”).


36



Quando il canale Apha è impostato a 0 la figura risultacompletamente trasparente mentre quando il canale è impostato a255 la figura risulta essere piena.

Il grado di trasparenza è particolarmente utile quando si hanno dellefigure sovrapposte e si vuole lasciare trasparire le figure sottostanti.Eseguendo il precedente Sketch possiamo notare che i tre cerchisono sovrapposti secondo l’ordine definito nella scrittura delloSketch: il primo cerchio risulta essere più in fondo e vicino allosfondo, mentre l’ultimo cerchio risulta essere più in superficie equindi sopra i due cerchi scritti precedentemente.Il grado di trasparenza è applicabile anche ai grigi. Ecco una tabellaesplicativa delle possibili situazioni, riportata all’istruzione “fill” maestensibile a “background”:

fill (100); = riempimento grigiofill (100, 50); = riempimento grigio con un alto livello di trasparenzafill (255, 0, 0); = riempimento con metodo RGBfill (255, 0, 0, 120); = riempimento con metodo RGB e un mediolivello di trasparenza

Un’ultima cosa interessante sui colori riguarda le variabili. E’possibile definire delle variabili di tipo colore e successivamenterichiamare il colore direttamente scrivendo il nome della variabile.

color rosso = color(255, 0, 0);

fill(rosso);

Ad esempio nelle due righe sopra ho definito il colore rosso esuccessivamente lo richiamo all’interno di un parametro fill.Questà opportunità permette di gestire colori particolari dei qualimagari si è già provata in passato la combinazione. In questo modomettendo all’inizio dello Sketch il codice del colore sarà più facile in

seguito nello Sketch richiamarlo.Nei semplici Sketch questo tipo di funzionalità potrebbero sembrareinutili, ma quando si inizia a scrivere degli Sketch lunghi centinaia dirighe ci si accorge dell’utilità di queste funzioni (nonchè deicommenti “//”).

Il caso

Quando si realizza arte con il computer i colori sono ovviamentedeterminanti. Designare senza colori è molto più difficile elimitativo. Mentre alcuni tipi di disegni possono essere facilmente


37



riprodotti anche in scale di grigio, altri tipi di rappresentazionenecessitano dei colori. Se ben usata, l’opzione dei colori permette diottenere dei risultati e delle rappresentazioni visive molto più

efficaci.C’è un altro aspetto concettuale che riguarda la programmazione cheè altrettanto determinante: la casualità (random).Generare dei numeri a caso attraverso il computer permette diottenere delle forme visuali molto più credibili che non utilizzandodelle rigide formule trigonometriche.Le numerazioni casuali sono molto utili ad esempio quando si vuolesimulare un movimento di un “soggetto” organico oppure quando si vuole disporre in modo naturale degli oggetti. Ad esempio vuolendo simulare una distesa d’erba potremmo in

teoria decidere di mettere un filo ogni 4 pixel ma questa disposizionecosì “rigida” e costante darebbe immediatamente un effetto esteticodi artificialità all’immagine risultante. Se invece disponiamo i filid’erba in modo casuale entro un certo intervallo (tra 1 e 6 pixel)otteniamo un effetto naturale nella distribuzione dell’erba stessa.Inoltre la casualità è molto importante anche quando si voglionogestire dei giochi. Tutti gli eventi a partire da un lancio di moneta odi dado possono essere gestiti attraverso la generazione di un eventocasuale nel computer.La casualità ha quindi uno spazio importante nella generazione diimmagini e nella gestione delle animazioni fatte con Processing econ qualunque altro software.Da notare inoltre che la casualità in quanto tale non è gestibile daicomputer. Infatti i computer ragionano in base a regole molto rigidee cicliche e quando gli si chiede di generare un numero casuale essihanno difficoltà e quindi vanno alla ricerca di eventi da misurare.Il movimento del mouse è un tipico evento misurato dal computerche poi rielaborato più volte produce un numero casuale.Questo aspetto così complesso per il computer è completamente

invisibile agli utenti ma è emblematico di quanto sia ritenutoimportante il fattore casuale nella programmazione. Nonostante ilcomputer non sia “geneticamente” in grado di produrre eventicasuali, gli si chiede di gestirli perchè attraverso questa casualità sipossono simulare infiniti eventi.

Modifichiamo quindi l’ultimo Sketch della prima parte utilizzandoun fattore casuale:


void setup () {


38



size (320,240);

}

void draw (){

frameRate (5);background (255);

punti ();

}

void punti () {


intervallo = 10;

}

intervallo = intervallo + int (random (20));

point (intervallo, 120);point (intervallo +1, 118);

}

Nella funzione “void punti” ho corretto la linea che calcola il saltoche i punti devono compiere ad ogni nuovo frame:

intervallo = intervallo + int (random (20));

Precedentemente il valore di incremento era “10” mentre ora il valore di incremento (che definisce lo spostamento dei punti) saràun valore casuale compreso tra zero e 20 (int (random (20)); ).“random (20); genera un numero casuale con virgola (di tipo“float”) compreso tra 0 e 20. L’istruzione “int ()” serve adarrotondare i numeri con decimali in numeri interi.Questa istruzione “int” è necessaria in quanto Processing nonpermette di mescolare numeri con virgola (di tipo float) con numeriinteri (di tipo int).Mandando in RUN lo Sketch vediamo che ora i punti si spostano

sempre da sinistra a destra ma procedendo in modo irregolare a volte hanno delle accelerazioni mentre altre volte procedonolentamente. Questo andamento è casuale e lanciando più volte loSketch si otterranno sempre risultati diversi.Osservando i punti compiere questo tipo di movimenti abbiamo uneffetto di movimento che suscita molta più curiosità, la sensazioneche dona questo tipo di movimento è più organica e “viva” che nonil movimento rettilineo uniforme del precedente Sketch. Permodificare l’effetto degli scatti possiamo agire su diversi parametri.

Aumentando il valore di random (20) otteniamo scatti sempre più


39



variegati, mentre otteniamo scatti meno evidenti mettendo dei valoripiù bassi.Inoltre, aumentando il “framerate” otteniamo maggiore velocità

dell’animazione con più fluidità nel movimento dei punti.Interveniamo nuovamente sullo Sketch al fine di aumentare l’effettoorganico del movimento:


void setup () {

size (320,240);

}

void draw (){

frameRate (10);

background (255);

punti ();

}

void punti () {


intervallo = 10;

}

intervallo = intervallo + int (random

(5));

point (intervallo, int (random (118,

121)));

point (intervallo +1, int (random (116,

119)));

}

Ora, analizzando la funzione “void punti” vediamo che ho inseritoun fattore di casualità anche nello spostamento sulla coordinata Y.Pertanto i punti si sposteranno anche leggermente in alto o in bassodurante il loro consueto movimento verso destra. Analizzando l’istruzione vediamo che tra parentesi questa volta cisono due parametri “int (random (116, 119))”. Quando l’istruzionerandom contiene due parametri significa che è stato definito unparametro inferiore e un parametro superiore dell’intervallo casuale.Nello Sketch precedente, il valore di Y 120 per il primo punto, orainvece sarà un valore casuale compreso tra 118 e 121.


40



Mandando in RUN questo ultimo Sketch vediamo che i due puntispostandosi leggermente anche in alto e in basso avranno un effettoancor più organico. Sembreranno volare come due mosche.

Più avanti affronteremo ancor più approfonditamente questoconcetto. Per il momento l’utilizzo della funzione “random” saràmolto utile perchè ci permetterà di osservare degli esempi piùcomplessi e variegati, a volte dai comportamenti inattesi (perchècasuali).

Curve

Abbiamo già esplorato le forme grafiche di base di Processing (point, line, rect, triangle, quad, ellipse). Osservando i cicli e le

funzioni abbiamo capito che possiamo assegnare le coordinate diqueste forme geometriche a delle variabili anche casuali.Processing permette anche di generare delle curve secondo unmetodo detto di Bezier.In pratica possono essere dichiarate, oltre ai due punti di inizio efine della curva, anche le tangenti ai due punti. Vediamo un esempio scrivendo il seguente Sketch e mandandolo inRUN:

size (320, 240);

noFill ();

bezier(10, 20, 100, 5, 280, 155, 10, 175);

Il punto di inizio e di fine della curva sono la prima e la quartacoordinata dell’istruzione. La seconda e la terza coordinata indicanoinvece le tangenti.Per capire meglio cosa siano le tangenti consiglio di aggiungere dueistruzioni in grado di visualizzarle:

size (320, 240);noFill ();

bezier(10, 20, 100, 5, 280, 155, 10, 175);

line (10,20, 100,5);

line (10,175, 280,155);

Grazie alle due linee appena disegnate possiamo ora vedere letangenti. Da notare che la curva risultante dalle nostra istruzionitende ad essere più accentuata verso il basso.


41



Osservando la tangente più in basso comprendiamo il motivo. Latangente è molto più “lunga” pertanto essa “attrae” molto di più lacurva.

Semplificando possiamo vedere la curva di Bezier come se fosse unelastico: con la prima e la quarta coordinata vengono fissati(inchiodati) i punti di inizio e fine dell’elastico. Attraverso la secondae terza coordinata si “attrae” l’elastico. Quanto più lontane sono lecoordinate di attrazione tanto più l’elastico sarà teso e quindi lacurva sarà più accentuata.Per avere prova della desrcizione appena effettuata scrivete laseguente istruzione:

bezier(10, 20, 10, 20, 10, 175, 10, 175);

Il punti di tiraggio dell’elastico sono ora gli stessi dei punti diterminazione dell’elastico stesso. Ne risulta che la curva di Bezier èuna linea retta (perchè il “tirante” non è attivo avendo le stessecoordinate del punto). Attraverso questo metodo possiamo disegnare praticamentequalunque tipo di curva. Questa funzionalità risulteràparticolarmente utile quando vorremo generare delle formeorganiche che molto difficilmente hanno spigoli e angoli netti.

Lo Sketch di seguito ci mostra il variare di una curva di bezier al variare delle coordinate delle tangenti:

int contatore = 10;

void setup () {

size (320,240);

}

void draw (){

frameRate (10);

background (255);

//incremento il contatore

contatore = contatore + 1;

// definisco la curva di bezier

// associando le tangenti

// a un contatore per osservare

// il cambiamento della curva

bezier (10,10, contatore, 10, contatore,

200, 60,200);

}


42



Osservando infine il risultato delle nostre curve notiamo che essehanno sempre un effetto di scalettatura. Questo effetto (detto

aliasing) può essere eliminato attraverso l’istruzione “smooth ();” damettere all’inizio dello Sketch.L’effetto sarà di una curva molto più “morbida”. In terminielaborat iv i questa gradevole funzional i tà estet ica diammorbidimento aumenterà l’impegno del computer. Ovviamente ilfenomeno avverrà quando avremo disegnato molte curve e avremodelle animazioni molto veloci.Complichiamo ulteriormente il nostro lavoro introducendo ancheun fattore di casualità nella generazione della curva. Questo esercizioè utile perchè viene formulato in modo nuovo uno Sketch

contenente solo funzionalità già viste.Lo Sketch mandato in RUN genera una curva di bezier che neltempo si espande verso destra o verso sinistra seguendo la casualità:

int contatore = 10;

// la variabile casuale

float ai = 1;

void setup () {

size (320,240);

smooth ();}

void draw (){

frameRate (10);

background (255);

// genero un numero casuale

ai = random (1);

// controllo il numero “estratto”

if (ai > 0.5) {

contatore = contatore + 2;bezier (100,10, contatore, 10, contatore,

200, 120,200);

}

else {

contatore = contatore - 2;

bezier (100,10, contatore, 10, contatore,

200, 120,200);

}

}


43



La variabile “ai” è legata alla generazione di un numero casuale (condecimali e quindi di tipo float) compreso tra 0 e 1. La probalità che

questo numero sia superiore o inferiore a 0.5 è del 50%. Tendenzialmente quindi avremo una curva che si muovecasualmente verso destra e verso sinistra che peròprobabilisticamente tende ad essere stabile (cioè tende a ritornarealla sua posizione di partenza. Modificando l’istruzione “if (ai >0.5)” ad esempio in “if (ai > 0.4)” altereremo probabilisticamenterapporto e quindi la curva tenderà a modificarsi verso una direzione.

I vettori

Quando nella programmazione si parla di vettori non ci si riferisce adelle forme grafiche bensì a dei contenitori. Abbiamo già visto nellaprima parte il tipo di contenitori più diffusi nella programmazione:le variabili.I vettori sono delle variabili concatenate in sequenza. Il termineinglese per definire i vettori è Array e questi sono alcuni esempi diistruzioni:

int[] vettore;

float [] vettore2;

Nel primo caso abbiamo la dichiarazione di un vettore che conterràdei valori interi mentre nel secondo caso abbiamo la dichiarazione diun vettore che conterrà dei valori con virgola.Una volta dichiarato il tipo di vettore è necessario inizializzarlo:

vettore = new int[50];

vettore2 = new float[150];

Nel primo caso abbiamo inizializzato un vettore che conterrà unmassimo di 50 valori diversi mentre nel secondo caso abbiamoinizializzato un vettore che ne conterrà 150.Queste dimensioni sono normali in molti tipi di programmi e questoè proprio il motivo per il quale si usano i vettori anziche le variabili.Nel caso in cui si vogliano immagazzinare 50 informazioni usando le variabili sarebbe necessario inizializzare 50 diverse variabili. I vettorisono quindi il modo più elegante e rapido per organizzare i datiall’interno di un programma. Troviamo i vettori praticamente in tutti

i linguaggi di programmazione.


44



Vediamo ora uno Sketch che utilizza i vettori:

size (320, 240);

smooth ();

noFill ();

int[] curva = new int[10];

// ciclo per riempire l'array

for (int cicli = 0; cicli < 10; cicli = cicli +1) {

curva[cicli] = int (random (200));

}

// ciclo di lettura dell'array

for (int cicli = 0; cicli < curva.length; cicli =

cicli +1) {bezier(curva[cicli], 0, curva[cicli], 100, 200,

240, 240, 240);

}

// secondo ciclo di lettura dell'array


cicli +1) {

ellipse (curva[cicli], 5, 10, 10);

}

Nella quarta riga osserviamo l’struzione di inizializzazione dell’array:“int[ ] curva = new int[10];” che sarà quindi composto da numeriinteri e si chiamerà “curva”.Subito dopo leggiamo un ciclo “for” che ha la funzione di riempirel’array. Il ciclo compie 10 “giri” e mette in ogni casella dell’array un valore casuale compreso tra 0 e 200 (“curva[cicli] = int (random(200))”).Successsivamente abbiamo due altri cicli. Con il primo ciclo vengono disegnate 10 curve i cui parametri sono letti dall’array

precedentemente creato ( “bezier(curva[cicli], 0, curva[cicli], 100,200, 240, 240, 240)”).Da notare che il parametro di chiusura del ciclo “for” viene stabilitoattraverso un controllo della lunghezza dell’array (“cicli <curva.length”). Curva.lenght dichiara infatti la lunghezza dell’array che avevamo chiamato “curva”.Il secondo ciclo di lettura dell’array è simile al primo con ladifferenza che vengono disegnati dei cerchi in corrispondenza deltermine superiore delle curve create precedentemente.

Questo secondo ciclo è stato creato appositamente per dimostrarel’utilità di un array. Infatti nel secondo ciclo è stato riletto tutto il


45



contenuto memorizzato nell’array e che volendo potrebbe essereulteriormente letto per funzioni future.L’array quindi ci permette di immagazzinare grandi quantità di dati

evitando di dover creare numerose variabili. Inoltre grazie alla lorosequenzialità gli array facilitano l’accesso per la lettura e la scritturaattraverso i cicli.

Il seguente Sketch compie le stesse funzioni del precedente inmodalità “continuous” generando un effetto di animazione.In questo caso il vettore viene riempito e svuotato automaticamentead ogni nuovo ciclo automatico di “void draw”.

int[] curva = new int[10];

void setup () {size (320, 240);

smooth ();

noFill ();

frameRate (10);

}

void draw () {

// azzero lo schermo

background (255);

// ciclo per riempire l'array

for (int cicli = 0; cicli < 10; cicli = cicli +1) {

curva[cicli] = int (random (200));

}

// ciclo di lettura dell'array


cicli +1) {

bezier(curva[cicli], 0, curva[cicli], 100, 200,

240, 240, 240);

}

// secondo ciclo di lettura dell'array

for (int cicli = 0; cicli < curva.length; cicli =cicli +1) {

ellipse (curva[cicli], 5, 10, 10);

}

}

Notiamo nello Sketch precedente che ad ogni inizio di ciclo vienepulito lo schermo attraverso l’istruzione “background (255);”. Setogliamo questa istruzione vedremo che le curve si sovrapporrannoprogressivamente andando a formare dopo diversi secondi un intero

spicchio nero. Le ultime sezioni bianche che rimangono sono i


46



numeri compresi tra zero e 200 che non sono mai stati generati.Probabilisticamente potrebbero passare anche diversi minuti senzache la funzione random generi un numero.


47



Terza Parte

Il testo

Processing, come tutti i linguaggi di programmazione, permette digestire il testo. I due comandi più importanti sono:

char ();

String ();

Qesti due comandi sono in realtà due nuove tipi di variabili. La variabile di tipo “char” può contenere un unico carattere mentre la variabile di tipo “String” può contenere intere parole o frasi.

Per assegnare un carattere a una variabile si scrive:

char carattere = 'F';

In questo modo la lettera “F” viene memorizzata nella variabile“carattere”.Per assegnare una parole o una frase a una variabile si scrive:

String testolungo = “manuale di Processing”;

Da notare che “String” inizia con la lettera grande mentre “char”inizia con la lettera piccola. Da ricordare che i comandi diProcessing debbono essere scritti tenendo conto anche di maiuscolee minuscole.Inoltre da notare che l’istruzione Char richiede gli apici (‘) perevidenziare il carattere mentre l’istruzione String richiede le virgolette (“). String può contenere anche testi lunghi un inico

carattere.Nell’informatica esiste una tabella di corrispondenza tra i caratteri e inumeri. Praticamente ogni lettera dell’alfabeto è stata classificata conun numero in modo sequenziale. Questa tabella di corrispondenza sichiama ASCII e ad esempio la lettera A corrisponde al numero 65.La lettera B corrisponde al numero 66 e così via.Questa tabella di corrispondenza è indispensabile poichè senza diessa il computer (che ragiona per numeri) non potrebbe elaborare itesti. Le variabili di tipo “char”, essendo lunghe un unico carattere,

possono essere ricondotte ai numeri e viceversa.Se ad esempio scriviamo:


48



char carattere = ‘F’;

int numero = carattere;

La variabile “carattere” viene riempita con il valore “F”, poi con laseconda istruzione la variabile “numero” viene riempita con ilnumero corrispondente alla lettera F (70) secondo il codice ASCII.Questa operazione di conversione bidirezionale dei numeri in letteree delle lettere in numeri è possibile solamente attraverso l’istruzione“char”. Con l’istruzione “String” essendo essa potenzialmenteassociata a testi più lunghi di una lettera ciò non è possibile. Attraverso l’espressione “char ()” possiamo richiamare direttabenteil codice ASCII del carattere. Ad esempio se scriviamo:

char lettera = char(70);

Otteniamo che la variabile “lettera” viene associata con la lettera“F” (avente come codice ASCII il numero 70).L’istruzione “String” permette di fare operazioni sul testo. Se adesempio associamo due variabili a due diverse parole,successivamente possiamo attaccare (sommare) le due parole.

String prima = “Manuale di “;String seconda = “Processing”;

String somma = prima + seconda;

La variabile “somma” avrà come risultato “Manuale di Processing”.Da notare che dopo l’espressione “Manuale di” è stato lasciatoappositamente uno spazio in modo che esso risulta presente nellasomma delle due variabili.Il modo più velore per vedere il risultato di queste operazioni sule variabili testuali (ma anche per quelle numeriche) è l’usodell’istruzione “println(somma);” Questa istruzione “println” mostraun valore nella finestra della console. La stessa finestra dell’ambientedi sviluppo dove ci appaiono gli errori. Questa finestra è utile quindianche quando si sta lavorando ad un programma e si voglienocontrollare dei valori intermedi e temporanei di alcune variabili.

Caratteri sullo schermo

Processing utilizza i font che sono stati precedentemente dichiarati.

A differenza dei normali programmi di scrittura, dove troviamo ilmenù a tendoina con tutti i font disponibili, Processing, essendo un


49



ambiente di sviluppo permette di utilizzare qualunque font che siastato precedentemente impostato.Infatti Processing utilizza solamente tipi di carattere in formato

VLW. Quando all’interno di uno Sketch sviluppato in Processing intendiamo utilizzare un font dobbiamo prima di tutto importare ilfont stesso attraverso il “Menù Tool” comando “Create Font”.Dando questo comando si apre una finestra nella quale compare lalista dei caratteri installati nel proprio computer. Si seleziona ilcarattere e la relativa dimensione che si vuole importare e cliccandosu OK verrà automaticamente creato un file che poi potrà essererichiamato all’interno dello Sketch.Se ad esempio vogliamo utilizzare il font Courier nella dimensione12 all’interno del nostro Sketch dopo avere generato il file dovremo

richiamare un file di questo nome: “Courier-12.vlw”.Ecco uno Sketch:

size (320, 240);

background (255);

// Inizializzo la variabile

PFont carattere;

// Carico il font nello Sketch

carattere = loadFont("Courier-12.vlw");

// Stabilisco il font che sto per usaretextFont(carattere);

fill(0);

// Scrivo il testo

text("Manuale di Processing", 30, 100);

Con “PFont” viene inizializzata una variabile che conterrà il nomedel font stesso. Con “carattere = loadFont("Courier-12.vlw");”carico nello Sketch il font che intendo utilizzare e ovvimente potrei

carirarne anche più di uno.Poi successivamente, quando starò per utilizzare il font, dichiaro ilsuo uso con “textFont(carattere);” e con “fill (0);” stabilisco che ilcarattere sarà di colore nero.Con l’istruzione “text” dichiariamo il testo che vogliamo scrivere(potremmo in alernativa mettere il nome di una variabile String) inseguito troviamo le coordinate X,Y dove comparirà il testo.

Nel seguente Sketch abbiamo la situazione del precedente conl’unica differenza che attraverso l’istruzione “textSize(18);” il testo

avrà una dimensione diversa da quella importata.


50



size (320, 240);

background (255);

PFont carattere;carattere = loadFont("Courier-12.vlw");

textFont(carattere);

textSize(18);

fill(0);

text("Manuale di Processing", 30, 100);

Questa operazione di ingrandimento rappresenta un degradamentodella qualità del carattere che risulterà sgranato tanto più sarà stato

ingrandito. Infatti atttaverso l’azione di importazione del carattereabbiamo importato delle immagini bitmap (pixel per pixel) del font.Qualitativamente è quindi consigliabile importare i caratteri in tuttele dimensioni che si vorranno utilizzare.Il seguente Sketch è invece un semplice esempio di animazione di untesto. Si tratta all’incirca della somma dello Sketch precedente e dellSketch utilizzato nelle pagine precedenti per animare un puntofacendolo scorrere da sinistra a destra:

void setup () {

size (320, 240);}

int intervallo = 0;

void draw (){

background (255);

PFont carattere;

carattere = loadFont("Courier-12.vlw");

frameRate (10);

textFont(carattere);

textSize(12);

fill(0);text("ciao a tutti", intervallo, 120);


}

Lavorare con le Stringhe

Processing permette di lavorare con le stringhe attraverso delleapposite istruzioni.Se ad esempio abbiamo la variabile “testolungo” associata ad una

string:


51



String testolungo = “manuale di Processing”;

Possiamo misurare la lunghezza della stringa attraverso l’istruzione

lunghezza = testolungo.length ();

Dove lunghezza sarà una variabile di tipo “int” e in questo casorestituirà il numero “21”, ossia la lunghezza del testo “manuale diProcessing” inclusi gli spazi tra una parola e l’altra.Mentre con la linea di comando:

char iniziale = (testolungo.charAt(0));

Trasferisce il primo carattere (indicato con la posizione 0) della variabile “testolungo” nella variabile iniziale. Pertanto charAt(1)restituirà la “a” di “manuale” mentre il numero 6 ci darà la lettera“e”. Il numero 20 la lettera “g” di “Processing”. Attraverso l’istruzione substring (); possiamo invece prendere delleparti di una scringa ed associarle ad un’altra variabile (opporestamparle...).

string pezzo = testolungo.substring(2,6);

Con questa linea di istruzione abbiamo trasferito in una nuova variabile “pezzo” tutte le lettere comprese tra la posizione 2 e laposizione 6 esclusa della variabile “testolungo”. In pratica abbiamotrasferito “nual” nella variabile pezzo.Il seguente Sketch produce una linea la cui lunghezza è inversamentelegata alla lunghezza di un testo associato ad una variabile di tipo“String”.

size (320, 240);

String testolungo = "Manuale diProcessing" ;

// misuro la lunghezza di testolungo

int lunghezza = testolungo.length ();

// memorizzo il primo carattere

// nella variabile “iniziale”

char iniziale = (testolungo.charAt(0));

//produco una linea

//usando la lunghezza

line (lunghezza, lunghezza, 100, 100);


52



Notiamo che il primo punto della linea è legato alla variabile“lunghezza” che abbiamo utilizzato per misurale la lunghezza del

testo “manuale di Processing”. Aggiungesto altre parole al testo “manuale di Processing” emandando in RUN lo Sketch vediamo che la linea tendeprogressivamente ad accorciarsi.


53



Quarta Parte

Grafica e Movimenti più complessi

Processing è un software specializzato per la grafica e le animazioni. Tutte le istruzioni che abbiamo visto fino a questo punto ci hannopermesso di comprendere i principi fondamentali dellacomputergrafica bidimensionale. Le forme che abbiamo disegnatofino ad ora sono relativamente semplici. Abbiamo visto con le curve di Bezier come sia possibile disegnarequalunque tipo di curva utilizzando 4 paramentri. Vediamo ora prima di tutto come animare le forme grafiche. Inrealtà abbiamo già visto come sia possibile, attraverso l’uso dei

contatori e la pulizia dello schermo , animare curve e punti.Processing ci viene incontro in queste funzionalità di animazioniattraverso tre funzioni di animazione:

translate ();

rotate ();

scale ();

Attraverso queste tre semplici istruzioni possiamo applicare degli

effetti graficamente complessi a tutte le immagini presenti all’internodel nostro Sketch.Sappiamo che scrivendo queste due istruzioni:

size (320, 240);

line(10, 20, 100, 120);

otteniamo una linea che attraverso lo schermo. Attraversol’istruzione “translate();” abbiamo la possibilità di traslare la lineasulle coordinate X e Y.Infatti se scriviamo:

size (320, 240);

translate(100, 0);

line(10, 20, 100, 120);

succede che la linea, a differenza del precedente Sketch, avrà dellecordinate traslate di 100 pixel sull’asse delle X. Le nuove coordinatedella linea saranno: (110, 20, 200, 120). I due valori X dei due punti

sono stati incrementati di 100 pixel.


54



Ecco il risultato aritmetico dell’istruzione:

line (10 + 100, 20 + 0, 100 + 100, 120 + 0);

Ovviamente possiamo traslare sia le coordinate X che le Y, ecco unesempio:

size (320, 240);

translate(100, 25);

line(10, 20, 100, 120);

La linea disegnata sullo schermo avrà le seguenti coordinate:

line (110, 45, 200, 145);

L’istruzione traslate è attiva per tutte le forme grafiche che appainosuccessivamente ad essa. Pertanto se tracciamo due linee dopol’istruzione traslate otteniamo che tutte e due le linee sarannotraslate.

size (320, 240);

translate(100, 25);

line (10, 20, 100, 120);line (20, 40, 200, 100);

Mandando in RUN lo Sketch vediamo che sia la prima che laseconda linea risultano traslate. Inoltre le traslazioni si sommano,pertanto se vogliamo ulteriormente traslare una linea dopo unaprima traslazione sarà sufficiente inserire la nuova traslazione.

size (320, 240);

translate(100, 25);line (10, 20, 100, 120);

translate(80, 15);

line (20, 40, 200, 100);

La seconda linea del precedente Sketch è traslata nelle suecoordinate di 180 (100+80) pixel sull’asse “X” e 40 pixel sull’asse“Y” (25+15). Mentre la prima linea risulta traslata solamente dei valori del primo comando traslate.


55



Per ripristinare le condizioni originarie è sufficiente mettere innegativo i valori di traslate. Nel sequente Sketch le coordinate dellaseconda linea sono “normali”.

size (320, 240);

translate(100, 25);

line (10, 20, 100, 120);

translate(-100, -25);

line (20, 40, 200, 100);

Poichè la seconda istruzione “traslate” sottrae esattamente i valoridella prima istruzione, la seconda linea avrà le coordinate:

line (20, 40, 200, 100);

Proprio come indicato nello Sketch stesso.

Rotazione

I principi della traslazione valgono anche nel caso della rotazione.Essi quindi sono validi finchè non intervenga un nuovo valore che sisomma al precedente.

Per capire l’unità di misura dela rotazione dobbiamo capire ilconcetto di radiante. Normalmente misuriamo i giri in gradi, quindiun giro completo è di 360 gradi mentre un giro di 180 gradi è mezzogiro. Una ruotazione ad angolo retto è una ruotazione di 90 gradi.I radianti sono legati alla costante matematica detta “Pi greco” “PI”o “π ”. Il pi greco misura il rapporto tra una qualunque circonferenzadi un cerchio e il suo relativo diametro. Questo rapporto è costante e viene sintetizzato in 3.14 anche se i decimali dopo la virgola sonoinfiniti.La corrispondenza tra i gradi e i radianti è molto semplice:- due radianti (2 * π ) sono 360 gradi- un radiante ( π ) è 180 gradi- mezzo radiante ( π /2) è 90 gradi

In processing π si scrive PI. Il seguente Sketch mostra la ruotazionedi una stessa linea di 90 gradi:

size (240, 240);

line(0, 0, 100, 0);

rotate(PI/2);

line(0, 0, 100, 0);


56



Mandando in RUN lo Sketch lediamo una linea in alto orizzontale(la prima linea dello Sketch) e una seconda linea verticale che è la

seconda linea dello Sketch. La seconda linea ha subito quindi unarotazione di 90 gradi in senso orario.Le dimensione dello schermo questa volta sono state impostate a(240, 240) al fine di facilitare la comprensione dei gradi.Osserviamo infatti una rotazione di 45 gradi:

size (240, 240);

line(0, 0, 240, 0);

rotate(PI/4);

line(0, 0, 240, 0);

Vediamo che la seconda linea in questo caso è ruotata di 45 gradi egrazie al fatto che la finestra è quadrata possiamo osservare che essatraccia una pate della diagonale della finestra stessa.Di seguito vediamo tre linee. La prima non subisce alcunaruotazione mentre la seconda subisce una ruotazione di 45 gradi(PI/4) e la terza ruota di 90 gradi (PI/4 + PI/4 = PI/2).

size (240, 240);

line(0, 0, 240, 0);rotate(PI/4);

line(0, 0, 240, 0);

rotate(PI/4);

line(0, 0, 240, 0);

La funzione di ruotazione funziona quindi come la funzione ditraslazione. Per eliminare il suo effetto è sufficiente riproporre il valore in negativo:

size (240, 240);

line(0, 0, 240, 0);

rotate(PI/4);

line(0, 0, 240, 0);

rotate(- PI/4);

strokeWeight (5);

line(0, 0, 200, 0);

In questo caso la terza linea sembra scomparire mentre in realtà essaè perfettamente sovrapposta alla prima linea. Per questo motivo ho


57



aumentato lo spessore della linea “strokeWeight (5);” inoltre holeggermente accorciato la lua lunghezza in modo che si possacogliere anche la prima linea.

Infine per comprendere completamente il tipo di ruotazione cheavviene mandiamo in RUN il seguente Sketch

size (240, 240);

ellipse (100, 0, 20, 20);

rotate(PI/4);

ellipse (100, 0, 20, 20);

Vediamo anche in questo caso che il cerchio si sposta. Mentre se ilcerchio ruotasse su se stesso non dovremmo vedere alcuno

spostamento. In effetti con il comando rotate così come con ilcomando translate ciò che ruota non è l’oggetto bensì la finestra contutto ciò che è disegnato al suo interno. Questa ruotazione fa pernosulla coordinata (0,0) dello schermo.

Scala

Per ingrandire o rimpiccolire un oggetto si utilizza l’istruzione scale();.

Il seguente Sketch mostra due cerchi dove il secondo cerchio è statoraddoppiato nelle sue dimensioni:

size (240, 240);

ellipse (100, 100, 20, 20);

scale (2);

ellipse (100, 100, 20, 20);

Le coordinate del cerchio cambiano proprio perchè è la finestra chesi raddoppia nella sua dimensione con tutti i suoi contenuti.Il seguente Sketch mostra tre cerchi. Il terzo cerchio ha le stesseproporzioni del primo ma ho modificato il riempimento eridimensionato il raggio.

size (240, 240);

ellipse (100, 100, 20, 20);

scale (2);

ellipse (100, 100, 20, 20);

scale (0.5);

fill (100,20);


58



ellipse (100, 100, 10, 10);

Vediamo che attraverso l’istruzione “scale (0.5);” è stato diviso per

due il precedente rapporto di ingrandimento “scale(2)”. In questomodo il rapporto finale è 0.5*2 cioè 1.Quest’ultimo Sketch ci mostra tre cerchio scalati ogni volta per due.Il terzo cerchio sarà quindi 4 volte (2*2) più grande del primo.

size (240, 240);

ellipse (50, 50, 20, 20);

scale (2);

ellipse (50, 50, 20, 20);

scale (2);

ellipse (50, 50, 20, 20);

Da notare che anche la distanza tra il secondo e il terzo cerchio èdoppia rispetto alla distanza tra il primo e il secondo cerchio.

Infine notiamo che le tre funzionalità di modifica delle formegrafiche possono ovviamente essere utilizzate in modo combinato.

size (240, 240);

ellipse (50, 50, 20, 20);scale (2);

ellipse (50, 50, 20, 20);

translate (20, 0);

ellipse (50, 50, 20, 20);

Nel precedente Sketch i cerchio risulterà traslato di 20 pixel sull’assedelle X e ingrandito di due volte. Il secondo cerchio ha invece subitosolamente l’ingrandimento ma non la traslazione.


59



Quinta parte

Arduino

Arduino è una piattaforma open source per lo sviluppo e laprogettazione di oggetti interattivi.Lo scopo principale di questa scheda è quella di dare la possibilità asviluppatori e artisti di progettare prototipi letteralmente “giocando”

con l’elettronica e sperimentando con sensori, attuatori e controllerelettronici.Questa particolare ricerca nell’interazione tra il calcolatore e ilmondo fisico è nota come “Physical Computing” ed era fino a pochianni fa una disciplina conosciuta e utilizzata solo in campoingegneristico, che richiedeva una conoscenza avanzatadell’elettrotecnica e del software.Questo livello di complessità ha tenuto per anni lontani gli ideatori,gli obbisti e gli artisti dalle infinite possibilità che l’elettronica puòaprire nel mondo del design e dell’arte in generale.

Lo scopo degli sviluppatori di Arduino è quello di fornire unostrumento semplice che permetta a chiunque di iniziare a costruireprogetti interattivi in modo immediato ed economico.

Grazie a questa semplicità di utilizzo e alla crescente diffusione, oggi Arduino oltre a risolvere numerosi problemi nello sviluppo e nellarealizzazione di oggetti interattivi, è alla base di una nuova filosofiache cresce e si alimenta dal mondo dell’open source e dallacondivisione di conoscenze tipica della rete.

Nel mondo anglosassone questo “modo di procedere” nellosviluppo è noto come “Tinkering”, una forma di deriva creativaguidata dall’immaginazione e dalla curiosità.Mentre il percorso di sviluppo ingegneristico classico presupponeuna progettazione che procede in modo razionale dal punto A alpunto B, il Tinkering presuppone il perdersi in questo percorso escoprire un nuovo punto C.

Tinkering significa in pratica trovare risultati curiosi provando esbagliando procedimenti ignoti.


60



Costruire senza le istruzioni, giocando con i fallimenti, nonpreoccupandosi del modo giusto o sbagliato di fare le cose.Uno dei modi migliori di utilizzare questo processo creativo è

riutilizzare tecnologie esistenti, smontare vecchi apparecchielettronici e usarne parti interessanti sfruttandole per utilizzi lontanida quelli per cui erano state progettate.Questo approccio spontaneo e casuale è alla base di alcune nuoveforme d’arte come il Circuit Bending: un genere musicale suonatocon vecchi strumenti giocattolo elettronici, smontati e modificati percreare suoni completamente diversi da quelli pensati dal costruttoreoriginario. Arduino insomma rappresenta oggi una nuova ottica con cuiguardare la tencologia che ci circonda, sviluppare nuove funzioni per

strumenti vecchi ed esplorare nuove possibilità senza il bisogno diperdersi in anni di studi ma semplicemente giocando con ciò che giàabbiamo a portata di mano sfruttando l’istinto di ogni bambino...smontare i giocattoli per vedere cosa c’è dentro.

L’Hardware:

Arduino è una scheda composta principalmente da un processore euna serie di ingressi e uscite sia digitali che analogici, alimentabile sia via USB che tramite un alimentatore esterno.


61



Il Software:

Il processore di Arduino è programmabile attraverso un ambiente di

sviluppo(IDE) basato su Processing. Tutto il software necessario all’utilizzo di Arduino oltre a svariatiesempi di codice è scaricabile gratuitamente dal sito www.arduino.cc

Una volta scritto il programma nell’editor principale (proprio comeun programma in Processing) va controllata la sua correttezza,premendo verify, se il codice è scritto correttamente apparirà ilmessaggio Done compiling, a questo punto é possibile caricare ilprogramma nel processore di Arduino.Premendo il bottone reset su Arduino si hanno 6 secondi per

premere Upload to I/O board nella parte alte dell’IDE.

Questo procedimento invia il programma alla scheda, lo salva nellasua memoria e lo esegue automaticamente.


62

http://www.arduino.cc/

http://www.arduino.cc/



La BreadBoard

Prima che il vostro circuito funzioni perfettamente ci sarà bisogno di

vari tentativi e saldare diversi tentativi su una piastra è un lavorolungo e dispendioso.L’equivalente elettronico dello schizzo iniziale di un progetto fattosu un foglio di carta è la BreadBoard.Si tratta in pratica di una piastra di plastica piena di fori ognuno deiquali contiene un contatto.Quando si mette un componente in uno di questi fori si crea uncontatto elettrico con tutti gli altri fori della stessa colonna verticale.Le due coppie di linee di fori in alto e in basso della Breadboard(solitamente colorate di rosso e blu e con il segno+ e -) sono invece

collegate in orizzontale e sono usate per portare l’alimentazione intutta la piastra.


63



L’Interazione

L’utilizzo piu’ frequente di Arduino è lo sviluppo di oggettiinterattivi.Il funzionamento base che accomuna questo dipo di dispositivisegue uno schema molto semplice:

Le informazioni che il dispositivo legge dal mondo esternoattraverso dei sensori vengono elaborate dal programma all’internodel processore, questo deciderà il comportamento del dispositivo

che interagirà di consegueza con il mondo esterno attraverso degliattuatori.

Sensori e attuatori sono componenti elettronici, i primi “leggono”delle informazioni dal mondo fisico e le trasformano in segnaliinterpretabili dal processore, i secondi convertono i segnali delprocessore in azioni fisiche.Per semplificare queste definizioni con un esempio, nel corpoumano, gli occhi sono dei sensori che convertono la luce inimmagini, il cervello (nel nostro caso il processore) elabora leimmagini e manda segnali ai muscoli (attuatori).


64



Un primo esempio pratico

Vediamo con un esempio pratico come lo schema precedente di

interazione possa trovare un applicazione con Arduino.Costruiamo un semplice dispositivo che accende un LED (light-emitting diode) quando viene premuto un bottone.In questo caso il bottone rappresenta il sensore e il LED l’attuatore.Iniziamo costruendo il semplice circuito illustrato nella seguentefigura.


65



N.B.il LED va inserito con il contatto piu’ corto nel pin GND e conquello piu’ lungo nel pin 13.

Scriviamo poi nell’IDE il seguente programma:

// primo esempio di interazione con Arduino

const int buttonPin = 7;

// numero del pin del bottone

const int ledPin = 13;

// numero del pin del LED

int buttonState = 0;

// variabile che legge il bottone

void setup() {

// inizializza il pin del LED come output

pinMode(ledPin, OUTPUT);

// inizializza il pin del bottone come input

pinMode(buttonPin, INPUT);

}

void loop(){

// legge lo stato del bottone

buttonState = digitalRead(buttonPin);

// controlla se il bottone e’ premuto

// se e’ premuto e’ LOW

if (buttonState == LOW) {

// accende il LED

digitalWrite(ledPin, HIGH);


66



}

else {

// spegne il LED

digitalWrite(ledPin, LOW);

}

}

Carichiamo il codice nella scheda e vediamo che il LED si illumina quandoil pulsante viene premuto.Questo avviene perchè la funzione

digitalRead();

legge se un voltaggio passa nel pin precedentemente dichiarato,se il voltaggio è inferiore a 2.5V (bottone premuto) allora lafunzione ritornerà un valore LOW e di conseguenza accenderà ilLED con la funzione:

digitalWrite(ledPin, HIGH);

mentre se passerà un voltaggio superiore allora ritornerà un valoreHIGH (che corrisponde al bottone non premuto).

Proprio come in un programma in Processing dobbiamoinizialmente dichiarare variabili e costanti, anche nel programmare Arduino è necessario dichiarare come i pin della scheda verrannoutilizzati.

all’interno della funzione

void setup();

dobbiamo configurare se il comportamento di un determinato pinsarà di INPUT o di OUTPUT.Nel nostro precedente esempio con il codice

pinMode(ledPin, OUTPUT);

abbiamo dichiarato che il pin 13 verrà utilizzato come Outputmentre con


67



pinMode(buttonPin, INPUT);

dichiariamo che il pin 7 si comporterà come INPUT.

La funzione

digitalRead(pin);

legge il valore HIGH o quello LOW da uno specifico pin digitalementre quella

analogRead(pin);

legge un valore intero da 0 a 1023 da uno dei pin da 0 a 5.

La funzione

digitalWrite(pin, valore);

manda in output un valore HIGH o uno LOW ad uno specifico pin.Mentre la funzione

analogWrite(pin, valore);

manda un valore analogico da 0 a 255 ad uno dei pin 9, 10 o 11(nei modelli di Arduino più nuovi, quelli con il processore ATmega168 si possono utilizzare i pin 3, 5, 6, 9, 10 e 11).In questo caso ad un valore di 0 corrisponde 0 volts mentre ad un valore di 255 corrisponde un voltaggio di 5V.


68



Questo manuale è scritto sotto licenza Creative Commons e gliautori accettano volentieri proposte di nuove parti da aggiungere adesso. Chi volesse proporsi può scrivere a:

Alberto Cecchi:[email protected]

Valerio Belloni: [email protected]

processingguida introduttiva alla programmazione visuale

ver. 0.9 oct. 2009


69

mailto:[email protected]




Processing Ita

Documents

Transcript of Processing Ita