Lazy Brush: disegnare con JavaScript

Lazy Brush è uno dei classici esempi delle incredibili potenzialità di JavaScript. Questa libreria permette di utilizzare una sorta di "pennello", nella sua forma base simile a quello che possiamo trovare in software per la grafica come Adobe Photoshop, che va però "trascinato" da un "gancio": da qui il nome, Lazy Brush. Lo script fornisce la matematica necessaria a questa implementazione: richiede il raggio e le coordinate (x, y) del mouse/puntatore e calcola la posizione del pennello.

Il pennello si muove solo quando il puntatore è all'esterno della sua "lazy area". Con questo tipo di implementazione è possibile disegnare sia linee che curve in modo molto morbido e delicato.
Quando la posizione del puntatore viene aggiornata, la distanza rispetto al pennello viene calcolata dallo script: se la distanza è maggiore rispetto al raggio definito in precedenza, il pennello si muoverà di "distanza - raggio" pixel nella direzione del puntatore.

Molto più facile a vedersi che a dirsi: in questa pagina possiamo infatti ammirare Lazy Brush in azione.

Il seguente è uno snippet che mostra una semplice implementazione della libreria all'interno di uno script:

const lazy = new LazyBrush({
  radius: 30,
  enabled: true,
  initialPoint: { x: 0, y: 0 }
}) // default
lazy.update({ x: 50, y: 0 })
console.log(lazy.getBrushCoordinates()) // { x: 0, y: 0 }
lazy.update({ x: 200, y: 50 })
console.log(lazy.getBrushCoordinates()) // { x: 100, y: 0 }

Esistono svariate funzioni utili nella API di Lazy Brush, come LazyBrush.update() che permette di aggiornare la posizione del puntatore, quando il mouse si muove, LazyBrush.getBrushCoordinates() e LazyBrush.getPointerCoordinates() per ottenere le coordinate di pennello e puntatore, e LazyBrush.brushHasMoved() che restituisce un booleano indicante la modifica della posizione del puntatore.

Come indica giustamente l'autore, per questioni di performance è bene disaccoppiare i processi di calcolo e di rendering del canvas dagli eventi mousemove/touchmove. Occorre salvare le coordinate correnti in una variabile, e successivamente, utilizzando un ciclo (tipicamente un requestAnimationFrame) chiamare la funzione LazyBrush.update() su tutti i frame dell'animazione utilizzando le ultime coordinate memorizzate nella precedente variabile. La libreria esegue calcoli solo se il puntatore o il pennello cambiano posizione.

Via Lazy Brush