Cos’è Paper.js

Paper.js è un framework di scripting open source per la grafica vettoriale.

Cioè?!

Una specie di cartellina da disegno dalla quale possiamo prendere tutto quello che ci serve – matite, colori, righe, compassi ecc – per usare la grafica vettoriale (ma anche raster) con il tag canvas di HTML5. Il tag <canvas> lo possiamo immaginare come un foglio da disegno, una tela, o una parete bianca.

[columns ]
[column size=”2/3″]Chi è un po’ attempato come me, si ricorderà certamente di tutti quegli effetti megagalattici dell’actionscript di Macromedia Flash e il periodo in cui i siti più cool erano fatti in Flash e vantavano animazioni lisergiche. Al di là del fatto che potevi navigare al massimo 10 minuti, poi ti scoppiava la capoccia, il limite di questi siti era che per essere visualizzati non bastava il browser, ma serviva un plugin, inoltre venivano indicizzati male. Poi Adobe si è comprata Macromedia. Con l’avvento del mobile, la caduta di Flash è diventata ancora più evidente dal momento che alcuni dispositivi come iPhone o iPad non lo supportavano. Nel 2010 Steve Jobs divulgò una lettera in cui spiegava perché la Apple non avrebbe più supportato Flash: fine di Flash. Oggi Flash viene usato principalmente per sviluppare animazioni, giochi e interazioni complesse che HTML5 non è ancora in grado di gestire.
Se vi interessa saperne di più c’è un bell’articolo un po’ datato ma interessante su Mashable che ripercorre la storia di Flash.
Con paper.js possiamo fare “animazioni alla Flash”, senza interferire con l’indicizzazione e la fruibilità dei contenuti del sito.[/column]
[column size=”1/3″]

Cosa ti serve

Il framework lo puoi scaricare sul sito ufficiale paperjs.org. Dentro allo zip troverai molti file di esempio, le librerie e tutta la documentazione.
Poi serve un editor html qualunque (io uso Adobe Dreamweaver CC) e un pizzico di fantasia.

[/column]
[/columns]

L’animazione

Partiamo da una cosa supersemplice: un cerchio dal quale originano altri cerchi che disponendosi intorno al primo formeranno dei fiori ruotanti. Posto uno schizzo:
Storyboard dell'animazione

Scarica tutto l’occorente (vedi box grigio sopra) e unzippalo.

Creiamo un nuovo file html. Iniziamo richiamando il link alla libreria di Paper.js all’interno del tag <head> della nostra pagina html. Come src specifichiamo il percorso dove si trova il file paper-full.js (nell’esempio sotto, il mio si trova nella stessa cartella del file html).

<script type="text/javascript" src="paper-full.js"></script>

Apriamo il tag <script> di Paper.js dove scriveremo il codice per la nostra animazione.

<script type="text/paperscript" canvas="canvas">
...
...
...
</script>

Dichiariamo il canvas all’interno del <body> della nostra pagina html perché l’animazione si svolge all’interno del tag <canvas> e se non c’è il canvas non vedremo proprio niente:

<canvas id="canvas" resize style="background:white"></canvas>

Ricapitolando…

Dovremmo avere una pagina più o meno così:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>La mia prima animazione con Paper.js</title>
    <script type="text/javascript" src="paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
    ...
    </script>
</head>
<body>
    <canvas id="canvas" resize style="background:white"></canvas>
</body>
</html>

Ora iniziamo a scrivere il codice paperscript (che andrà inserito al posto dei puntini qui sopra):

//disegno un cerchio di raggio 50pt nero e lo posiziono al centro del canvas
var raggio = 50;
var cerchio = new Path.Circle(view.center, raggio);
cerchio.strokeColor = '#000000'; // colore del tracciato: nero
		
// definisco il numero di cerchi duplicati che voglio
var numcerchi=6;
		
// duplico e riposiziono sfruttando seno e coseno
for (var n=0; n<numcerchi; n++) {
	var altricerchi = cerchio.clone();
	var angolo= 360/numcerchi*n;
	var angolorad = angolo*(Math.PI / 180);
	 
	altricerchi.position.x +=Math.cos(angolorad)*raggio;
	altricerchi.position.y +=Math.sin(angolorad)*raggio;
};

[columns ]
[column size=”2/3″] [/column]
[column size=”1/3″]

Sperimenta!

Osserva come cambiando il valore della variabile numcerchi nel tuo file html, cambia la complessità della figura. Prova anche a cambiare il valore della variabile raggio e a vedere cosa succede.

[/column]
[/columns]

Facciamo un passo avanti, aggiungiamo l’animazione

