Joachim Ford Games Articles Experiments News

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. Alternatively, if you leave it long enough, the automatic mouse will move around for you.

Here is the complete source code:

The main inspiration for this project came from Pixel Words by Frank Force, and I wanted to see if I could make something like it, as infinite zooms have always interested me.

This is how it works:

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.

Anyway, hopefully this page was at least a little bit helpful, and maybe it'll lead to a larger implementation in the future!

© Copyright —