In questa serie di articoli analizzeremo Processing, un linguaggio di programmazione che permette di realizzare con poco sforzo visualizzazioni di dati e animazioni.
In questo primo articolo faremo una panoramica illustrando i concetti base del linguaggio.
Introduzione
Inizia questo mese un viaggio che ci porterà ad esplorare un argomento poco trattato in ambito enterprise: la visualizzazione di dati.
Nel corso dei prossimi mesi analizzeremo una libreria che permette di realizzare visualizzazione di dati e animazioni grafiche con poco sforzo: vedremo le primitive grafiche, sia 2D che 3D, le estensioni per audio, video e rete, ed infine vedremo come visualizzare una mole elevata di dati in maniera tale che il loro “significato” traspaia immediatamente.
In questo primo articolo indurremo la libreria Processing e i tool di supporto allo sviluppo.
Cos’è Processing
Processing [1] è un linguaggio di programmazione specifico per realizzazione di animazioni, immagini e interazioni. È stato sviluppato come progetto OpenSource da due ricercatori del MIT Media Lab, Ben Fry e Casey Reas, come strumento per insegnare le basi della programmazione in un’ambiente visuale e di impatto immediato. Ultimamente inizia a essere usato anche da molti visual artists o ricercatori per via della sua immediatezza e per la facilità con la quale è possibile realizzare animazioni o visualizzazioni di dati.
Insieme al linguaggio viene distribuito anche un piccolo IDE per permettere di programmare senza dover scaricare e configurare altri strumenti di sviluppo.
In realtà non è un linguaggio a tutti gli effetti, poichè si basa su Java, ma è solo una libreria, o meglio, un Domain Specific Language per fare grafica.
Getting started with Processing
Iniziamo a vedere come creare il nostro primo sketch (“schizzi”, così si chiamano le animazioni fatte con Processing).
Innanzitutto è necessario andare sul sito processing.org e scaricare il pacchetto [2]: al momento della pubblicazione la versione corrente è la 135, ed è disponibile in 4 installer: Linux, Mac OS X, Windows con e senza Java.
Una volta installato, lanciando il programma si apre il PDE, cioè il Processing Development Environment.
Figura 1 – Schermata principale del Processing Development Environment
In tutti i linguaggi di programmazione il primo programma che si scrive è il solito “Hello Word!”; in Processing disegnamo un rettangolo al centro dello schermo.
Per farlo è sufficiente scrivere nell’area di testo del PDE la seguente riga di codice:
rect(25,25,50,50);
Premendo il tasto “Run” (il primo a sinistra sulla toolbar) vi apparirà un rettangolo bianco bordato di nero, centrato in una finestra dallo sfondo grigino. Complimenti, avete fatto il vostro primo sketch con Processing!
Figura 2 – “Hello World” con Processing
Proviamo ad estendere un poco il nostro Hello World:
size(200,200); background(0); fill(0,200,200); strokeWeight(3); stroke(204,102,0); rect(50,50,100,100);
Figura 3 – “Hello World” avanzato
Si inizia a vedere qualcosa di più complesso: il primo comando imposta la dimensione della finestra: il suo valore di default è 100×100 e deve essere il primo comando del programma.
Gli altri comandi poi impostano i parametri coi quali verranno disegnati in seguito tutti gli elementi grafici: il colore di riempimento, lo spessore della linea e il colore della linea.
Già con questo semplice esempio abbiamo visto un comportamento standard di Processing: i comandi che impostano delle proprietà agiscono su tutti i metodi che verranno chiamati in seguito [3].
Il PDE, Processing Development Environment
Prima di entrare nei dettagli del linguaggio analizziamo velocemente il PDE.
In alto abbiamo la toolbar, con i bottoni per le azioni abituali: Run e Stop per avviare e fermare un programma, New, Open, Save e come ultimo Export. Questo comando permette di esportare lo sketch come Applet Java pubblicabile su web.
Al centro abbiamo un editor di testo a schede e in basso, in nero, la finestra di console, dove vengono visualizzati eventuali errori di compilazione e i messaggi di errore che avvengono a runtime.
Andando ad analizzare il menu, oltre alle voci standard ce ne sono un paio degne di nota. La prima è Examples sotto il menu File. Qui trovate tutti gli esempi che sono stati installati insieme a Processing: vi consiglio di guardarli perchè danno l’idea di quanto sia possibile fare scrivendo pochissimo codice.
La seconda è Import Library sotto il menu Sketch: con questo si possono importare librerie esterne, come quelle per fare video, accedere alla rete, realizzare PDF etc… (vedremo meglio questi argomenti nel terzo articolo della serie).
Le modalità di Processing
Nell’introduzione ho detto che con Processing è possibile fare animazioni, ma per farlo bisogna cambiare modalità di programmazione. In Processing è possibile adottare 2 modalità di programmazione:
- Basic
- Continuous
Basic
È la modalità che abbiamo utilizzato nell’esempio iniziale: tutte le operazioni vengono eseguite in sequenza, viene disegnato qualcosa sullo schermo e poi il codice non viene più eseguito. Non è possibile quindi fare animazioni o interagire con l’utente, ma solo fare disegni statici.
Continuous
Con la modalità continuous è invece possibile realizzare animazioni. Per farlo è necessario scrivere due metodi:
- setup che conterrà tutte le operazioni che devono essere eseguite una sola volta all’inizio del programma;
- draw che verrà eseguito in continuazione e che conterrà tutti i comandi per disegnare le animazioni.
Di norma il metodo draw viene eseguito 60 volte al secondo o in numero minor se l’esecuzione dovesse essere più lenta. È anche possibile ridurne la velocità col comando frameRate().
int i;
void setup()
{
size(200,200);
background(0);
fill(0, 200,200);
strokeWeight(3);
stroke(204, 102, 0);
}
void draw(){
background(0);
rect((i++)%200-50,(i)%200-50,100,100);
}
In questo esempio il nostro rettangolo si muove lungo la diagonale alla velocità di 60 frame al secondo: il metodo setup inizializza lo schermo e le proprietà della matita (colore, spessore, riempimento) e poi il nel metodo draw si cancella tutte le volte lo schermo e si ridisegna il rettangolo facendolo spostare lungo la diagonale e incrementando il valore della variabile globale i.
Figura 4 – Hello World in modalità continua
La modalità Basic è in pratica quella Continuous con solo il metodo setup.
Processing e Java
Prima di concludere il primo articolo cerchiamo di capire che collegamento c’è tra Processing e Java: uno sketch compilato da Processing non è altro che una classe che estende la classe PApplet fornita da Processing. I comandi che abbiamo usato negli esempi (rect, size, fill, etc…) sono metodi esposti da questa classe base. Per rendere tutto ciò trasparente allo sviluppatore, tenendo presente che lo scopo di Processing è quello di insegnare un linguaggio di programmazione senza dover pensare a tutto il contorno, il PDE pre-processa il codice delle sketch prima di inviarlo al compilatore Java.
Se non trova nessuna dichiarazione di metodi, ipotizza di essere in modalità basic e quindi include tutto il codice inserito nell’editor in un metodo setup all’interno di una classe che eredita da PApplet. Il codice del listato 2 viene trasformato in:
import processing.core.*
public clas MokaBasic extends PApplet
{
public void setup()
{
size(200,200);
background(0);
fill(0, 200,200);
strokeWeight(3);
stroke(204, 102, 0);
rect(50,50,100,100);
}
}
Nel caso invece veda le dichiarazioni del metodo setup, aggiunge solo la dichiarazione di classe dei modificatori di accesso ai metodi. Nel caso fossero state create altre classi in altre schede, queste vengono messe come inner classes della classe principale:
import processing.core.*
public clas MokaContinuous extends PApplet
{
int i;
public void setup()
{
size(200,200);
background(0);
fill(0, 200,200);
strokeWeight(3);
stroke(204, 102, 0);
}
public void draw()
{
background(0);
rect((i++)%200-50,(i)%200-50,100,100);
}
}
Conclusioni
In questo primo articolo abbiamo introdotto Processing, un Domain Specific Language per realizzare animazioni e visualizzazioni di dati, e abbiamo visto il suo rapporto con Java.
Nel prossimo articolo entreremo nel vivo della programmazione grafica, parlando delle primitive grafiche presenti.
Riferimenti
[1] Processing
http://www.processing.org/
[2] Download Processing
http://www.processing.org/download/index.html
[3] Processing Reference
http://www.processing.org/reference/index.html
Software Architect e sviluppatore, Simone ha esperienza decennale nello sviluppo di appicazioni web based (sette anni con ASP.NET). Vive a Milano dove lavora come "Senior Solution Developer" per Avanade. Ha partecipato a numerosi progetti Open Source, sia Java che .NET, ma attualmente si sta concentrando principalmente su SubText per aiutarlo a fare un salto di qualità.