<story><title>Infinitely zooming botanical floral paradise painting</title><url>http://arkadia.xyz/</url></story><parent_chain><item><author>onion2k</author><text>Most of that script is actually for loading, playback and keyboard&amp;#x2F;mouse controls. The salient bit is loop() function on lines 152 to 233.&lt;p&gt;It loops around an array of 48 (hand-drawn?!) images, using 4 images at any given time. The images and the base scale factor are based on an incrementing &amp;#x27;z_position&amp;#x27; value. It copies each of of the four images in to an HTML5 canvas so the outer 25% is a straight up copy of one image, then 50-75% is 0.5 scale copy of another image, then 25-50% is a third image at 0.25 scale, and the centre 25% is the fourth image at 0.125 scale. All the effects are CSS filters applied to the canvas element.&lt;p&gt;It&amp;#x27;s surprisingly simple for such a cool effect.</text></item><item><author>lioeters</author><text>I&amp;#x27;ve seen a few variations of this technique, and always wondered how they&amp;#x27;re made. Here&amp;#x27;s the script if anyone else is curious: &lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;arkadia.xyz&amp;#x2F;zoom.js?v=19&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;arkadia.xyz&amp;#x2F;zoom.js?v=19&lt;/a&gt;</text></item></parent_chain><comment><author>alanbernstein</author><text>The &lt;i&gt;code&lt;/i&gt; is simple, but don&amp;#x27;t overlook the level of effort in producing the, yes, hand-drawn, images that all align with their neighbors in a weird way.</text></comment>
<story><title>Infinitely zooming botanical floral paradise painting</title><url>http://arkadia.xyz/</url></story><parent_chain><item><author>onion2k</author><text>Most of that script is actually for loading, playback and keyboard&amp;#x2F;mouse controls. The salient bit is loop() function on lines 152 to 233.&lt;p&gt;It loops around an array of 48 (hand-drawn?!) images, using 4 images at any given time. The images and the base scale factor are based on an incrementing &amp;#x27;z_position&amp;#x27; value. It copies each of of the four images in to an HTML5 canvas so the outer 25% is a straight up copy of one image, then 50-75% is 0.5 scale copy of another image, then 25-50% is a third image at 0.25 scale, and the centre 25% is the fourth image at 0.125 scale. All the effects are CSS filters applied to the canvas element.&lt;p&gt;It&amp;#x27;s surprisingly simple for such a cool effect.</text></item><item><author>lioeters</author><text>I&amp;#x27;ve seen a few variations of this technique, and always wondered how they&amp;#x27;re made. Here&amp;#x27;s the script if anyone else is curious: &lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;arkadia.xyz&amp;#x2F;zoom.js?v=19&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;arkadia.xyz&amp;#x2F;zoom.js?v=19&lt;/a&gt;</text></item></parent_chain><comment><author>AltruisticGap2</author><text>Ahh. I thought it was another one of those AI generated effects.&lt;p&gt;I haven&amp;#x27;t looked at the images, I assume then that they are specially made for that effect? (because I can&amp;#x27;t see the images fading one into another)</text></comment>