Joachim Ford About

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.

Check Out the 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:

∙ Create a low resolution image (in this instance, a face)
∙ Draw the image on the screen
∙ Zoom in
∙ Once the pixels making up the image are bigger than a certain amount:
 ∙ Create a duplicate of the image inside each of its pixels
 ∙ Fade and remove the old image
∙ Continue zooming in

An annoying thing regarding the JavaScript fillRect() method is it starts to get slow when drawing more than 1000 rectangles on the screen. Apparently, both PutImageData() and webgl are super fast for that kind of thing, but I went for a much easier (but worse) approach: Instead of drawing a rectangle for every pixel of the face, 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 too much.

Leave a comment
By posting, you consent to having your comment and optional name published here.


© Copyright