<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Animation on Enrico Rossomando</title><link>https://www.mrred.it/tag/animation/</link><description>Recent content in Animation on Enrico Rossomando</description><generator>Hugo</generator><language>en-gb</language><lastBuildDate>Tue, 05 Mar 2013 23:49:00 +0000</lastBuildDate><atom:link href="https://www.mrred.it/tag/animation/index.xml" rel="self" type="application/rss+xml"/><item><title>CanvasLoader Creator</title><link>https://www.mrred.it/canvasloader-creator/</link><pubDate>Tue, 05 Mar 2013 23:49:00 +0000</pubDate><guid>https://www.mrred.it/canvasloader-creator/</guid><description>&lt;p&gt;&lt;a href="http://heartcode.robertpataki.com/canvasloader/"&gt;CanvasLoader Creator&lt;/a&gt; è una piccola libreria javascript (5.8kb minificata) che vi permette di riprodurre nel &lt;canvas&gt; un animazione di caricamento (loader) senza utilizzare gif animate.&lt;/p&gt;
&lt;p&gt;Sul sito c’è un piccolo pannello di controllo che vi permette di settare i diversi parametri e vedere il risultato in tempo reale.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://heartcode.robertpataki.com/canvasloader/"&gt;&lt;img alt="image" loading="lazy" src="http://media.tumblr.com/25972b2f20a925785334477ac193585e/tumblr_inline_mhy6cqgVi41qz4rgp.png"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;I vantaggi dell’utilizzare una libreria del genere sono diversi:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;5kb sono meno di una gif animata (circa 100x100)&lt;/li&gt;
&lt;li&gt;Il colore, la velocità e tanti altri parametri possono essere cambiati in tempo reale e quindi riprodurre effetti più carini a seconda delle situazioni&lt;/li&gt;
&lt;li&gt;La dimensione può essere cambiata e quindi adattata alle diverse interfacce&lt;/li&gt;
&lt;li&gt;Il codice necessario per utilizzarla è semplicissimo&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;a href="http://heartcode.robertpataki.com/canvasloader/"&gt;&lt;img alt="image" loading="lazy" src="http://media.tumblr.com/c849a9d8e4107bc1c76012ab2c891e8c/tumblr_inline_mhy6pu3hAw1qz4rgp.png"&gt;&lt;/a&gt;&lt;/p&gt;</description></item><item><title>HTML5 | Javascript canvas experiments</title><link>https://www.mrred.it/html5-javascript-canvas-experiments/</link><pubDate>Sun, 03 Feb 2013 01:02:06 +0000</pubDate><guid>https://www.mrred.it/html5-javascript-canvas-experiments/</guid><description>&lt;p&gt;&lt;a href="http://www.dhteumeuleu.com/index" title="Canvas Experiment"&gt;&lt;img loading="lazy" src="http://media.tumblr.com/6766010971a29fb8d5ddbcb182a44f90/tumblr_inline_mhjuq20kZI1qz4rgp.png"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;a href="http://www.dhteumeuleu.com/"&gt;&lt;/a&gt;&lt;a href="http://www.dhteumeuleu.com/"&gt;http://www.dhteumeuleu.com/&lt;/a&gt;&lt;/strong&gt; una raccolta di diversi esperimenti in HTML5 che fanno uso del Canvas senza nessun aiuto da parte di plugin come Flash…&lt;/p&gt;
&lt;p&gt;Per ogni esperimento è possibile visualizzare anche il &lt;strong&gt;codice sorgente&lt;/strong&gt; per capire come è stato implementato. Molto utile per scoprire nuove tecniche di &lt;strong&gt;animazione&lt;/strong&gt; e di gestione del &lt;strong&gt;canvas&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;&lt;img loading="lazy" src="http://media.tumblr.com/4313d967329c4bcf7613575153554a5f/tumblr_inline_mhjv4t0B3m1qz4rgp.png"&gt;&lt;/p&gt;</description></item><item><title>CanvasSwirl: An animated spirograph experiment in JavaScript and Canvas</title><link>https://www.mrred.it/canvasswirl-an-animated-spirograph-experiment-in/</link><pubDate>Thu, 31 Jan 2013 01:02:00 +0000</pubDate><guid>https://www.mrred.it/canvasswirl-an-animated-spirograph-experiment-in/</guid><description>&lt;p&gt;CanvasSwirl è un bellissimo esperimento implementato in javascript che unisce ad un sistema di particelle la logica dello spirografo.&lt;/p&gt;
&lt;p&gt;Lo &lt;a href="http://it.wikipedia.org/wiki/Spirograph" title="Lo Spirograph è uno strumento che produce un tipo di curve chiamate ipotrocoidi e epicicloidi"&gt;spirografo&lt;/a&gt; è uno strumento che produce delle curve chiamate &lt;a href="http://it.wikipedia.org/wiki/Ipotrocoide"&gt;ipotrocoidi&lt;/a&gt; e &lt;a href="http://it.wikipedia.org/wiki/Epicicloide"&gt;epicicloidi&lt;/a&gt;. Ve lo ricorderete perché sicuramente lo avete utilizzato a scuola quando eravate piccoli.&lt;/p&gt;
&lt;p&gt;Le &lt;strong&gt;ipotrocoidi&lt;/strong&gt; è 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 :)&lt;/p&gt;
&lt;p&gt;&lt;img alt="image" loading="lazy" src="http://media.tumblr.com/079e9d8c872300c1c79a952286b3f892/tumblr_inline_mhgau5bxwf1qz4rgp.gif"&gt;&lt;/p&gt;
&lt;p&gt;Le &lt;strong&gt;epicicloidi&lt;/strong&gt; invece si basano sullo stesso concetto delle ipotrocoidi ma il cerchio mobile ruota all’esterno del cerchio immobile.&lt;/p&gt;</description></item><item><title>Furball in WebGL</title><link>https://www.mrred.it/furball-in-webgl/</link><pubDate>Wed, 30 Jan 2013 07:32:32 +0000</pubDate><guid>https://www.mrred.it/furball-in-webgl/</guid><description>&lt;p&gt;&lt;a href="http://www.youtube.com/watch?v=De8A4jDWe40"&gt;http://www.youtube.com/watch?v=De8A4jDWe40&lt;/a&gt; Un bellissimo esperimento fatto completamente con le WebGL. Guardate il video oppure se avete un browser abilitato alle WebGL potete vederlo live a questo indirizzo: &lt;a href="http://www.theoberg.com/things/furball/"&gt;http://www.theoberg.com/things/furball/&lt;/a&gt; Grazie a @theo_t&lt;/p&gt;
&lt;p&gt;(Source: &lt;a href="http://www.youtube.com/"&gt;http://www.youtube.com/&lt;/a&gt;)&lt;/p&gt;</description></item></channel></rss>