Primi passi con processing: un tutorial

Processing è un progetto opensource creato da Casey Reas e Benjamin Fry, del MIT Media Lab. E' "un'accoppiata" formata da un linguaggio di programmazione e un IDE pensato per le arti elettroniche e le visual design communities, come recita wikipedia.

Uno degli obiettivi principali di Processing è avvicinare l'utente alla programmazione utilizzando un ambiente e un linguaggio semplice che possa portare rapidamente l'utente a produrre qualcosa di visivamente accattivante (dando quindi notevole soddisfazione).

Il linguaggio Processing, semplice ma ben strutturato, utilizza le capacità grafiche del linguaggio Java come "struttura portante" semplificandone la sintassi e aggiungendo alcune features a quanto già esistente.

Potete installare Processing su Windows, Mac e Linux (qui il download) e sono in fase di sviluppo porting della piattaforma verso dispositivi come OpenMoko e iPhone e linguaggi come JavaScript e ActionScript.

Vediamo un po' come cominciare a sviluppare con Processing.

Tre tipi di programmazione

In Processing possiamo programmare in tre modi differenti:

• Basic - Il programma è costituito da una semplice lista di istruzioni eseguite in sequenza
• Intermediate - La classica programmazione procedurale, che sarà utilizzata negli esempi successivi
• Complex - Programmazione orientata agli oggetti "dura e pura"

Quale metodo scegliere? Semplice, quello che più si addice alle vostre capacità.

L'IDE di Processing

Una volta installato e avviato l'IDE ecco cosa vi troverete davanti:

E' tutto molto semplice, l'editor ha sfondo bianco (con evidenziazione della sintassi Processing) e la barra dei comandi contiene solo lo stretto necessario:

• I pulsanti "run" e "stop" ci serviranno per testare il nostro codice
• Gli altri 4 pulsanti sono rispettivamente:
  • Nuovo file
  • Apri file
  • Salva file
  • Esporta applicazione

La console contiene ovviamente i messaggi di errore e l'output di istruzioni come println().

Cominciamo a lavorare in Processing

Come dicevamo prima gli esempi che vado a proporre sono basati sulla programmazione "intermediate".

Un'applicazione scritta secondo questa metodologia si compone, nella sua forma più semplice di 3 parti:

• Una parte dichiarativa
• La funzione setup()
• La funzione draw()

Vediamo un po' di codice per capire di cosa sto parlando

// Parte dichiarativa
int radius = 30;

// Setup applicazione
void setup()
{
  size(400,400);
  smooth();
  frameRate(12);
}

//Disegno
void draw()
{
  ellipse(random(width),random(width),radius,radius);
}

Questo semplice programma crea dei cerchi di raggio 30px in posizione casuale all'interno della finestra dell'applicazione.

Il codice è commentato in modo da individuare facilmente le 3 parti.

Nella parte "dichiarativa" (come la chiamo io) vengono inizializzate alcune costanti utili all'interno di tutto il programma. In questo caso si tratta del raggio dei cerchi.

All'interno della funzione setup() definiamo le proprietà dell'applicazione come ad esempio:

• La dimensione della finestra
• Il miglioramento o meno dell'immagine (smooth)
• Il framerate per l'applicazione (utile in caso di animazioni o piccolo videogames)

Nella funzione draw() andiamo ad inserire quello che vogliamo disegnare a schermo. La funzione draw() verrà eseguita una volta per ogni frame, quindi nel nostro caso verranno creati 12 cerchi al secondo.

Facile no? In un prossimo articolo vedremo di creare qualcosa di più interessante (magari anche interattivo) e come esportare le nostre applicazioni per pubblicarle come files eseguibili o applet da visualizzare online.

Nel frattempo giocate con processing. Google come al solito è pieno di tutorial!