Gestire luci e ombre in una scena 2D non è un compito facile anche se farlo bene porta a risultati davvero notevoli, creando immediatamente atmosfera e realismo. Illuminated.js è un rendering engine che consente di creare oggetti e sorgenti luminose nelle nostre applicazioni e giochi HTML5, rendendo davvero semplice la gestione di scene complesse dove si intrecciano svariati fasci di luci e zone di ombra.

Il framework utilizza canvas e dunque può essere utilizzato e integrato in qualsiasi applicazione che già usa questo strumento per disegnare elementi e scene. Per di più, anche se non si usa canvas ma si è creata la propria applicazione tutta in DOM si può usare lo stesso questa libreria posizionandola "dietro" il nostro DOM, con z-index.

Creare e gestire elementi è molto semplice. Questo, ad esempio, è il codice per creare una sorgente luminosa:

new Lamp({
  position: new Vec2(12, 34),
  distance: 100,
  diffuse: 0.8,
  color: 'rgba(250,220,150,0.8)',
  radius: 0,
  samples: 1,
  angle: 0,
  roughness: 0
})

La pagina di tutorial e approfondimento, con esempi e codice, è qui: http://blog.greweb.fr/2012/05/illuminated-js-2d-lights-and-shadows-rendering-engine-for-html5-applications/. Fatevi illuminare!