Ora creiamo un gruppo che contiene tutti i cerchi duplicati in modo da poterli muovere tutti insieme, come se fossero una sola unità. Applichiamo una rotazione. Aggiungiamo anche una scritta sotto al disegno. Il codice è commentato, se non è chiaro qualcosa lasciate un messaggio.

//disegno un cerchio di raggio 50pt nero e lo posiziono al centro del canvas
var raggio=50;
var cerchio = new Path.Circle(view.center, raggio);
		
//lo tiro un po' su rispetto al centro assoluto per una correzione ottica
cerchio.position.y-=60;
cerchio.strokeColor = '#000000'; // colore tracciato: nero		
		
// definisco il numero di cerchi duplicati che voglio
var numcerchi=6;
		
// creo il gruppo di cerchi che chiamo fiore
var fiore = new Group();
		
	// duplico e riposiziono i cerchi sfruttando seno e coseno
	for (var n=0; n<numcerchi; n++) {
	
	var altricerchi = cerchio.clone();
	var angolo= 360/numcerchi*n;
	var angolorad = angolo*(Math.PI / 180);
	 
	altricerchi.position.x +=Math.cos(angolorad)*raggio;
	altricerchi.position.y +=Math.sin(angolorad)*raggio;
			
	// aggiungo i cerchi al gruppo fiore
	fiore.addChild(altricerchi);
	};

// aggiungo la scritta
var scritta = new PointText(view.center);
scritta.position.y+=70; //correzione ottica
scritta.justification = 'center';
scritta.fillColor = 'black';
scritta.content='O R I G I N';
scritta.fontSize =25;		

// animazione: ruoto il fiore
function onFrame(event) {
	fiore.rotate(1); //aumentando questo valore la rotazione sarà più veloce
		}

Per finire

Qualche ritocchino nell’aspetto per adattarlo al mio progetto: cambio di colore, opacità e miglioramento dell’animazione.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>La mia prima animazione con Paper.js</title>
    <script type="text/javascript" src="paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
	
		//disegno un cerchio di raggio 50pt nero e lo posiziono al centro del canvas
		var raggio=50;
		var cerchio = new Path.Circle(view.center, raggio);
				 
		//lo tiro un po' su rispetto al centro assoluto per una correzione ottica
		cerchio.position.y-=60;
		cerchio.strokeColor = '#ffffff'; // colore tracciato: bianco  
		cerchio.fillColor  = '#ffffff'; // colore riempimento
		cerchio.opacity = 0.3; // opacità
				 
		// definisco il numero di cerchi duplicati che voglio
		var numcerchi=6;
				 
		// creo il gruppo di cerchi che chiamo fiore
		var fiore = new Group();
				 
			// duplico e riposiziono i cerchi sfruttando seno e coseno
			for (var n=0; n<numcerchi; n++) {
			 
			var altricerchi = cerchio.clone();
			var angolo= 360/numcerchi*n;
			var angolorad = angolo*(Math.PI / 180);
			  
			altricerchi.position.x +=Math.cos(angolorad)*raggio;
			altricerchi.position.y +=Math.sin(angolorad)*raggio;
					 
			// aggiungo i cerchi al gruppo fiore
			fiore.addChild(altricerchi);
			};
		 
		// aggiungo la scritta
		var scritta = new PointText(view.center);
		scritta.position.y+=70; //correzione ottica
		scritta.justification = 'center';
		scritta.fillColor = '#666666';
		scritta.content='O  R  I  G  I  N';
		scritta.fontSize =20;      
		
		//aggiungo un altro fiore duplicando il primo, per arricchire visivamente l'animazione
		var altrofiore = fiore.clone()
		 
		// animazione: ruoto i fiori
		function onFrame(event) {
			fiore.rotate(1); //aumentando questo valore la rotazione sarà più veloce
			altrofiore.rotate(0.5); //il secondo fiore lo faccio girare nello stesso verso ma più lentamente
				}
		
		</script>
</head>
<body>
    <canvas id="canvas" resize style="background:black"></canvas>
</body>
</html>

Ed ecco il risultato finale:

Questo è un esempio di utilizzo molto semplice. In futuro riprenderò questa animazione per aggiungerci il fattore interattività: vedremo come interagire con l’utente attraverso il mouse, la tastiera e il tocco. Qui trovi il link diretto al file HTML di questa animazione.

Concludendo, facendo alcune prove con Paper.js mi è sembrato che le animazioni diventano a scatti e poco fluide non appena si aumenta un po’ la complessità. Allo stesso tempo questo framework permette di fare tantissime cose interessanti in maniera rapida e con poco codice. Immagino che dipenda tutto da cosa ci si vuole fare.

E voi cosa ci avete fatto? Postate i link ai vostri esperimenti!