Processing.js viene distribuito sotto forma di libreria Javascript; una volta scaricato deve essere richiamato all'interno della pagina web che desidera farne uso. Scarichiamo quindi il pacchetto e posiziamolo all'interno di una sottocartella 'js' nella, per il momento vuota, struttura della nostra applicazione.
Creiamo inoltre due file, anch'essi vuoti, application.js e frontend.css rispettivamente nelle sottocartelle js e css.
Ora in un file index.html inseriamo il codice HTML necessario per strutturare il tutto:
Twitter Stream!Secondo le specifiche HTML5sono validi tutti gli attributi che inizino con un prefisso data e questo meccanismo dei "data-* attributes" viene sfruttato da Processing.js: in questo infatti possiamo indicare all'interno del markup l'url del file con estensione .pde che contiene il codice processing da eseguire all'interno del Canvas.
Per chiudere con la configurazione di base creiamo un file vuoto twitter-lang.pde all'interno di una nuova sottocartella pde del nostro progetto.
Struttura di un file Processing.js
Il linguaggio Processing é estremamente semplice; alla base di tutto ci sono alcune funzioni dai nomi convenzionali che una volta implementate vengono gestite e coordinate dall'engine. Un esempio vale sicuramente più mille parole:
int sfondo = 40;
void setup() {
size(250, 250); // impostiamo il Canvas a 250px per 250px
frameRate(20); // e a 20 il numero di fotogrammi al secondo
strokeWeight(2); // impostiamo a 2px la dimensione della linea di contorno degli oggetti
stroke(255); // impostiamo a bianco il colore della linea
}
void draw() {
sfondo++; // con queste due righe impostiamo il ciclo per il colore di sfondo
if(sfondo > 254) sfondo = 0;
background(0); // ricopriamo l'intero Canvas di pixel neri
fill(sfondo); // impostiamo a 'sfondo' il colore di riempimento
rect(10, 10, 230, 230); // disegnamo un rettangolo con coordinate 10, 10 e dimensione 230x230px
}Per effettuare un test veloce possiamo fare copia e incolla del codice qui sopra direttamente nel piccolo IDE messo a disposizione dal sito della libreria, le prime due funzioni dai nomi convenzionali che vediamo sono:
| Funzione | Descrizione |
|---|---|
| setup | viene invocata una sola volta, all'inizio dell'esecuzione |
| draw | viene lanciata invece con una frequenza pari al numero di frame per secondo impostati (il default dovrebbe essere 30) |
All'esterno di queste funzioni risiedono eventuali dichiarazioni di variabili globali o di altre funzioni secondo un classico schema procedurale.
A differenza di Canvas, processing implementa un set di tipi primitivi mutuato da Java: abbiamo quindi int, float, double, long, boolean, byte e char. A questi si aggiunge l'interessantissimo color, che vedremo in dettaglio più avanti.
Nell'esempio definiamo una variabile globale sfondo di tipo int che poi incrementiamo ad ogni ciclo di render con l'accortezza di resettarla a 0 quando supera la soglia di 254. Nel resto del codice lanciamo i comandi necessari a pilotare il Canvas, si tratta quindi di modificarne lo stato con funzioni come fill, stroke, strokeWeight, e poi lanciare comandi di disegno, come background e rect.
Il vantaggio è che in questo caso l'intero processo beneficia di una struttura già orientata all'animazione e da un set di funzioni esteso, arricchito e semplificato rispetto alle API del Canvas.
Anche la variabile sfondo, fin qui utilizzata per finalità didattiche, può essere sostituita dalla comoda proprietà frameCount che contiene il numero di fotogrammi (e quindi di chiamate alla funzione draw) già eseguiti:
void setup() {
size(250, 250); frameRate(20); strokeWeight(2); stroke(255);
}
void draw() {
background(0); fill(frameCount % 255); rect(10, 10, 230, 230);
}Per un completo elenco delle funzioni e delle proprietà disponibili rimando alla pagina dedicata del sito ufficiale.
Prima di proseguire scriviamo quindi il contenuto del file twitter-lang.pde impostando lo scheletro delle funzioni setup e draw:
void setup() {
size(960, 550);
noStroke();
} // rimuove il disegno della linea di contorno sugli oggetti void
draw() {
background(0);
}