Paper.js: grafica vettoriale con JavaScript

Paper.js è un framework open source basato sulla tecnologia HTML5 Canvas che permette di lavorare con la grafica vettoriale (vector graphics) in maniera diretta ed ottimizzata. Come indicano gli autori del progetto Jürg Lehni e Jonathan Puckey, Paper.js è "il coltellino svizzero dello scripting su grafica vettoriale".

Paper.js è è basato ed ampiamente compatibile con Scriptographer, un ambiente di scripting per Adobe Illustrator con una community di sviluppatori molto attiva e più di 10 anni di sviluppo alle spalle, ed è rilasciato sotto licenza MIT-style.

Paper.js una lunga lista di potenti funzionalità che permettono di produrre e lavorare con la grafica vettoriale e con le curve di Bezier: particolari curve parametriche, di fondamentale rilevanza nella computer grafica, che vengono comunemente calcolate tramite l'algoritmo di de Casteljau, il tutto incluso in un'interfaccia pulita e performante.

Jurg e Jonathan assicurano che Paper.js risulta essere semplice da apprendere per i neofiti, ma ha molto da offrire anche agli sviluppatori intermedi ed avanzati.

Nella nutrita pagina delle demo possiamo ammirare una moltitudine di progetti creati con Paper.js, il cui codice è visibile in chiaro e ci da subito un'idea delle API offerte dal framework. Nella demo chiamata "Chain", ad esempio, abbiamo una "striscia" vettoriale, che segue i movimenti del mouse e può essere intersecata a piacimento.

Il codice che permette di produrre tale effetto è il seguente:

var points = 25;
var length = 35;
var path = new Path({
    strokeColor: '#E4141B',
    strokeWidth: 20,
    strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
    path.add(start + new Point(i * length, 0));
function onMouseMove(event) {
    path.firstSegment.point = event.point;
    for (var i = 0; i < points - 1; i++) {
        var segment = path.segments[i];
        var nextSegment = segment.next;
        var vector = segment.point - nextSegment.point;
        vector.length = length;
        nextSegment.point = segment.point - vector;
    }
    path.smooth({ type: 'continuous' });
}
function onMouseDown(event) {
    path.fullySelected = true;
    path.strokeColor = '#e08285';
}
function onMouseUp(event) {
    path.fullySelected = false;
    path.strokeColor = '#e4141b';
}

Grazie alle classi Path e Point, agli eventi MouseMove, MouseDown e MouseUp e tramite una gestione dei segmenti vettoriali, possiamo riprodurre i movimenti dell'utente.

All'interno del sito ufficiale troviamo un'ottima documentazione dedicata ad ogni singolo componente della API.

Via Paper.js