HTML5 | Javascript canvas experiments

http://www.dhteumeuleu.com/ una raccolta di diversi esperimenti in HTML5 che fanno uso del Canvas senza nessun aiuto da parte di plugin come Flash…

Per ogni esperimento è possibile visualizzare anche il codice sorgente per capire come è stato implementato. Molto utile per scoprire nuove tecniche di animazione e di gestione del canvas.

CanvasSwirl: An animated spirograph experiment in JavaScript and Canvas

CanvasSwirl è un bellissimo esperimento implementato in javascript che unisce ad un sistema di particelle la logica dello spirografo.

Lo spirografo è uno strumento che produce delle curve chiamate ipotrocoidi e epicicloidi. Ve lo ricorderete perché sicuramente lo avete utilizzato a scuola quando eravate piccoli.

Le ipotrocoidi è una rulletta ottenibile come curva tracciata da un punto fissato ad una certa distanza dal centro di un cerchio mobile che ruota all’interno di un altro cerchio immobile. La figura animata chiarirà meglio il concetto 🙂

image

Le epicicloidi invece si basano sullo stesso concetto delle ipotrocoidi ma il cerchio mobile ruota all’esterno del cerchio immobile.

Variando i parametri di queste componenti possiamo ottenere tantissime figure: dal una semplice ellissi a forme molto complesse.

La libreria Canvas Swirl unisce questo concetto ad un sistema di particelle per ottenere effetti come questi:

image

image

La libreria è corredata di un pannello di configurazione dove è possibile cambiare tutti i valori del sistema di particelle e degli elementi che compongono lo spirografo.

Grazie a http://xhva.net/ per il suo lavoro.

HTML5 CanvasSwirl testato su iPhone

CanvasSwirl testato su iphone 3GS (in alto a sinistra), iPhone 4 (in basso a sinistra), iPhone 4S (in alto a destra) e iPhone 5.

La velocità dell’iPhone 5 che monta il nuovissimo chip A6 ovviamente non è paragonabile con i precedenti modelli, ma la cosa che sorprende è la poca differenza di performance tra iPhone 3GS e iPhone 4, nonostante quest’ultimo monti il chip A4, fatto da Apple su misura per la nuova linea di iPhone.