Joachim Ford Games Articles Experiments

Infinite Zoom

If you're using a mouse or touchpad, point in the direction you want to go. On a mobile device, tap on the place where you want to zoom in.

Here is the complete source code:

The main inspiration came from Pixel Words by Frank Force, but I wanted to make a JavaScript version. So, after many months of thinking and two-and-a-half days of developing, I got an, overly simplified, but still satisfying result.

This is how it works:

 1. Make an image that consists of various squares put together.
 2. Draw the image on the screen.
 3. Zoom in.
 4. Once the squares making up the image are bigger than a specified amount:
  1. Create a cloned image inside each of the old images' squares.
  2. Fade and then remove the old image.
 5. Keep zooming in.

An annoying thing regarding the JavaScript fillRect() method is it starts to get slow when drawing over ~1000 rectangles on the screen. Apparently, both PutImageData() and webgl are super fast for that kind of thing, but I went for a much simpler technique: Instead of drawing a rectangle for every single segment of the face icon, I created an image (which HTML calls a canvas) that represented the icon. This meant I could draw double the distance without the performance suffering greatly.

This was my previous version that used rectangles:

Of course, it is possible to render a higher depth image at the start, meaning we would get an even finer precision without a slackening of performance, but at the moment I think it looks fine.

© Copyright —