Giochicchiando con WebGL – Parte II

L’intestazione colorata ed animata con WebGL che ho creato qualche giorno fa, generava colori casuali ogni volta che si cambiava pagina o si aggiornava quella corrente: questo comportamento non mi piaceva. Ho ripreso il codice, ora quando viene abbandonata la pagina, intercettando l’evento onnload, salvo i colori attuali all’interno di un cookie di sessione. Alla successiva creazione della nuova istanza WebGL, leggo il cookie e se ci trovo dentro i vecchi colori, evito di generare quelli randomici. In questo modo durante la navigazione del sito, l’animazione simula una pseudo-continuità nel tempo.

Ecco il nuovo codice sorgente TypeScript

Giochicchiando con WebGL

WebGL è veramente forte!!! L’idea di poter integrare in una pagina web tutta la potenza di OpenGL utilizzando un semplice editor di testo, con accelerazione hardware tra l’altro, lo rende particolarmente interessante. Oggi volevo sperimentare l’integrazione di un tag <canvas>, con contesto WebGL appunto, all’interno di una pagina HTML e mi è venuto in mente di modificare l’header del mio template WordPress, che è questo qua: Phosphor WordPress template.

Invece di un’intestazione con sfumatura statica ho deciso di creare un semplice scriptino TypeScript che mi ciclasse colori casuali dentro 2 triangoli. Tutto molto semplificato e leggero da eseguire su ogni browser. Ecco il codice sorgente se può interessare: Codice sorgente TypeScript.

Utilizzare il tag canvas in questa maniera è un tentativo amichevole di resuscitare le vecchie applet Java ormai morte e sepolte … poverine :)