[baumgarn]

Original author here! The original implementations of Zoomquilt 1+2 were done in flash. I created the HTML5 port in 2013. Zoomquilt 2 consists of 88 single images, each 1024x768px. Basically each image takes place at 50% the size in the center of the previous. For each frame, there are at most 4 images rendered at once on the canvas. The first Zoomquilt has smaller images of 800x600, hence the better performance. Arkadia.xyz has source images of 1200x900px.

The performance in Chrome is noticeably better than Firefox. The smaller the window size, the smoother the playback. Since it is only four images at once, whenever one image leaves the scene and a new one appears, there might be a small lag when the image is loaded into memory. I don't have a deeper understanding on how this could be optimized further for the browser.

For the Android OpenGL implementation I was able to take care of loading the images asynchronously before they enter the scene and freeing up the memory again after they leave the scene.

Happy to take suggestions on how this might be optimized further, as it would be interesting to work with even higher resolutions for future projects, but this quickly leads to much higher performance load and choppy playback on weaker machines.

[roytries]

That should be about 360MB of uncompressed data (1024x768x88x4 bytes) which should fit into the memory of most IGPs, which generally reserve 1 or 2 GB. Compositing 4 images at once should be something that even a very old GPU should have no problems with, even at 4K resolution. Windows Desktop Composition probably does a lot more work.

Still this indeed gets my laptop's fans spinning in both Chrome and Firefox. I wonder why that is... I don't think you can do a lot wrong code wise here. Maybe the composition takes a software path, but why?

[ricardobeat]

Hi! I was just looking into it, see my other comment below. FF is terrible at resizing on `drawImage`, you can render at half resolution [1] to improve performance, and the smoothness makes up for the lost definition. Other tricks like rendering offscreen don't really do much, I guess using CSS transforms or WebGL would be the only other options but a ton more effort.

Thanks for these, they are incredible!

[1] when devicePixelRatio > 1, in FF only. Gets me from 24ms to 7ms/frame here

[baumgarn]

Thanks for pointing this out! Great suggestion, I will try it out.

[frob]

Thanks for making this and for porting it to android! I changed phones about a month back and stumbled upon your wallpaper app by chance. It has made my homescreen such a delight these days as I never know what I'll see. Thanks again!

[baumgarn]

Great to hear! Glad you enjoy.

[frob]

Upon a few moments of reflection, it's obvious to me I should just buy the 3rd wall paper both to see what I'm missing and to support this fine work. Thanks again!

[baumgarn]

Thanks mate! You can see the full thing for free here http://arkadia.xyz, It's just the Live Wallpaper version to purchase and support the artists;)

[calhoun]

Any resources you can provide, so I can make my own site and all the art?