Hacker News new | past | comments | ask | show | jobs | submit login
Infinitely zooming botanical floral paradise painting (arkadia.xyz)
331 points by masupicchu 8 months ago | hide | past | favorite | 31 comments

I had an idea for a long-term, online, massively collaborative game like this years ago, but had no idea how to make it. Perhaps someone else can.

Turn a picture like this into a jigsaw puzzle, and then let people place the pictures. At the start of the game only release a few pieces. As pieces are placed correctly together, spawn new pieces that fit, somewhere, on the border of the part of the puzzle already completed. As the puzzle grows, players can zoom out (like the linked artwork).

Let many, many people work on the same puzzle and maybe have an ongoing chat for collaboration "let's all work on the part in quadrant 23 (or something).

I've seen a few variations of this technique, and always wondered how they're made. Here's the script if anyone else is curious: http://arkadia.xyz/zoom.js?v=19

Most of that script is actually for loading, playback and keyboard/mouse controls. The salient bit is loop() function on lines 152 to 233.

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 'z_position' 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.

It's surprisingly simple for such a cool effect.

The code is simple, but don't overlook the level of effort in producing the, yes, hand-drawn, images that all align with their neighbors in a weird way.

I looked at the images. I imagine they are created like this: Paint the first image, then make a copy, zoom it out and paint around the center and repeat about 44 times. For the last about four images take care to create a loop back to the first image.

Adding to my comment after a good night's sleep: To create a loop back to the first image is a bit tricky. You need to put in the zoomed-out previous image as before, but also a ring-shaped part of the zoomed-in first image.

It's awkward to explain. One problem to wrap your head around is that the series of images you create by zooming out previous images has to played in reverse.

I could imagine programming a shallow random-generated fractal generator creating series of images and then the infinite zoom would be really infinite, and this would be even easier than the loop.

If you're generating abstract shapes, to marry be able to use map the image to the screen using toroidal geometry, like that tunnel-flying demo. I think it would be trickier to do that with handcrafted art because the distortion would look weird.

Very clever, and explains why it doesn't hammer my CPU. I was surprised when my computer didn't turn into a leg warmer.

Ahh. I thought it was another one of those AI generated effects.

I haven't looked at the images, I assume then that they are specially made for that effect? (because I can't see the images fading one into another)

I can’t thank you enough for doing this. I somehow got intimidated and was afraid to look at the source. It only increases my wonder at this astounding piece of art.

Thank you for explaining this.

Kudos to Nikolaus Baumgarten and Sophia Schomberg, who seem to have won a Webby Award in 2019 for it:


I watched on a phone for only a minute, it’s beautiful, came back to the comments section and I had some serious optical illusions trying to read the first comment. I had to put the phone down just to readjust.

Yeah, watching an infinite zoom will definitely leave you with a few seconds of motion "aftereffect."[1]

[1] https://michaelbach.de/ot/mot-adapt/

Very hypnotic indeed. Gets you right into dream mode :)

Recent discussion with more such links: https://news.ycombinator.com/item?id=25191802

Nice screensaver!

Reminds of the powers of 10 video: https://www.youtube.com/watch?v=0fKBhvDjuy0

This is great. Such a powerful visualisation for such a simple technique!

My only critique is that I wish the creator hadn't used JPG images - there are clear compression artifacts that appear towards the edge of the screen as one image transitions to another.

It's just because the image has to get so enlarged as it gets that big. You'd have to use massive images otherwise (I've made a few infinite zooms before)

They are PNGs

Eventually my brain turned off the zoom effect and switched to the feeling I was flyin/floating down a path. It felt more like forward motion. Weird but cool!

Stare for a while, then click right mouse button -> View image. What a trippy illusion when it stops zooming.

This gives me really strong motion aftereffect (MAE), which is fascinatingly weird. I like it :)

Correct me if I'm wrong, but it's a loop of approx. 3 minutes

XKCD has a semi-relevant comic like this, although it is more interactive (you can choose where to zoom in and get different results): https://xkcd.com/1416/

While this is undoubtedly cool, it's not infinite zoom. Try zooming in off the path and you are pulled back.

Or at least I interpreted zooming as the ability to direct it.

it's a loop, isn't it?

Yep, it loops after a couple minutes.

This is not an infinitely zooming. It is like someone drives a car.

There’s no motion of the objects relative to each other (parallax), there is only scaling. That is the effect you would get by zooming in on a telephoto lens.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact