I was a big fan of the original zoomquilt. This one is even more incredible. It gives me the same vibes as The Garden of Earthly Delights, by Hieronymus Bosch.
Every time HN posts Zoomquilt I want to comment about the Amiga demo from 1997: Captured Dreams by The Black Lotus. It was one of my favorites back then, here's the same effect running on good ol' m68k (music warning):
Thanks for posting this, haven't seen it before! Original author of the Zoomquilt here. Also noticeable is the Eames' movie Powers of Ten https://www.youtube.com/watch?v=0fKBhvDjuy0 and a similar movie Cosmic Zoom, https://www.youtube.com/watch?v=VgfwCrKe_Fk.
They are both from 1968 and both based on a childrens book about the relative size of things in the universe, to my knowledge the first implementations of an infinite zoom effect.
Reminds me of seadragon images circa 2006, which was, among other things, rolled into silverlight as 'Deep Zoom' images. There isn't much to show for it these days, but for an older opensource js implementation [1].
Lol good to know. Original author here. I very occasionally get strange emails from people with mental health problems who are overly fascinated by it, as well as Google Play reviews accusing it to be "evil and demonic". I later created http://arkadia.xyz/ for a much more wholesome experience. The stuff in the first Zoomquilts is just fantasies of all the illustrators who participated back then, I assume there really was no evil intention :-D
idk - the old IT admin had activates this and till today nobody has even bothered...
...but what caused way more trouble was the situation where the blocked all "alcohol" related sites and within five minutes he had a note from one of the CEOs... :D
Does anyone else notice that, after staring at this for a minute or so and then coming back to HN, that you experience a lingering (reverse) zoom optical illusion effect?
Maybe this provides an interesting point of comparison between two different eras of web development. Zoomquilt 1 [1] was created 16 years ago, in 2004. I sometimes see people bemoan modern development as being inefficient, and in this this case it really seems to be true. When I view Zoomquilt 1, the framerate is steady and CPU usage low. When I view Zoomquilt 2, Firefox spins up to 100% CPU use, the fans start going, and the framerate is somewhat choppy.
And as far as I see, the functionality of both is the same. Sure version 2 may have higher resolution images and some hue transformations, but surely 16 years of hardware improvements can handle that without consuming a whole core.
Morning moan over. Also, this is first and foremost a piece of art, and this comment shouldn't take away from that. I just think this is an interesting comparison that is relevant on HN.
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.
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?
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
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!
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!
The website says "ZOOMQUILT 2 An infinitely zooming painting
created in 2007" (Version 1 is from 2004) and on both pages it says "A project by Nikolaus Baumgarten".
So it doesn't seem to be the case that we compare two eras of web-dev here.
Indeed, the original was in Flash, it was only ported to canvas much later.
I can't even notice the load on the system - Chrome's task manager tells me it's using 10% CPU, and I'm running on a 4k monitor.
EDIT: just tested with Firefox on MacOS and it's incredibly choppy and CPU-hungry. the `drawImage` call always goes over budget for RAF, there are a ton of open issues about it: https://bugzilla.mozilla.org/show_bug.cgi?id=1602299
Drawing at half scale gets it back to 60ms with time to spare:
It’s smooth as silk on my iPhone 7 (4 year old, mobile hardware). I wonder if maybe it’s using some webgl feature that your machine doesn’t accelerate natively?
For me, resolution is the problem. If I reduce window size from ~4K to a fraction of that, the animation changes from being painfully choppy to smooth. I'm running a fairly powerful desktop machine with a gaming GPU.
With that logic, you can never run more than 4 applications at once. The point is that for what it does, it shouldn't even be close to utilizing a full CPU core on a modern machine.
Anecdotally it uses about 1.5% CPU on my laptop with the current Firefox stable on Windows 10 20H2. Admittedly this is a machine with an 8 Core / 16 Thread CPU, but that still feels reasonable. Firefox overall is reporting around 3.5% usage with a YouTube video playing in 1080p fullscreen, Discord and three other open (and loaded) tabs.
Exactly the same setup even. I was struggling to find the "About Firefox" option earlier, but I checked again (why is it in the help sub-menu?) and I also have 84.0.1.
The power of confirmation bias. A factually incorrect comment on a tangential topic is still the number 1 comment after 3 hours just because it appeals to those who bemoan modern web development.
I'm not sure what's going on, but I opened it in Chrome on a 5 year old PC and had no fans going, no choppy framerate, no nothing. I probably could have left it open forever and never noticed.
